本文分享js运动事件函数，供大家参考。具体内容如下

超文本标记语言

div id=' breed Dog ' H2 class=' title ' the Dog/h2p class=' description ' split之间的猫，属于猫科动物，猫，猫，是世界上比较广泛的布林家族宠物。猫的祖先大概是沙漠猫/pdiv class=' breeddog 1 ' div class=' img ' img src=' http : img 2/拉布拉多. jpg '/a class=' lookdog ' href=' # '/a/div class=' img _ txt ' p class=' Chinese ' Labrador/PP class=' English ' Labrador/PP class=' introduction '拉布拉多寻回犬因其原产地在加拿大纽芬兰和拉布拉多而得名，拉布拉多是一种中型和大型犬，具有忠诚拉布拉多非常适合被选作导盲犬或地铁警犬、搜救犬等工作犬。拉布拉多与哈士奇(西伯利亚采雪犬)和金毛猎犬并列三大非攻击性犬种，拉布拉多的智商在全球犬种中排名第七。/p/div/div/divCSS布局样式被省略

目前a.lookdog的样式设置为position :绝对，宽度和高度设置为0。实现了特效：当鼠标移动到div.img时，实现了a.lookdog的宽度和高度自动展开的缓冲动画，展开后遮挡了透明度较低的背景层。当然我们可以用css3实现这种特殊效果，但是css3的漏洞并不完全支持IE浏览器，所以用javascript实现运动缓冲动画是比较理想的。

java描述语言

功能封装部分

//根据类名和父对象ID获取属性节点，解决getelementsByClass (classname，parent){//传入ID获取父节点，如果此参数为空，则为document var oParent=parent？document.getElementById(父级):document//定义一个空数组来存储属性节点var els=[]；//定义一个数组来存储父对象的所有子节点：varelements=opa rent . getelementsbytagname(' * ')；//遍历所有子节点，根据类名找出所有子对象，放入els数组for(var I=0；ielelements . length；i ){ if(elements[i]。CLaSS name==CLaSS name){ els . push(elements[I])；} }返回els}//根据对象的属性名获取属性值函数getstyle (obj，style name){//获取style方法if (obj。currentstyle) {return obj。IE浏览器的current style[style name]；//获取其他浏览器的样式方法} else if (getcomputedstyle (obj，false)){ return getcomputed style(obj，false)[style name]；}}//Buffer动画主函数，参数类型：(对象，要以jaso格式更改的样式值(多个)，缓冲系数，执行周期时间(值越小，速度越快，越大越慢)，回调函数(是否有多个动画播放，可选))Function move Jason (obj，Jason，average，cycle，continue Function)obj . timer=set interval(Function(){ for(var style name in Jason){//Buffer动画for multi-effects//obj . style[style name]=Jason[style name]；//} if(style name==' opacity '){ var off value=math . round(parseFloat(getStyle(obj，style name))* 100)；var speed=(Jason[style name]-off value)/average；速度=速度0？Math.ceil(速度): path . floor(速度)；if(speed==0){ clearInterval(obj . timer)；if(continue function)continue function()；//回调函数判断是否多次执行} else { obj . style[style name]=(off值速度)/100；obj . style . filter=' alpha(opa city 3360 '(off value speed)')'；} } else { var off value=ParSeint(GetStyle(obj，style name))；var speed=(Jason[style name]-off value)/average；速度=速度0？Math.ceil(速度): path . floor(速度)；if(speed==0){ clearInterval(obj . timer)；if(continue function)continue function()；} else { obj . style[style name]=off value speed ' px '；} }}}，循环)；}页面初始化函数，方法调用

window . onload=function(){ var img dog=getbyclass(' img '，' breeddog ')；//在父对象breedsdog上查找所有div.img//为所有div . img添加鼠标输入和鼠标输出事件(var I=0；iimgdog.lengthi ){imgdog[i]。onmouseover=function(){ var obj=this . children[1]；Move Jason (obj，{'height' :376，' width' :206}，5，30，function () {//)缓冲动画函数调用，然后在宽度和高度缓冲区更改完成后回调函数执行透明度缓冲区更改。同样，可以在多层嵌套中实现多个回调。MoveJason(obj，{ '不透明度' :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，你可以看到等宽和等高变化，然后透明度变化。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。