javascript實現(xiàn)右側(cè)彈出“分享到”窗口效果
更新時間：2016年02月01日 12:00:32 作者：caichao
這篇文章主要為大家介紹了javascript實現(xiàn)右側(cè)彈出“分享到”窗口效果，以一個完整的js右側(cè)彈出“分享到”窗口的實例代碼進行分析，感興趣的小伙伴們可以參考一下
本文實例講解了javascript實現(xiàn)右側(cè)彈出“分享到”窗口的詳細代碼，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
<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;
//防止有小數(shù)，導致一直跳動
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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
js判斷undefined類型，可以使用typeof方法，typeof 返回的是字符串,其中就有一個是undefined2014-07-07
js 禁止選擇功能實現(xiàn)代碼(兼容IE/Firefox)
有時候出于某種需要，不希望用戶可以選擇某個區(qū)域，進行下面的操作，這里給出簡單的代碼。2010-04-04
JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序,需要的朋友可以參考下2017-01-01
JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)全選或反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
javascript移出節(jié)點removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點操作移出節(jié)點removeChild()的使用,需要的朋友可以參考下2014-04-04
《javascript設(shè)計模式》學習筆記五：Javascript面向?qū)ο蟪绦蛟O(shè)計工廠模式實例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計工廠模式,結(jié)合實例形式分析了《javascript設(shè)計模式》中Javascript面向?qū)ο蠊S模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript中動態(tài)向表格添加數(shù)據(jù)
本文給大家分享使用原生javascript實現(xiàn)動態(tài)向表格中添加數(shù)據(jù)的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-01-01
JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了JS實現(xiàn)的合并多個數(shù)組去重算法,涉及javascript數(shù)組遍歷、判斷、運算、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04