对联悬浮框原生js写法

还是直接上代码比较实在

html:

<img src =""  id="erwei" >

css:

body{

height:5000px

}

#erwei{

position:absolute;

right:30px;

}

js:

vardiv=document.getElementById('erwei')

window.onscroll=function() {

//兼容

varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;

Move(parseInt((document.documentElement.clientHeight-div.offsetHeight) /2+scrollTop))

}

vartimer

function Move(target) {

clearInterval(timer)

timer=setInterval(function() {

varspeed= (target-div.offsetTop)/4;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(div.offsetTop==target) {

clearInterval(timer)

}else{

div.style.top=div.offsetTop+speed+'px';

}

},30)

}


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,208评论 0 0
  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 4,181评论 0 0
  • 一、client家族 1.1 clientWidth和clientHeight 网页可见区域宽: document...
    LIT乐言阅读 1,333评论 0 2
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 4,654评论 0 1
  • 《无题》 空怀宝剑篇, 踌躇逝华年。 欲饮新丰酒, 还愁旧囊钱。 子在陈蔡间, 寂然调琴弦。 弘毅守中道, 笃志向...
    赛德传播阅读 2,682评论 0 0

友情链接更多精彩内容