带按钮控制的垂直滚动JS图片展示
演示查看:http://www.syku.net/demo/demo14/
运行代码框
<!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="syku月可整理" /> <title>最新推荐_syku.net</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; width:110px;margin:5px auto;overflow:hidden; background-color:#FF0000;} .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="110" border="0" align="center" cellpadding="0" cellspacing="5" bordercolor="#FF0000"> <tr> <td width="110" align="center" valign="top"> <img src="http://www.syku.net/demo/demo14/images/gotop.gif" _fcksavedurl="http://www.syku.net/demo/demo14/images/gotop.gif" width="110" height="14" id="gotop" /> <div id="showArea"> <a href="http://www.syku.net/design/Photoshop/200806/16404.shtml" _fcksavedurl="http://www.syku.net/design/Photoshop/200806/16404.shtml"><img src="http://www.syku.net/uploads/litimg/080604/1322332P57.gif" _fcksavedurl="http://www.syku.net/uploads/litimg/080604/1322332P57.gif" alt="ps打造古典韵味照片特效" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/uploads/litimg/080604/1322332P57.gif" link="http://www.syku.net/design/Photoshop/200806/16404.shtml" /></a> <a href="http://www.syku.net/design/Photoshop/200806/16402.shtml" _fcksavedurl="http://www.syku.net/design/Photoshop/200806/16402.shtml"><img src="http://www.syku.net/uploads/litimg/080604/1221412c61.gif" _fcksavedurl="http://www.syku.net/uploads/litimg/080604/1221412c61.gif" alt="Photoshop为美女钻石耳坠增加闪光效果" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/uploads/litimg/080604/1221412c61.gif" link="http://www.syku.net/design/Photoshop/200806/16402.shtml" /></a> <a href="http://www.syku.net/design/Photoshop/200806/16401.shtml" _fcksavedurl="http://www.syku.net/design/Photoshop/200806/16401.shtml"><img src="http://www.syku.net/uploads/litimg/080604/1216132M19.gif" _fcksavedurl="http://www.syku.net/uploads/litimg/080604/1216132M19.gif" alt="Photoshop照片合成：偶像签名效果" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/uploads/litimg/080604/1216132M19.gif" link="http://www.syku.net/design/Photoshop/200806/16401.shtml" /></a> <a href="http://www.syku.net/sc/pagemb/ommb/200806/16453.shtml" _fcksavedurl="http://www.syku.net/sc/pagemb/ommb/200806/16453.shtml"><img src="http://www.syku.net/uploads/litimg/080604/224T619422.gif" _fcksavedurl="http://www.syku.net/uploads/litimg/080604/224T619422.gif" alt="欧美典雅酒店模板" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/uploads/litimg/080604/224T619422.gif" link="http://www.syku.net/sc/pagemb/ommb/200806/16453.shtml" /></a> <a href="http://www.syku.net/sc/pagemb/ommb/200804/16092.shtml" _fcksavedurl="http://www.syku.net/sc/pagemb/ommb/200804/16092.shtml"><img src="http://www.syku.net/sc/UploadSoftPic/200804/2008042810305976.gif" _fcksavedurl="http://www.syku.net/sc/UploadSoftPic/200804/2008042810305976.gif" alt="欧美房产模板" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/sc/UploadSoftPic/200804/2008042810305976.gif" link="http://www.syku.net/sc/pagemb/ommb/200804/16092.shtml" /></a> <a href="http://www.syku.net/sc/pagemb/ommb/200804/16093.shtml" _fcksavedurl="http://www.syku.net/sc/pagemb/ommb/200804/16093.shtml"><img src="http://www.syku.net/sc/UploadSoftPic/200804/2008042810354064.gif" _fcksavedurl="http://www.syku.net/sc/UploadSoftPic/200804/2008042810354064.gif" alt="欧美艺术设计模板" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/sc/UploadSoftPic/200804/2008042810354064.gif" link="http://www.syku.net/sc/pagemb/ommb/200804/16093.shtml" /></a> <a href="http://www.syku.net/web/jzzn/sc/200806/16458.shtml" _fcksavedurl="http://www.syku.net/web/jzzn/sc/200806/16458.shtml"><img src="http://www.syku.net/uploads/080605/_09595V34.gif" _fcksavedurl="http://www.syku.net/uploads/080605/_09595V34.gif" alt="精美包装礼盒图片素材专辑" width="108" height="82" border="0" class="thumb_img" rel="http://www.syku.net/uploads/080605/_09595V34.gif" link="http://www.syku.net/web/jzzn/sc/200806/16458.shtml" /></a> </div> <img src="http://www.syku.net/demo/demo14/images/gobottom.gif" _fcksavedurl="http://www.syku.net/demo/demo14/images/gobottom.gif" name="gobottom" width="110" height="14" id="gobottom" /></td> </tr> </table> </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.syku.net/demo/demo14/images/'; var thumbs = document.getElementsByClassName('thumb_img'); $('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>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
全球年龄最高博客人10
谷歌地球出动间谍车偷
谈谈阿里巴巴股票的“
告别单调：404错误页
80后写手兼赛车手韩寒
千千静听(TTPlayer)5.
WINGHO系统备份还原工
相关文章 最新评论共有 2 位网友发表了评论 发表评论
赛酷网·中国西部第一建站门户
本月热门 阅读排行 最新下载
您现在的位置： 
