关于左下角小广告的制作。

首先是前端代码:

<div class="box" id="box1" style="bottom:0;left:0;">
<img src="close.png" style="float:right;" onclick="closead();"><br/>
<img src="left.gif">
</div>

 

css代码:

<style type="text/css">
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:300px;height:210px;}
p{height:200px;}
</style>

 

js代码:

<script type="text/javascript">
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
 var space=id(o).offsetTop;
 id(o).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(o).style.top);
    if(height!= top){
     goTo = height-parseInt((height - top)*0.9);
     id(o).style.top=goTo+'px';
    }
    //else{if(roll) clearInterval(roll);}
   },50);
 }()
}

function closead(){
    document.getElementById('box1').style.display = "none";  
}
scroll('box1');
scroll('box2');
</script>

posted @ 2017-05-15 19:19  windy小强  阅读(211)  评论(0编辑  收藏  举报