非常不错的子鼠滑动图片效果 Javascript+CSS

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

第二步，布局！

这时可以看一下效果：

[Ctrl+A 全选注:

第三步，设计一下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>

这个时候再看一下效果！

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 test = new ScrollImg('imgBox'); 
</script>

[Ctrl+A 全选注:

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

复制代码代码如下:

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

#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 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> 
<li><a href="http://www.jb51.net"></a></li>
</ul>
</div>

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

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