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

2019-11-20 10:38:38

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：AngularJS自动表单验证

下一篇：AngularJS手动表单验证