javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果
更新時(shí)間：2016年02月01日 12:00:32 作者：caichao
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口效果，以一個(gè)完整的js右側(cè)彈出“分享到”窗口的實(shí)例代碼進(jìn)行分析，感興趣的小伙伴們可以參考一下
本文實(shí)例講解了javascript實(shí)現(xiàn)右側(cè)彈出“分享到”窗口的詳細(xì)代碼，分享給大家供大家參考，具體內(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ù)，導(dǎo)致一直跳動(dòng)
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
微信小程序開(kāi)發(fā)animation心跳動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了微信小程序開(kāi)發(fā)animation心跳動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了js最全的數(shù)組的降維5種辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
在Web開(kāi)發(fā)中,有時(shí)候我們需要通過(guò)JavaScript來(lái)控制用戶的瀏覽器行為,其中之一就是關(guān)閉瀏覽器窗口,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript關(guān)閉窗口的4種方法,需要的朋友可以參考下2024-01-01
js 賦值包含單引號(hào)雙引號(hào)問(wèn)題的解決方法
這篇文章主要介紹了js賦值包含單引號(hào)雙引號(hào)問(wèn)題的解決方法,需要的朋友可以參考下2014-02-02
提起瀑布流布局想必大家并不陌生吧，其實(shí)呢？原理也就那樣，下面有個(gè)小例子，與大家分享2014-04-04
搜索框，文本框，文本域，文本區(qū)域 可能都要有個(gè)默認(rèn)值2012-01-01
使用JS實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
Typescript文件被識(shí)別為視頻的問(wèn)題解決
這篇文章主要為大家介紹了Typescript文件被識(shí)別為視頻的問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
今天有工作人員反饋后臺(tái)編輯文章的時(shí)候，多按了幾下退格鍵，然后當(dāng)前編輯的頁(yè)面都返回到上一頁(yè)了，導(dǎo)致剛剛添加的內(nèi)容全部丟失，今天正好有空給整理一下2019-02-02