最近一個網頁的案子須要用到浮動廣告視窗，說到浮動廣告視窗就一定會連想到用Javascript來寫就對了，大約寫個四五十行的程式碼就Ok了有啥好講的，是沒啥好說的！所以今天我要說的是利用CSS 做到像Javascript寫的浮動廣告視窗一樣的東西，至少可以少寫很多的程式碼。首先看一下javascript的寫法。
| 浮動廣告視窗 for Javascript |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type">
<title>浮動圖層範例</title>
</head>
<body>
<table>
<tr>
<td width="100%" height="2000px">
</td>
</tr>
</table>
<div id="iRFloating" style="position:absolute;top:100;left:1000;">
<table>
<tr>
<td valign="top">
<a href="http://www.microsoft.com/taiwan/events/teched2008/default.aspx"><img src="http://www.microsoft.com/taiwan/msdn/image/technet.gif" border="0" /></a>
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
adWidth = 160;//廣告寬度
nowX = 1000;//目前位置(left)
nowY = 100;//目前位置(top)
fad_style = document.getElementById('iRFloating').style;
function fadIni()
{
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
edge = (innerWidth-1000)/2;
if( edge > adWidth )
{
posX = edge + 1000;
}
else
{
posX = innerWidth-adWidth;
}
posY = 100;
}
function fadRefresh()
{
offsetX = posX + document.body.scrollLeft - nowX;
offsetY = posY + document.body.scrollTop - nowY;
nowX += offsetX / 5;
nowY += offsetY / 5;
fad_style.left = nowX;
fad_style.top = nowY;
floatID = setTimeout('fadRefresh()', 20 );//Refresh時間
}
function fadStart()
{
fadIni();
window.onresize=fadIni;
fadRefresh();
}
fadStart();
</script>
|
以上是浮動廣告視窗的javascript寫法，不過在asp.net裏頭不能用，因為在Visualstudio 2005的聲明是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
而不是Visualstudio2003的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
Visualstudio2005中默認的DOCTYPE聲明根本就不觸發onscroll事件，決解的方法就是用visual studio2003的聲日，不然就用CSS啦！下面是CSS的浮動廣告視窗寫法
| 浮動廣告視窗 for CSS |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {
margin:0; /* 必須 */
border:0;
height:100%; /* 必須 */
overflow-y:auto;/* 必須 */
}
#menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE並不認識fixed，而FF認識 */
* html #menu {position:absolute;} /* 這個只有IE認識 */
</style>
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div>
<ul style="list-style-type:decimal">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<ul>
</div>
<div id="menu">
<img src="http://images.cnblogs.com/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</div>
</body>
</html>
|
留言列表
