非常不错的 子鼠 滑动图片效果 Javascript+CSS_图象特效

第一步，设计一下我想要的效果！
我用FW把以前作的相册效果（http://www.jb51.net/blogview.asp?logID=628）改了改，设计一张简单的效果图！

第二步，布局！

复制代码 代码如下:

• 


• 


• 


• 


• 

这时可以看一下效果：

<div id="imgBox"> <ul> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> </ul> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

第三步，设计一下Javascript；

复制代码 代码如下:

<script> <BR>ScrollImg = function(imgBoxId){ <BR>this.imgBoxId = imgBoxId; //拿到图片最外边的DIV的ID； <BR>this.table = this.createTable(); //创建了一个一行三列的表格 <BR>this.setSpan(); //把图片上的ALT文件放在图片的后边 <BR>this.setOnclick(); //加点击事件和把内容放在表格中 <BR>this.$(this.imgBoxId).appendChild(this.table) //完成全部 <BR>} <br><br>ScrollImg.prototype = { <BR>$:function(objId){ <BR>return document.getElementById(objId); <BR>}, <BR>$$:function(n){ <BR>return document.createElement(n); <BR>}, <BR>createTable:function(){ <BR>var table = this.$$('table'); <BR>var tr = this.$$('tr'); <BR>for(var k=0; k<3; k++) tr.appendChild(this.$$('td')); <BR>var tbody = this.$$('tbody'); <BR>tbody.appendChild(tr); <BR>table.appendChild(tbody); <BR>return table; <BR>}, <BR>setSpan:function(){ <BR>var links = this.$(this.imgBoxId).getElementsByTagName('a'); <BR>for(var k=0; k<links.length; k++){ <BR>var span = this.$$('span'); <BR>span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt)); <BR>links[k].appendChild(span); <BR>} <BR>return; <BR>}, <BR>setOnclick:function (){ <BR>var imgArray = ['left', ,'right']; <BR>var tds = this.table.getElementsByTagName('td'); <BR>for(var k=0; k<tds.length; k++){ <BR>tds[k].setAttribute('vAlign', 'center'); <BR>if(k == 1){ <BR>var div = this.$$('div'); <BR>var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0]; <BR>div.appendChild(ul); <BR>tds[k].appendChild(div); <BR>continue <BR>} <br><br>var img = this.$$('img'); <BR>img.setAttribute('src', 'http://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif'); <BR>img.setAttribute('alt', imgArray[k]); <BR>img.style.cursor = 'pointer'; <BR>img.onclick = function (){ <BR>var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0]; <BR>var ns = imgBox.scrollLeft; <BR>var tkey = 500; <BR>if(this.alt == 'left'){ <BR>var left = setInterval(function(){ <BR>imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1); <BR>tkey = tkey * 0.9; <BR>if(tkey < 2) clearInterval(left); <BR>},50); <BR>} else { <BR>var right = setInterval(function (){ <BR>imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1); <BR>tkey = tkey * 0.9; <BR>if(tkey < 2) clearInterval(right); <BR>},50); <BR>} <BR>return; <BR>} <BR>tds[k].appendChild(img); <BR>} <BR>return; <BR>} <BR>} <br><br>var test = new ScrollImg('imgBox'); <BR></script>

这个时候再看一下效果！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>www.zishu.cn</title> <div id="imgBox"> <ul> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> </ul> </div> <script> ScrollImg = function(imgBoxId){ this.imgBoxId = imgBoxId; this.table = this.createTable(); this.imgBoxP = this.$(this.imgBoxId).parentNode; this.setSpan(); this.setOnclick(); this.$(this.imgBoxId).appendChild(this.table) } ScrollImg.prototype = { $:function(objId){ return document.getElementById(objId); }, $$:function(n){ return document.createElement(n); }, createTable:function(){ var table = this.$$('table'); var tr = this.$$('tr'); for(var k=0; k<3; k++) tr.appendChild(this.$$('td')); var tbody = this.$$('tbody'); tbody.appendChild(tr); table.appendChild(tbody); return table; }, setSpan:function(){ var links = this.$(this.imgBoxId).getElementsByTagName('a'); for(var k=0; k<links.length; k++){ var span = this.$$('span'); span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt)); links[k].appendChild(span); } return; }, setOnclick:function (){ var imgArray = ['left', ,'right']; var tds = this.table.getElementsByTagName('td'); for(var k=0; k<tds.length; k++){ tds[k].setAttribute('vAlign', 'center'); if(k == 1){ var div = this.$$('div'); var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0]; div.appendChild(ul); tds[k].appendChild(div); continue } var img = this.$$('img'); img.setAttribute('src', 'http://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif'); img.setAttribute('alt', imgArray[k]); img.style.cursor = 'pointer'; img.onclick = function (){ var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0]; var ns = imgBox.scrollLeft; var tkey = 500; if(this.alt == 'left'){ var left = setInterval(function(){ imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1); tkey = tkey * 0.9; if(tkey < 2) clearInterval(left); },50); } else { var right = setInterval(function (){ imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1); tkey = tkey * 0.9; if(tkey < 2) clearInterval(right); },50); } return; } tds[k].appendChild(img); } return; } } var test = new ScrollImg('imgBox'); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

