<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>js運動框架</title>
????<style?type="text/css">
????????*{
????????????padding:0px;
????????????margin:0px;
????????}
????????.div1{
????????????width:200px;
????????????height:200px;
????????????background:red;
????????????filter:?alpha(opacity:30);
????????????opacity:?0.3;
????????????float:left;
????????????margin-left:10px;
????????}
????????/*?#div1?.share{
????????????width:20px;
????????????height:50px;
????????????background:?blue;
????????????position:?absolute;
????????????left:?200px;
????????????top:75px;
????????}?*/
????</style>
????<script?type="text/javascript">
????????window.onload=function(){//表示當頁面加載完成后執(zhí)行這個函數(shù)方法；
????????????var?oDiv=document.getElementById("div1");//綁定js將要作用的dom對象的某個節(jié)點；即聲明一個對象且對象是通過這個document的方法getElementById("?")得來的；注意這塊是局部變量，所以下面構造的函數(shù)必須重新獲取id的值；
????????????oDiv.onmouseover=function(){//給onmouseover鼠標移入事件綁定一個函數(shù)方法；
????????????????startMove(100);//代碼真正作用的執(zhí)行塊，調(diào)用這個構造函數(shù)的方法；
????????????}???
????????????oDiv.onmouseout=function(){//給onmouseout鼠標移出事件綁定一個函數(shù)方法；
???????????????startMove(30);?//代碼真正作用的執(zhí)行塊，調(diào)用這個構造函數(shù)的方法;實參；
????????????}
????????}
????????var?timer=null;//定義一個計時器對象且為空值；
????????var?alpha=30;
????????function?startMove(target){
????????????var?oDiv=document.getElementById("div1");
????????????clearInterval(timer);//清除計時器，防止多次觸發(fā)疊加；
????????????<!--定義一個計時器-->
????????????timer=setInterval(function(){
????????????var?speed=0;//定義一個速度改變量；
????????????if?(alpha>target)?{
????????????????speed=-10;
????????????}?else?{
????????????????speed=10;
????????????}
????????????if?(alpha==target)?{
????????????????clearInterval(timer);
????????????}else{
????????????????alpha+=speed;
????????????????//oDiv.style.filter="alpha(opacity:"+alpha+")";
????????????????oDiv.style.opacity=alpha/100;
????????????}????????
????????????},30);
????????}
????</script>
</head>
<body?>
????<div>
????????<span>
????????????分享
????????</span>?
????</div>
????<div>
????????<span>
????????????分享
????????</span>?
????</div>
????<div>
????????<span>
????????????分享
????????</span>?
????</div>
</body>
</html>
2016-09-16
//獲取需要定義動畫的元素的集合 var?oDiv=document.getElementsByTagName("div"); //遍歷，集合中的每一個元素都賦予其onmouseover和onmouseout方法值 for(var?i=0;i<oDiv.length;i++){ ????oDiv[i].onmouseover=function(){ ????????.... ????} }2016-09-16
不懂你啥意思？