JS_模拟广告栏跟随效果

很多网站上，都有改变滚动条的位置（即页面文档位置）有个广告栏跟随，不管去哪，广告栏总是亲切得跟着你，还有滑动的动画效果。

来po下我的代码

html:

1 <div class="advistementFllow">
2         <div class="advContent" id="adv"></div>
3     </div>

html代码

css:

 1 *{
 2     margin:0;
 3     padding: 0;
 4     box-sizing: border-box;
 5 }
 6 .advistementFllow{
 7     height: 3000px;
 8 }
 9 .advContent{
10     width:100px;
11     height: 280px;
12     border: 1px solid #000;
13     position: relative;
14     top: 50px;
15 }

css代码

js代码：

 1 window.addEventListener("load",function(){
 2     var adv = document.getElementById("adv");
 3
 4     window.addEventListener("scroll",function(){
 5         var scrollYPos = window.pageYOffset || document.documentElement.scrollTop
 6         var start = adv.offsetTop;
 7         var topPos = 50;
 8         var des = scrollYPos + topPos;
 9
10         moveSlowly(start,des)
11     })
12
13 })
14 var timer = null;
15 function moveSlowly(start,des,time){
16     clearInterval(timer);
17
18     var SpeedTime = time || 200;
19     var distance =  des - start;
20     var speed =  distance/SpeedTime;
21
22         var pos = start;
23         var i = 1;
24
25     timer = setInterval(function(){
26                 if(i == SpeedTime){
27                     adv.style.top = (start+distance) + "px";
28                     clearInterval(timer)
29                 }else{
30                     pos = pos + speed;
31                     adv.style.top =  pos+"px";
32                     i++;
33                 }
34
35             },1)
36 }

这个效果好像也展示不了，感兴趣的动动手试试看效果。

代码相对简单，自己写了一个缓动公式，非常笨的方法T T

以上内容，如有错误请指出，不甚感激。

转载于:https://www.cnblogs.com/adelina-blog/p/5889519.html

JS_模拟广告栏跟随效果相关推荐

不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
html5调用手电筒,HTML5的模拟手电筒照明效果
一款挺逼真的HTML5模拟手电筒照明效果,HTML5 SVG实现手电筒照射地面光亮特效,光亮跟随鼠标指针移动. HTML5模拟手电筒照明效果 html, body { height: 100%; ma ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
xpath技术解析xml以及案例模拟用户登录效果
问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!! xpath就在此情况下产生了--主要是用于快速获取所需的[节点对象]. 在dom4j中如何使用xPath技术 1) ...
Silverlight 游戏开发小技巧：轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
transform限制position:fixed的跟随效果
我们应该都知道,position:fixed可以让元素不跟随浏览器的滚动条滚动,而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了.但是,真是一物降一物,pos ...
CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...

JS_模拟广告栏跟随效果

JS_模拟广告栏跟随效果相关推荐

最新文章

热门文章