Home > Article > Web Front-end > JavaScript implements scrolling and floating ad code with buffering effect on the screen_javascript skills

JavaScript implements scrolling and floating ad code with buffering effect on the screen_javascript skills

WBOYOriginal: 2016-05-16 15:33:311234browse

The example in this article describes how JavaScript implements scrolling and floating ad code with a buffering effect on the screen. Share it with everyone for your reference, the details are as follows:

Here is a demonstration of JavaScript code that always scrolls with the screen. It is widely used in China. Especially some webmasters who like floating ads often use this code as floating ads. In fact, the original intention of this effect is Write a menu that scrolls with the screen so that visitors can control the navigation of the website anytime and anywhere.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/

The specific code is as follows:

<html>
<head>
<title>随屏滚动</title>
<style type="text/css"> 
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
<div class="box" id="box1" style="top:0;left:0;">AD1</div>
<div class="box" id="box2" style="top:0;right:0;">AD2</div>
</body>
<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);
 }()
}
scroll('box1');
scroll('box2');
</script>
</html>

I hope this article will be helpful to everyone in JavaScript programming.

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：Five ways to remove duplicates from JavaScript arrays_javascript skillsNext article：Five ways to remove duplicates from JavaScript arrays_javascript skills

See more

JavaScript implements scrolling and floating ad code with buffering effect on the screen_javascript skills

Related articles