本代码来自于懒人图库,本站只是对其代码进行分析并解释,并标注了源代码的来源,本次是对纵向的相册效果进行分析.
注明:源文件来源于懒人图库(便于代码简洁,去除了部分懒人的ad)
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=content-type content="text/html; charset=gbk"'*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].classname;//如果classname符合正则则添加到定义的空数组
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;//最后返回数组
}
var mymar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = 'images/'; //图片路径
var thumbs = document.getelementsbyclassname('thumb_img');//获取以thumb_img的数组
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};//循环对对象进行附加事件
thumbs[i].onclick = function () {location = this.link}
}
$('main_img').onclick = function () {window.open(this.link);}//对中间的大图进行附加事件
$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; mymar=setinterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearinterval(mymar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; mymar=setinterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearinterval(mymar);}
function gotop() {$('showarea').scrolltop-=spec;}//设定鼠标移动到上下按钮时,图片的整体滚动<网站制作学习网foasp.cn>
function gobottom() {$('showarea').scrolltop+=spec;}
</script>
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
