為什么設置了clearInterval()沒有效果了。
為什么設置了clearInterval()沒有效果了。
<!DOCTYPE?html>
<html?lang="en/zh">
<head>
????<meta?charset="UTF-8">
????<title>JS動畫</title>????
????<style?type="text/css">
????????*{
????????????padding:?0px;
????????????margin:?0px;
????????}
????????#share{
????????????width:?200px;
????????????height:?200px;????????????
????????????background:?#2dcb7c;
????????????position:?relative;????????????
????????????left:-200px;
????????}
????????#share?span{
????????????width:?60px;
????????????height:?50px;
????????????line-height:?50px;
????????????background:?#272822;
????????????position:?absolute;/*發現了一個秘密，只要用了定位，就可以把inline元素轉換層block元素*/
????????????right:?-60px;
????????????top:?75px;
????????????text-align:?center;
????????}
????</style>????
</head>
<body>
????<div?id="share">
????????<span>分享</span>
????</div>
<!--?javascript代碼?-->
????<script?type="text/javascript">????????
????????????window.onload?=function(){????
?????????????????var?odiv=document.getElementById("share");????????????
????????????????odiv.onmouseover=function(){
????????????????????gos();
????????????????}
????????????}
????????????/*動畫函數*/
????????????var?timer=null;
????????????function?gos(){
????????????????clearInterval(timer);
????????????????var?odiv=document.getElementById("share");????????????????????????????????????????
????????????????????timer=setInterval(function(){
????????????????????if(odiv.offsetLeft?==-10){
????????????????????????clearInterval(timer);
????????????????????}
????????????????????odiv.style.left=odiv.offsetLeft+10+"px";
????????????????},30)????????
????????????}????????
????</script>????????
</body>
</html>
2015-12-06
<!DOCTYPE html>
<html lang="en/zh">
<head>
? ? <meta charset="UTF-8">
? ? <title>JS動畫</title> ? ?
? ? <style type="text/css">
? ? ? ? *{
? ? ? ? ? ? padding: 0px;
? ? ? ? ? ? margin: 0px;
? ? ? ? }
? ? ? ? #share{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px; ? ? ? ? ? ?
? ? ? ? ? ? background: #2dcb7c;
? ? ? ? ? ? position: relative; ? ? ? ? ? ?
? ? ? ? ? ? left:-200px;
? ? ? ? }
? ? ? ? #share span{
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? background: #272822;
? ? ? ? ? ? position: absolute;/*發現了一個秘密，只要用了定位，就可以把inline元素轉換層block元素*/
? ? ? ? ? ? right: -60px;
? ? ? ? ? ? top: 75px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? </style> ? ?
</head>
<body>
? ? <div id="share">
? ? ? ? <span>分享</span>
? ? </div>
?
?
<!-- javascript代碼 -->
? ? <script type="text/javascript"> ? ? ? ?
? ? ? ? ? ? window.onload =function(){ ? ?
? ? ? ? ? ? ? ? ?var odiv=document.getElementById("share"); ? ? ? ? ? ?
? ? ? ? ? ? ? ? odiv.onmouseover=function(){
? ? ? ? ? ? ? ? ? ? gos();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? /*動畫函數*/
? ? ? ? ? ? var timer=null;
? ? ? ? ? ? function gos(){
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? var odiv=document.getElementById("share"); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? timer=setInterval(function(){
? ? ? ? ? ? ? ? ? ? if(odiv.offsetLeft >=-10){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? odiv.style.left=odiv.offsetLeft+10+"px";}
? ? ? ? ? ? ? ? },30) ? ? ? ?
? ? ? ? ? ? } ? ? ? ?
? ? </script> ? ? ? ?
</body>
</html>
改了一下