Very good mouse sliding picture effect Javascript CSS_image special effects

The first step is to design the effect I want!
I used FW to change the photo album effect I made before (http://www.jb51.net/blogview.asp?logID=628) and designed a simple rendering!

The second step is layout!

Copy code The code is as follows:

• 


• 


• 


• < ;img alt="this is 001" src="http://files.jb51.net/upload/20090404034546145.gif" />


• < a href="#">

You can take a look at the effect at this time:

<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 Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Step 3 , design Javascript;

Copy code The code is as follows:

<script> <br>ScrollImg = function(imgBoxId){ <br>this.imgBoxId = imgBoxId; //Get the ID of the outermost DIV of the image; <br>this.table = this. createTable(); //Created a table with one row and three columns<br>this.setSpan(); //Place the ALT file on the image behind the image<br>this.setOnclick(); //Add a click event and put the content in the table <br>this.$(this.imgBoxId).appendChild(this.table) //complete all<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 &lt ; 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>

Let’s take a look at the effect at this time!

<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>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The fourth step, write CSS What it will look like when you complete the plan!

Copy code

The code is as follows:<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>

Okay, it’s all done, let’s take a look at the final effect!

<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>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行

]<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>