首页 > 代码库 > js实现右侧的分享效果
js实现右侧的分享效果
就是当鼠标移到上面的时候，他会出现，鼠标移出就消失。
nmouseover和nmouseout就能实现
<style>*{padding:0;margin:0;} #s1{width:200px ; background:red; height:200px; position:absolute; top:50px; left:-200px; cursor:pointer;} #s1 span{display:block;height:80px;width:20px;left:200px;background:blue;position:absolute;left:200px;top:50px;}}</style><body><div id="s1"> <span>分享到</span></div> </body>
js代码如下
<script> window.onload=function() { var div1=document.getElementById("s1"); var span1=s1.getElementsByTagName("span")[0]; div1.onmouseover=function() { startMove(0); } div1.onmouseout=function() { startMove(-200); } }; var timer=null; function startMove(ti) { var div1=document.getElementById("s1"); clearInterval(timer); timer=setInterval(function() { var speed=null; if (div1.offsetLeft>ti) //先判断他的速度是正的还是负的，如果offsetLeft大于0，速度为负 { speed=-10; } else //否则速度为正，显示div要出来 { speed=10; } if (div1.offsetLeft==ti) //相等，停止运动 { clearInterval(timer); } else //不相等，做匀速运动 { div1.style.left=div1.offsetLeft+speed+‘px‘; } },30); }</script>
其实特别简单，只要收敲敲就会，
js实现右侧的分享效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。