js implements the advertising code in the lower right corner with buffering effect that scrolls with the screen

js implements the advertising code in the lower right corner with buffering effect that scrolls with the screen_javascript skills

WBOY

Release： 2016-05-16 15:40:55

Original

1021 people have browsed it

The example in this article describes the js implementation of the advertising code in the lower right corner with buffering effect that scrolls with the screen. Share it with everyone for your reference. The details are as follows:

An advertising code in the lower right corner that automatically scrolls with the screen. Please pay attention to a few parameters here:

id The id of the content you want to scroll
Should r be placed on the left or right? The default is right
t The position you want to place on the page defaults to the bottom edge, 0 is to the top edge
f 1 means fixed, not written or 0 means scrolling (ie6 fixed is invalid)
Is it very practical? This version has been revised twice by the author and has good compatibility.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-right-buttom-float-follow-scroll-adv-codes/

The specific code is as follows:

<!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=gbk" />
<title>随屏幕滚动的带缓冲效果的右下角广告</title>
<style>
 html,body{
  height:2000px;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >拖动滚动条试试哦~</div>
</body>
</html>
<script>
 function scroll(p){
  var d = document,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent);
  if(o){
   o.style.cssText +=";position:"+(p.f&&!ie6&#63;'fixed':'absolute')+";"+(p.r&#63;'left':"right")+":0;"+(p.t!=undefined&#63;'top:'+p.t+'px':'bottom:0');
   if(!p.f||ie6){
    -function(){
    var t = 500,st = d.documentElement.scrollTop||d.body.scrollTop,c;
   c = st - o.offsetTop + (p.t!=undefined&#63;p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);//如果你是html 4.01请改成d.body,这里不处理以减少代码
    c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0&#63;-1:1) + 'px',t=10);
    setTimeout(arguments.callee,t)
   }() 
   }
  }
 }
 scroll({
  id:'aa'
 })
</script>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.