js 모션 이벤트 기능에 대한 자세한 설명

본 글의 예시에서는 참고용으로 js 모션 이벤트 기능을 공유하고 있습니다.

HTML

<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&#39;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">
拉布拉多猎犬因原产地在加拿大的纽芬兰与拉布拉多省而得名。拉布拉多犬是一种中大型犬类，个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，跟哈士奇（西伯利亚雪撬犬）和金毛猎犬并列三大无攻击性犬类，拉布拉多智商位列世界犬类第七。
</p>
</div>
</div>
 
</div>

CSS 레이아웃 스타일 생략

이제 a.lookdog의 스타일을 position:absolute로 설정하고 너비와 높이를 0으로 설정했습니다. 특수 효과 달성: div.img에 마우스가 이동하면 a.lookdog의 너비와 높이가 자동으로 확장되는 버퍼 애니메이션이 구현되고 확장이 완료되면 마스크 배경 레이어의 투명도가 낮아집니다. 물론 이런 종류의 특수 효과를 얻기 위해 CSS3를 사용할 수도 있지만 CSS3의 함정은 IE 브라우저를 완전히 지원하지 않는다는 것이므로 모션 버퍼 애니메이션을 구현하려면 JavaScript를 사용하는 것이 이상적입니다.

javascript

함수 캡슐화 부분

//根据类名和父对象ID获取属性节点，解决getelementsByClass对浏览器的兼容性问题
 
function getbyclass(classname,parent){
 
    //传入ID获取父节点，如果该参数为空就为document
 
  
var oParent=parent?document.getElementById(parent):document;
 
    //定义一个空数组来存放属性节点
 var els=[];
 
    //定义一个数组存放父对象的所有子节点
 
  
var elements=oParent.getElementsByTagName("*");
 
    //遍历所有子节点，根据类名把所有的子对象找出来，并且放在els数组内
 for(var i=0;i<elements.length;i++){
 if(elements[i].className==classname){
 els.push(elements[i]);
 }
 }
 return els;
 }
 
//根据对象要获取的属性名来得到属性值
 
function getStyle(obj,stylename){
 
    //针对IE浏览器获取样式方法
if(obj.currentStyle){
return obj.currentStyle[stylename];
 
    //针对其他浏览器获取样式方法
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}
 
//缓冲动画主函数，传参类型：(对象，jaso格式要改变的样式值(可多个)，缓冲系数，执行周期时间(值越小速度越快，越大越慢)，回调函数(是否有多次动画的播放，可有可无))
 
function MoveJason(obj,jason,average,cycle,continuefunction){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var stylename in jason){//针对多效果的缓冲动画
// 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();//回调函数，判断是否有多次执行
  }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");//在父对象breedsdog上找到所有的div.img
 
    //给所有的div.img添加鼠标移入，鼠标移出事件
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(){//缓冲动画的函数调用，当执行完宽高值的缓冲变化，再回调函数执行透明度缓冲变化。以下同理，可以多层嵌套实现多个回调。
        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);
    });
}
}
 
}

마우스를 안팎으로 움직였을 때의 효과는 다음과 같습니다. div.img를 몇 개 더 추가한 후 동일한 너비와 높이가 변경된 것을 볼 수 있습니다. 투명도가 변경됩니다.