<div id="breedsdog">
<h2 class="title">The Dog</h2>
<p class="describe">Split between cat,belong to the cat family,cat,cat,is the world's more widely<br>
in the family pet.Cats ancestors is presumably desert cats</p>
<div class="breedsdog1">
<div class="img">
<img src="img2/labrador.jpg"/>
<a class="lookdog" href="#"></a>
</div>
<div class="img_txt">
<p class="chinese">拉布拉多</p>
<p class="english">Labrador</p>
<p class="introduce">
拉布拉多獵犬因原產(chǎn)地在加拿大的紐芬蘭與拉布拉多省而得名。拉布拉多犬是一種中大型犬類(lèi)，個(gè)性忠誠(chéng)、大氣、憨厚、溫和、陽(yáng)光、開(kāi)朗、活潑，智商極高，也對(duì)人很友善，是非常適合被選作經(jīng)常出入公共場(chǎng)合的導(dǎo)盲犬或地鐵警犬及搜救犬和其他工作犬的狗品種，跟哈士奇（西伯利亞雪撬犬）和金毛獵犬并列三大無(wú)攻擊性犬類(lèi)，拉布拉多智商位列世界犬類(lèi)第七。
</p>
</div>
</div>

</div>

//根據(jù)類(lèi)名和父對(duì)象ID獲取屬性節(jié)點(diǎn)，解決getelementsByClass對(duì)瀏覽器的兼容性問(wèn)題
function getbyclass(classname,parent){

    //傳入ID獲取父節(jié)點(diǎn)，如果該參數(shù)為空就為document
 
var oParent=parent?document.getElementById(parent):document;

    //定義一個(gè)空數(shù)組來(lái)存放屬性節(jié)點(diǎn)
 var els=[];

    //定義一個(gè)數(shù)組存放父對(duì)象的所有子節(jié)點(diǎn)

 
var elements=oParent.getElementsByTagName("*");

    //遍歷所有子節(jié)點(diǎn)，根據(jù)類(lèi)名把所有的子對(duì)象找出來(lái)，并且放在els數(shù)組內(nèi)
 for(var i=0;i<elements.length;i++){
 if(elements[i].className==classname){
 els.push(elements[i]);
 }
 }
 return els;
 }

//根據(jù)對(duì)象要獲取的屬性名來(lái)得到屬性值

function getStyle(obj,stylename){

    //針對(duì)IE瀏覽器獲取樣式方法
if(obj.currentStyle){
return obj.currentStyle[stylename];

    //針對(duì)其他瀏覽器獲取樣式方法
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

//緩沖動(dòng)畫(huà)主函數(shù)，傳參類(lèi)型：(對(duì)象，jaso格式要改變的樣式值(可多個(gè))，緩沖系數(shù)，執(zhí)行周期時(shí)間(值越小速度越快，越大越慢)，回調(diào)函數(shù)(是否有多次動(dòng)畫(huà)的播放，可有可無(wú)))

function MoveJason(obj,jason,average,cycle,continuefunction){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var stylename in jason){//針對(duì)多效果的緩沖動(dòng)畫(huà)
// obj.style[stylename]=jason[stylename];
// }
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();//回調(diào)函數(shù)，判斷是否有多次執(zhí)行
  }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
  }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
  }else{
obj.style[stylename]=offvalue+speed+"px";
  }
  }
}
},cycle);
}

window.onload=function(){

var imgdog=getbyclass("img","breedsdog");//在父對(duì)象breedsdog上找到所有的div.img

    //給所有的div.img添加鼠標(biāo)移入，鼠標(biāo)移出事件
for(var i=0;i<imgdog.length;i++){

imgdog[i].onmouseover=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":376,"width":206},5,30,function(){//緩沖動(dòng)畫(huà)的函數(shù)調(diào)用，當(dāng)執(zhí)行完寬高值的緩沖變化，再回調(diào)函數(shù)執(zhí)行透明度緩沖變化。以下同理，可以多層嵌套實(shí)現(xiàn)多個(gè)回調(diào)。
        MoveJason(obj,{"opacity":30},5,30);
    });
}
imgdog[i].onmouseout=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":0,"width":0},5,30,function(){
        MoveJason(obj,{"opacity":80},5,30);
    });
}
}

}