JS实现侧边栏分享

最新推荐文章于 2023-04-27 15:38:07 发布

Just do it

最新推荐文章于 2023-04-27 15:38:07 发布

阅读量192

点赞数

原文链接：http://www.cnblogs.com/xuedong/p/5028579.html

版权

 <!DOCTYPE html>

<html>
<head>
<title>侧边栏分享</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#div1{width: 120px;height: 200px;background: red;position: absolute;left: -120px;}
#span1{width: 20px;height: 60px;background: blue;position: absolute;top: 70px;right: -20px;line-height: 20px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-120);
}
}
var timer=null;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if (iTarget<0) {
speed=-10;
}else{
speed=10;
}
if (oDiv.offsetLeft==iTarget) {
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
};
</script>
</head>
<body>
<div id="div1">
<span id="span1">
分享到
</span>
<p>1111</p>
<p>2222</p>
<p>3333</p>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/xuedong/p/5028579.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Just do it

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现侧边栏分享

<!DOCTYPE html><html><head><title>侧边栏分享</title><style type="text/css">*{margin: 0px;padding: 0px;}#div1{width: 120px;height: 200px;background: red;...
复制链接

扫一扫