Javascript realisiert den Popup-Fenstereffekt „Teilen an' auf der rechten Seite_Javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript realisiert den Popup-Fenstereffekt „Teilen an' auf der rechten Seite_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:16:46

Original

1290 Leute haben es durchsucht

Das Beispiel in diesem Artikel erläutert den detaillierten Code von Javascript zur Implementierung des „Teilen an“-Fensters, das auf der rechten Seite angezeigt wird. Der spezifische Inhalt ist wie folgt

Rendering:

Spezifischer Code:

<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 &#63; 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 &#63; 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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.