CSS布局样式省略

现在a.lookdog的样式我设为position:absolutely，宽高设为0。实现的特效:当鼠标移入div.img上，实现a.lookdog的宽高自动展开的缓冲动画，并且展开完毕后，透明度变低的遮罩背景图层。当然我们用css3也能实现这种特效，但是css3的坑是不完全支持IE浏览器，所以用javascript来实现运动缓冲动画是最理想的。

javascript

函数封装部分

<div class="jb51code">
<pre class="brush:js;">
//根据类名和父对象ID获取属性节点，解决getelementsByClass对浏览器的兼容性问题

function getbyclass(classname,parent){

//传入ID<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>父节点，如果该参数为空就为document

var oParent=parent?document.getElementById(parent):document;

//定义一个空数组来存放<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>节点

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);
}