The first step is to design the effect I want!
I used the FW to the previous photo album effect (http://www.jb51.net/blogview.asp?logID=628) changed, design a simple effect chart!
Step two, Layout!
Copy Code code as follows:
<div id= "Imgbox" >
<ul>
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
<li><a href= "#" ></a></li >
</ul>
</div>
Now you can look at the effect:
<textarea id="runcode87856"><div id= "Imgbox" > <ul> <li></li> <li></li> <li></li> <li>& lt;/li> <li></li> <li></li> <li></li> <li></li> <li></ li> <li></li> <li></li> <li></li> <li></li> <li></li > <li></li> <li></li> <li></li> <li></li> <li></li> & lt;li></li> <li></li> <li></li> <li></li> <li></li> <li ></li> <li></li> <li></li> <li></li> <li></li> <li>& lt;/li> </ul> </div></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The third step, design JavaScript;
Copy Code code as follows:
<script>
scrollimg = function (IMGBOXID) {
This.imgboxid = Imgboxid; Get the ID of the most outer div of the picture;
this.table = This.createtable (); Create a table with one row and three columns
This.setspan (); Put the alt file on the picture behind the picture
This.setonclick (); Click events and put the content in the table
this.$ (THIS.IMGBOXID). appendchild (this.table)/Complete all
}
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>
This time again look at the effect!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>www.zishu.cn</title> </pead> <body> <div id=" Imgbox "> <u l> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <l i></li> <li></li> <li></li> <li></li> <li></li> <li> </li> <li></li> <li></li> <li></li> <li></li> <li></ li> <li></li> <li></li> <li></li> <li></li> <li></li > <li></li><li></li> <li></li> <li></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.getelement Byid (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> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The fourth step, write CSS to complete the plan when the appearance!
Copy Code code as follows:
<style>
/* Reset all the basic attributes, in fact, it is best not to write with *, performance is not very good, as an example even if the * *
*{margin:0; padding:0; list-style:none;}
/* Set the basic properties of a Web page * *
body{Font-family:verdana; font-size:12px; line-height:1.8; margin:50px;}
/* Reset the properties of the picture, the most important is to resolve the browser's space bug*/
img{border:0; Display:block;vertical-align:middle}
/* The outermost div's border and background color are simply set.
#imgBox {border-right:1px solid #3B8C54 border-bottom:1px solid #3B8C54; background: #84B726; padding:5px;}
* * This div is not in the layout, I created with JavaScript, I put his width written dead, overflow of the contents of all hidden * *
#imgBox div{width:700px background: #B5DF63, border:1px solid #DAEFB1 border-top:1px solid #6D9720 border-left:1px Solid #6D9720; Overflow:hidden}
* * Here is the father and son all added floating to float, solve the problem of automatic adaptation, and let the picture horizontal arrangement * *
#imgBox, #imgBox ul, #imgBox li{Float:left;}
/* Here other should let JavaScript to calculate the width, you can realize the picture infinite addition and subtraction, will be adaptive, I stole a lazy here, directly written dead * *
#imgBox ul{width:4100px;}
/* Below these are written a link and effect, nothing * *
#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>
All right, all done, look at the final effect!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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> </pead> <body> <div id= "Imgbox" > <ul> <li></li> <li></li> <li></li> <li></li> <li></ li> <li></li> <li></li> <li></li> <li></li> <li></li > <li></li> <li></li> <li></li> <li></li> <li></li> & lt;li></li> <li></li> <li></li> <li></li> <li></li> <li ></li> <li></li> <li></li> <li></li> <li></li> <li>& lt;/li> <li></li> <li></li> <li></li> <li></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.getelement Byid (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> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
