我们在制作网页时经常遇到广告悬浮问题,下面这个html5列子比较简单,但是能够解决问题!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>类似广告悬浮</title> <style type="text/css"> .img{ position:absolute; width:100px; height:100px; top:100px; right:18px;} </style> </head>
<body> <div class="img" id="sroling" > <img src="../../images/png-1783.png" /> </div> <script type="text/javascript"> var id=function(i){return document.getElementById(i)} var scroll=function (i){ var space=id(i).offsetTop; id(i).style.top=space+'px'; void function(){ var goTo = 0; var roll=setInterval(function(){ var height =document.documentElement.scrollTop+document.body.scrollTop+space; var top = parseInt(id(i).style.top); if(height!= top){ goTo = height-parseInt((height - top)*0.9); id(i).style.top=goTo+'px'; } //else{if(roll) clearInterval(roll);} },12); }() } scroll('sroling'); </script> </body> |