Home > Article > Web Front-end > js implements the advertising code in the lower right corner with buffering effect that scrolls with the screen_javascript skills

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

WBOYOriginal: 2016-05-16 15:40:55931browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS advertising code to achieve elastic floating effect_javascript skillsNext article：JS advertising code to achieve elastic floating effect_javascript skills

See more

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

Related articles