JS控制图片滚动的效果

最新推荐文章于 2024-09-07 22:23:19 发布

Thomas_Chen

最新推荐文章于 2024-09-07 22:23:19 发布

阅读量1.7k

点赞数

分类专栏： 9.JS+AJAX 文章标签： function border class microsoft div javascript

9.JS+AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<! 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=gb2312" />

< meta name ="Author" content ="番茄红了" />

< title > JS相册效果 -- 纵向 </ title >

< style >

body {background:#000000;margin:20px 0;font:12px Verdana, Arial, Tahoma;text-align:center;vertical-align:middle;color:#FFFFFF}

img {border:none}

.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff}

img.thumb_img {cursor:pointer;display:block;margin-bottom:10px}

img#main_img {cursor:pointer;display:block;}

#gotop {cursor:pointer;display:block;}

#gobottom {cursor:pointer;display:block;}

#showArea {height:355px;margin:10px;overflow:hidden}

.info {color:#666;font:normal 9px Verdana;margin-top:20px}

.info a:link, .info a:visited {color:#666;text-decoration:none}

.info a:hover {color:#fff;text-decoration:none}

</ style >

</ head >

< body >

< table width ="760" border ="0" align ="center" cellpadding ="0" cellspacing ="5" >

< tr >

< td height ="75" colspan ="2" align ="left" class ="txt_1" > JS相册效果 </ td >

</ tr >

< tr >

< td width ="640" align ="center" >< img src ="http://www.tblog.com.cn/test/images/5.jpg" alt ="番茄红了..." width ="640" height ="400" border ="0" id ="main_img" rel ="http://www.tblog.com.cn/test/images/5.jpg" link ="http://www.tblog.com.cn" /></ td >

< td width ="110" align ="center" valign ="top" >

< img src ="http://www.tblog.com.cn/test/images/gotop.gif" width ="100" height ="14" id ="gotop" />

< div id ="showArea" >

< img src ="http://www.tblog.com.cn/test/images/3.jpg" alt ="番茄红了..." width ="80" height ="50" border ="0" class ="thumb_img" rel ="http://www.tblog.com.cn/test/images/3.jpg" link ="http://www.tblog.com.cn" />

< img src ="http://www.tblog.com.cn/test/images/4.jpg" alt ="番茄红了..." width ="80" height ="50" border ="0" class ="thumb_img" rel ="http://www.tblog.com.cn/test/images/4.jpg" link ="http://www.tblog.com.cn" />

< img src ="http://www.tblog.com.cn/test/images/5.jpg" alt ="番茄红了..." width ="80" height ="50" border ="0" class ="thumb_img" rel ="http://www.tblog.com.cn/test/images/5.jpg" link ="http://www.tblog.com.cn" />

</ div >

< img src ="http://www.tblog.com.cn/test/images/gobottom.gif" width ="100" height ="14" id ="gobottom" /></ td >

</ tr >

</ table >

< center class ="info" >< a href ="http://www.tblog.com.cn" title ="番茄's Blog" > http://www.tblog.com.cn </ a >    |    Akon   By   2006/12/26 </ center >

</ body >

</ html >

< script language ="javascript" type ="text/javascript" >

function $(e) {return document.getElementById(e);}

document.getElementsByClassName = function(cl) {

var retnode = [];

var myclass = new RegExp('/b'+cl+'/b');

var elem = this.getElementsByTagName('*');

for (var i = 0; i < elem.length; i++) {

var classes = elem[i].className;

if (myclass.test(classes)) retnode.push(elem[i]);

}

return retnode;

}

var MyMar;

var speed = 1; //速度，越大越慢

var spec = 1; //每次滚动的间距, 越大滚动越快

var ipath = 'http://www.tblog.com.cn/test/images/'; //图片路径

var thumbs = document.getElementsByClassName('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 () {location = 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;}

function gobottom() {$('showArea').scrollTop+=spec;}

</ script >

横向的，第二个版本，加了兼容IE、FF、Opera的滤镜效果

<! 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=gb2312" />

< meta name ="Author" content ="番茄红了" />

< title > JS相册效果 -- 横向 </ title >

< style >

body {background:#000;margin:0;font:12px Verdana;text-align:center;}

#tbody {width:650px;margin:50px auto;}

#mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px}

#mainphoto {cursor:pointer;display:block;}

#goleft {float:left;clear:left;margin:6px 5px 0 3px;}

#goright {float:right;clear:right;margin:6px 3px 0 5px;}

#photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}

#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}

</ style >

</ head >

< body >

< div id ="tbody" >

< div id ="mainbody" >

< img src ="http://www.tblog.com.cn/test/images/5.jpg" alt ="番茄红了..." width ="640" height ="400" id ="mainphoto" rel ="http://www.tblog.com.cn/test/images/5.jpg" name ="http://www.tblog.com.cn" />

</ div >

< img src ="http://www.tblog.com.cn/test/images/goleft.gif" width ="11" height ="56" id ="goleft" />

< img src ="http://www.tblog.com.cn/test/images/goright.gif" width ="11" height ="56" id ="goright" />

< div id ="photos" >

< div id ="showArea" >

<!--

SRC: 缩略图地址

REL: 大图地址

NAME: 网址

-->