JavaScript图片显示

核心提示： 1. 在文档中获取class属性为"DDbox"标签为<a>的元素，我们可以调用之前介绍过的一个函数hasClass；2. 阻止默认事件（本例中为页面跳转）的函数，JavaScript图片显示(3)，这一个在之前也介绍过stopDefault函数；3. 元素

1. 在文档中获取class属性为"DDbox"标签为<a>的元素，我们可以调用之前介绍过的一个函数hasClass；

2. 阻止默认事件（本例中为页面跳转）的函数，这一个在之前也介绍过stopDefault函数；

3. 元素渐现函数和渐隐函数，我们将其取名为fade，待会会尝试去实现；

4. 考虑到浏览器兼容问题，我们需要封装一个setOpacity函数来设置元素的透明度，用于实现渐隐渐现；

5. 元素展开函数，这个用之前发布过的natrualSlide可以实现，不过这里我们还是重新写一个比较简单的slide函数；

6. 当然不要忘了很重要的一点，如何去实现图片框的适宜大小以及居中定位，这里可能会比较复杂。我们要设计一个函数，通过传入元素长和宽来定位居中位置。

暂时想到这些，接下来一个一个实现

hasClass函数

Code

//找出所有具有相同类名的元素
functionhasClass(name,type){
　　varr=[];
　　varre=newRegExp("(^|s)"+name+"(s|$)");
　　vare=document.getElementsByTagName(type||"*");
　　for(varj=0;j<e.length;j++)
　　　　if(re.test(e[j].className))
　　　　　　r.push(e[j]);
　　returnr;
};

这里考虑到一个class属性中可能写入多个class style，所以用正则表达式进行检测而不是直接判断相等。

stopDefault函数

Code

//阻止默认事件
functionstopDefault(e){
　　if(e&&e.preventDefault)
　　　　e.preventDefault();
　　else
　　　　window.event.returnValue=false;
　　returnfalse;
}