第四步，写CSS来完成计划时的样子！

复制代码 代码如下:

好了，全部完成，看一下最后的效果吧！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>www.zishu.cn</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;} img{ border:0; display:block;vertical-align:middle} #imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;} #imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden} #imgBox,#imgBox ul,#imgBox li{ float:left;} #imgBox ul{ width:4100px;} #imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none} #imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF} #imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;} #imgBox a:hover span{ background:#000; color:#fff} </style> <div id="imgBox"> <ul> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 001" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 002" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 003" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 004" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 005" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 006" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 007" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 008" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 009" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 010" src="http://files.jb51.net/upload/20090404034546145.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 011" src="http://files.jb51.net/upload/20090404034546693.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 012" src="http://files.jb51.net/upload/20090404034546360.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 013" src="http://files.jb51.net/upload/20090404034546382.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 014" src="http://files.jb51.net/upload/20090404034546959.gif"></a></li> <li><a href="http://www.jb51.net"><img alt="this is 015" src="http://files.jb51.net/upload/20090404034546983.gif"></a></li> </ul> </div> <script> ScrollImg = function(imgBoxId){ this.imgBoxId = imgBoxId; this.table = this.createTable(); this.imgBoxP = this.$(this.imgBoxId).parentNode; this.setSpan(); this.setOnclick(); this.$(this.imgBoxId).appendChild(this.table) } ScrollImg.prototype = { $:function(objId){ return document.getElementById(objId); }, $$:function(n){ return document.createElement(n); }, createTable:function(){ var table = this.$$('table'); var tr = this.$$('tr'); for(var k=0; k<3; k++) tr.appendChild(this.$$('td')); var tbody = this.$$('tbody'); tbody.appendChild(tr); table.appendChild(tbody); return table; }, setSpan:function(){ var links = this.$(this.imgBoxId).getElementsByTagName('a'); for(var k=0; k<links.length; k++){ var span = this.$$('span'); span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt)); links[k].appendChild(span); } return; }, setOnclick:function (){ var imgArray = ['left', ,'right']; var tds = this.table.getElementsByTagName('td'); for(var k=0; k<tds.length; k++){ tds[k].setAttribute('vAlign', 'center'); if(k == 1){ var div = this.$$('div'); var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0]; div.appendChild(ul); tds[k].appendChild(div); continue } var img = this.$$('img'); img.setAttribute('src', 'http://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif'); img.setAttribute('alt', imgArray[k]); img.style.cursor = 'pointer'; img.onclick = function (){ var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0]; var ns = imgBox.scrollLeft; var tkey = 500; if(this.alt == 'left'){ var left = setInterval(function(){ imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1); tkey = tkey * 0.9; if(tkey < 2) clearInterval(left); },50); } else { var right = setInterval(function (){ imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1); tkey = tkey * 0.9; if(tkey < 2) clearInterval(right); },50); } return; } tds[k].appendChild(img); } return; } } var test = new ScrollImg('imgBox'); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]