html5广告悬浮问题

2014-6-26 16:26| 发布者: admin| 查看: 1803| 评论: 0

摘要: 我们在制作网页时经常遇到广告悬浮问题，下面这个html5列子比较简单，但是能够解决问题！！ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi ...

我们在制作网页时经常遇到广告悬浮问题，下面这个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>