<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>js運(yùn)動(dòng)框架</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(){//表示當(dāng)頁面加載完成后執(zhí)行這個(gè)函數(shù)方法；
????????????var?oDiv=document.getElementById("div1");//綁定js將要作用的dom對象的某個(gè)節(jié)點(diǎn)；即聲明一個(gè)對象且對象是通過這個(gè)document的方法getElementById("?")得來的；注意這塊是局部變量，所以下面構(gòu)造的函數(shù)必須重新獲取id的值；
????????????oDiv.onmouseover=function(){//給onmouseover鼠標(biāo)移入事件綁定一個(gè)函數(shù)方法；
????????????????startMove(100);//代碼真正作用的執(zhí)行塊，調(diào)用這個(gè)構(gòu)造函數(shù)的方法；
????????????}???
????????????oDiv.onmouseout=function(){//給onmouseout鼠標(biāo)移出事件綁定一個(gè)函數(shù)方法；
???????????????startMove(30);?//代碼真正作用的執(zhí)行塊，調(diào)用這個(gè)構(gòu)造函數(shù)的方法;實(shí)參；
????????????}
????????}
????????var?timer=null;//定義一個(gè)計(jì)時(shí)器對象且為空值；
????????var?alpha=30;
????????function?startMove(target){
????????????var?oDiv=document.getElementById("div1");
????????????clearInterval(timer);//清除計(jì)時(shí)器，防止多次觸發(fā)疊加；
????????????<!--定義一個(gè)計(jì)時(shí)器-->
????????????timer=setInterval(function(){
????????????var?speed=0;//定義一個(gè)速度改變量；
????????????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
//獲取需要定義動(dòng)畫的元素的集合 var?oDiv=document.getElementsByTagName("div"); //遍歷，集合中的每一個(gè)元素都賦予其onmouseover和onmouseout方法值 for(var?i=0;i<oDiv.length;i++){ ????oDiv[i].onmouseover=function(){ ????????.... ????} }2016-09-16
不懂你啥意思？