javascript实现右侧弹出“分享到”窗口效果

时间：2021-05-26

本文实例讲解了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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章