javascript实现右侧弹出“分享到”窗口效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript实现右侧弹出“分享到”窗口效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2037字,纯文字阅读大概需要3分钟。
内容图文
![javascript实现右侧弹出“分享到”窗口效果](/upload/InfoBanner/zyjiaocheng/355/281cfc1cf8144f158a25dbe78430eea1.jpg)
本文实例讲解了javascript实现右侧弹出“分享到”窗口的详细代码,分享给大家供大家参考,具体内容如下
效果图:
具体代码:
<html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body { padding: 0; margin: 0; } #div1 { width: 100px; height: 150px; background-color: #1B6D85; left:-100px; position: absolute; } #div1 span { width: 20px; height: 100px; line-height: 30px; background-color:#1B6D85; left:100px; top:20px; position: absolute; } </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById('div1'); oDiv1.timer = null; oDiv1.onmouseover = function() { startMove(this, 0); }; oDiv1.onmouseout = function() { startMove(this, -100); }; }; window.onscroll = function () { var oDiv1 = document.getElementById('div1'); var ioffsetMiddle = document.documentElement.scrollTop || document.body.scrollTop; ioffsetMiddle = ioffsetMiddle + (document.documentElement.clientHeight - oDiv1.offsetHeight) / 2; //防止有小数,导致一直跳动 ioffsetMiddle = parseInt(ioffsetMiddle); startMiddle(oDiv1, ioffsetMiddle); }; function startMiddle(obj, iTarget) { clearInterval(obj.timerMiddle); obj.timerMiddle = setInterval(function () { var speed = (iTarget - obj.offsetTop) / 8; //如果大于零就取上,小于零就取下 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); document.getElementById('input1').value = iTarget + '-' + (obj.offsetTop + speed); if (obj.offsetTop == iTarget) { clearInterval(obj.timerMiddle); } else { obj.style.top = obj.offsetTop + speed + 'px'; } }, 10); } function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = (iTarget - obj.offsetLeft) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.offsetLeft == iTarget) { clearInterval(obj.timer); } else { obj.style.left = obj.offsetLeft + speed + 'px'; } }, 10); } </script> </head> <body style="height:2000px;"> <input type="text" id="input1"/> <div id="div1"> <span> 分享到 </span> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助。
内容总结
以上是互联网集市为您收集整理的javascript实现右侧弹出“分享到”窗口效果全部内容,希望文章能够帮你解决javascript实现右侧弹出“分享到”窗口效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。