登 录
模仿的google的一个效果 http://www.google.cn/help/ig/art/
基本完成 ................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>Imgmove</title><br /> <style type="text/css"><br /> a{ background-color:#EFEBEF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none;<br /> border-left:1px solid #EFEBEF; border-right:1px solid #EFEBEF}<br /> a.cc{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000; border-left:1px solid #CECBCE; border-right:1px solid #CECBCE}<br /> a:hover{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000}<br /> #container{<br /> width:976px;<br /> }<br /> #container span{ display: block; margin-top:20px; margin-bottom:10px;}<br /> #left{<br /> width:29px;<br /> height:137px;<br /> float:left;<br /> background-image:url("http://album.hi.csdn.net/app_uploads/wtcsy/20090618/232729109.p.jpg");<br /> background-position: -0px 0px;<br /> }<br /> #middle{<br /> border-bottom:1px solid #CECBCE;<br /> border-top:1px solid #CECBCE;<br /> width:918px;<br /> height:135px;<br /> float:left;<br /> background-color: #EFEBEF;<br /> overflow:hidden;<br /> }<br /> #right{<br /> width:29px;<br /> height:137px;<br /> float:left;<br /> background-image:url("http://album.hi.csdn.net/app_uploads/wtcsy/20090618/232744390.p.jpg");<br /> background-position: -29px 0px;<br /> }<br /> #thumblist{}<br /> #middle img {<br /> border:1px solid #999999;<br /> }<br /> </style><br /> </head><br /> <body style=" padding:10px; padding-top:150px; margin:0px; font-size:12px;"><br /> <div id='nn' style=" text-align:center; font-size:16px; color:#0000FF">聚焦第5个</div><br /> <div id="container"><br /> <div id="left"></div><br /> <div id="middle"><br /> <div id="thumblist"><br /> <a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/langl/thumb_sm.jpg"></span>郎朗</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tianlm/thumb_sm.jpg"></span>田黎明</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz1/thumb_sm.jpg"></span>蔡志忠（一）</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz2/thumb_sm.jpg"></span>蔡志忠（二）</a></a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/jimmy/thumb_sm.jpg"></span>幾米</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yanbo/thumb_sm.jpg"></span>闫博</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yangch/thumb_sm.jpg"></span>杨长槐</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/zhangdl/thumb_sm.jpg"></span>张大力</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/liujl/thumb_sm.jpg"></span>刘静兰</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/hayq/thumb_sm.jpg"></span>哈亦琦</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tailp/thumb_sm.jpg"></span>邰立平</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/mengsf/thumb_sm.jpg"></span>孟树锋</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/xihd/thumb_sm.jpg"></span>西合道</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yesy/thumb_sm.jpg"></span>叶水云</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/xuzc/thumb_sm.jpg"></span>徐竹初</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tanping/thumb_sm.jpg"></span>谭平</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/pangk/thumb_sm.jpg"></span>潘公凯</a><br /> </div><br /> </div><br /> <div id="right"></div><br /> </div><br /> <div style="clear:both; padding-top:20px;"><br /> <input value='聚焦第1个' type="button" onclick="sss(1)" /><br /> <input value='聚焦第2个' type="button" onclick="sss(2)" /><br /> <input value='聚焦第3个' type="button" onclick="sss(3)" /><br /> <input value='聚焦第4个' type="button" onclick="sss(4)" /><br /> <input value='聚焦第5个' type="button" onclick="sss(5)" /><br /> <input value='聚焦第6个' type="button" onclick="sss(6)" /><br /> <input value='聚焦第7个' type="button" onclick="sss(7)" /><br /> <input value='聚焦第8个' type="button" onclick="sss(8)" /><br /> <input value='聚焦第9个' type="button" onclick="sss(9)" /><br /> </div><br /> <script><br /> document.all&&document.execCommand("BackgroundImageCache", false, true); </p> <p>var isIE = (document.all) ? true : false;</p> <p>var $ = function (id) {<br /> return document.getElementById(id);<br /> };</p> <p>var Extend = function(destination, source) {<br /> for (var property in source) {<br /> destination[property] = source[property];<br /> }<br /> }</p> <p>var Bind = function(object, fun,args) {<br /> return function() {<br /> return fun.apply(object,args||[]);<br /> }<br /> }</p> <p>var BindAsEventListener = function(object, fun) {<br /> var args = Array.prototype.slice.call(arguments).slice(2);<br /> return function(event) {<br /> return fun.apply(object, [event || window.event].concat(args));<br /> }<br /> }</p> <p>var CurrentStyle = function(element){<br /> return element.currentStyle || document.defaultView.getComputedStyle(element, null);<br /> }</p> <p>var Tween = {<br /> Quart: {<br /> easeOut: function(t,b,c,d){<br /> return -c * ((t=t/d-1)*t*t*t - 1) + b;<br /> }<br /> }<br /> }</p> <p> function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};<br /> function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};<br /> function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};</p> <p> var Class = function(properties){<br /> var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};<br /> _class.prototype = properties;<br /> return _class;<br /> };</p> <p>var Imgroll =new Class({<br /> options:{<br /> Isrun : false,<br /> Step : 100,<br /> Time : 10,<br /> t : 0,<br /> b : 0,<br /> c : 0,<br /> d : 60,<br /> Tween : Tween.Quart.easeOut,<br /> Oninit : function(){},<br /> Onstart : function(){},<br /> Onstop : function(){}<br /> },<br /> initialize:function(obj,c,total,i,options){<br /> this._obj = obj;<br /> this._c = c;<br /> this._total = total; //显示区域有多少张图片<br /> this.i = i ; //聚焦于第i张图片<br /> this.timer = null;<br /> this.Isrun = this.options.isrun;<br /> this.Step = this.options.Step;<br /> this.Time = this.options.Time;<br /> this.t = this.options.t;<br /> this.b = this.options.b;<br /> this.c = this.options.c;<br /> this.d = this.options.d;<br /> this.Tween = this.options.Tween;<br /> this.Oninit = this.options.Oninit;<br /> this.Onstart= this.options.Onstart;<br /> this.Onstop = this.options.Onstop;<br /> Extend(this,options||{});<br /> var self =this, i = 0,img = this._c.getElementsByTagName('a');<br /> this._c.style.width = img.length*this.Step+'px';<br /> for(;i<img.length;i++)<br /> {<br /> img[i].num = i;<br /> (function(i){<br /> addListener(img[i],'click',Bind(self,self.Start,[img[i]]));<br /> })(i);<br /> }<br /> },<br /> Start:function(c){<br /> if(this.Isrun)return;<br /> this.Isrun = true;<br /> var img = this._c.getElementsByTagName('a')<br /> this.b = this._obj.scrollLeft;<br /> c&&(this.c = c.num<this.i?(-1)*this.b:(c.num>img.length-(this._total-this.i+1)-1?(img.length - this._total)*this.Step - this.b:(c.num-this.i+1)*this.Step-this.b));<br /> this.Onstart(c);<br /> if(this.c==0){this.Isrun=false;return;}<br /> this.Run();<br /> },<br /> Run:function(){<br /> if(this.t<this.d)<br /> {<br /> this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))<br /> this.timer = setTimeout(Bind(this,this.Run),this.Time)<br /> }<br /> else<br /> {<br /> this.RunTo(this.b+this.c);<br /> this.Stop();<br /> }<br /> },<br /> RunTo:function(i){<br /> this._obj.scrollLeft = i;<br /> },<br /> Pre:function(){<br /> this.c = this.Step*(-1);<br /> this.Start();<br /> },<br /> Next:function(){<br /> this.c = this.Step;<br /> this.Start();<br /> },<br /> Stop:function(){<br /> clearTimeout(this.timer);<br /> this.t = 0;this.Isrun=false;<br /> this.Onstop()<br /> }<br /> })</p> <p> var ss = new Imgroll($('middle'),$('thumblist'),9,5,{<br /> Step:102,<br /> Onstart:function(obj){<br /> if(!obj)return;<br /> this.o&&(this.o.className='');<br /> this.o=obj;<br /> obj.className ='cc';<br /> },<br /> Onstop:function(){<br /> $('left').style.backgroundPosition=this._obj.scrollLeft == 0?"0px 0px":"-29px 0px";<br /> $('right').style.backgroundPosition=this._obj.scrollLeft== 816?"0px 0px":"-29px 0px";<br /> }});<br /> addListener($('right'),'click',function(){ss.Next()});<br /> addListener($('left'),'click',function(){ss.Pre()});<br /> function sss(num){<br /> ss.i=num;<br /> $('nn').innerHTML = "聚焦第"+num+"个"<br /> }<br /> </script><br /> </body><br /> </html>
这是仿baidu相册写的一个,还是用的上面的那个类,一些细节还没处理好.
算了, 类写好了就够了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>Imgmove</title><br /> <style type="text/css"><br /> #show{height:auto;width:500px;%; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}<br /> #show img{ text-align:center; }<br /> #container{ height:auto; width:613px; text-align:center; display: inline-table}<br /> #left{ height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif); margin-top:5px; margin-right:10px;}<br /> #middle{ height:109px; width:545px; float:left; overflow:hidden;}<br /> #thumblist{ width:1090px;}<br /> #thumblist div { width:109px; height:109px; text-align:center; float:left}<br /> .cc{width:109px; height:109px; text-align:center; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011452785.p.gif)}<br /> #thumblist div span { width:95px; height:95px; margin:6px !important;margin:3px; margin-top:6px; border:1px solid #FFFFFF; background-color:#000000; vertical-align:middle; line-height:95px; display:block}<br /> #thumblist div span img { width:100%; height:100%; display:block}<br /> #right{height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif);margin-top:5px; margin-left:10px}<br /> </style><br /> </head><br /> <body style="background-color:#000000; text-align:center" ></p> <p><div id="container"><br /> <div id='show'><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></div><br /> <div id="left"></div><br /> <div id="middle"><br /> <div id="thumblist"><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811863.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811894.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811457.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811769.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811738.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811613.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811566.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811472.p.gif'></span><br /> </div><br /> <div ><br /> <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812004.p.gif'></span><br /> </div><br /> </div><br /> </div><br /> <div id="right"></div><br /> </div><br /> <div><br /> <input value='聚焦第1张图片' type="button" onclick="sss(1)" /><br /> <input value='聚焦第2张图片' type="button" onclick="sss(2)"/><br /> <input value='聚焦第3张图片' type="button" onclick="sss(3)"/><br /> <input value='聚焦第4张图片' type="button" onclick="sss(4)"/><br /> <input value='聚焦第5张图片' type="button" onclick="sss(5)"/><br /> </div><br /> <script></p> <p>document.all&&document.execCommand("BackgroundImageCache", false, true); </p> <p>var isIE = (document.all) ? true : false;</p> <p>var $ = function (id) {<br /> return document.getElementById(id);<br /> };</p> <p>var Extend = function(destination, source) {<br /> for (var property in source) {<br /> destination[property] = source[property];<br /> }<br /> }</p> <p>var Bind = function(object, fun,args) {<br /> return function() {<br /> return fun.apply(object,args||[]);<br /> }<br /> }</p> <p>var BindAsEventListener = function(object, fun) {<br /> var args = Array.prototype.slice.call(arguments).slice(2);<br /> return function(event) {<br /> return fun.apply(object, [event || window.event].concat(args));<br /> }<br /> }</p> <p>var CurrentStyle = function(element){<br /> return element.currentStyle || document.defaultView.getComputedStyle(element, null);<br /> }</p> <p>var Tween = {<br /> Quart: {<br /> easeOut: function(t,b,c,d){<br /> return -c * ((t=t/d-1)*t*t*t - 1) + b;<br /> }<br /> }<br /> }</p> <p> function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};<br /> function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};<br /> function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};</p> <p> var Class = function(properties){<br /> var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};<br /> _class.prototype = properties;<br /> return _class;<br /> };</p> <p>var Imgroll =new Class({<br /> options:{<br /> Isrun : false, //判断是否正在滚动<br /> Step : 100,<br /> Time : 10,<br /> t : 0,<br /> b : 0,<br /> c : 0,<br /> d : 60,<br /> Tween : Tween.Quart.easeOut,<br /> Oninit : function(){},<br /> Onstart : function(){},<br /> Onstop : function(){}<br /> },<br /> initialize:function(show,obj,c,total,i,options){<br /> this._show = show //代表大图的那个div<br /> this._obj = obj;<br /> this._c = c;<br /> this._total = total;<br /> this.i = i ;<br /> this.o = ''; //记录图片背景的<br /> this.timer = null;<br /> this.Isrun = this.options.isrun;<br /> this.Step = this.options.Step;<br /> this.Time = this.options.Time;<br /> this.t = this.options.t;<br /> this.b = this.options.b;<br /> this.c = this.options.c;<br /> this.d = this.options.d;<br /> this.Tween = this.options.Tween;<br /> this.Oninit = this.options.Oninit;<br /> this.Onstart= this.options.Onstart;<br /> this.Onstop = this.options.Onstop;<br /> Extend(this,options||{});<br /> var self =this, i = 0,img = this._c.getElementsByTagName('div');<br /> this.o = img[this.i-1];<br /> this.o.className = "cc";<br /> for(;i<img.length;i++)<br /> {<br /> img[i].num = i;<br /> (function(i){<br /> addListener(img[i],'click',Bind(self,self.Start,[img[i]]));<br /> })(i);<br /> }<br /> },<br /> Start:function(c){<br /> if(this.Isrun)return;<br /> this.Isrun = true;<br /> var img = this._c.getElementsByTagName('div')<br /> this.b = this._obj.scrollLeft;<br /> if(c)<br /> {<br /> /*if(c.num<this.i)<br /> {<br /> this.c = -1*(this.b);<br /> }<br /> else if(c.num>img.length-1-this._total+this.i)<br /> {<br /> this.c =(img.length - this._total)*this.Step - this.b<br /> }<br /> else<br /> {<br /> this.c = (c.num-this.i+1)*this.Step-this.b;<br /> }*/<br /> this.c = c.num<this.i?(-1)*this.b:(c.num>img.length-1-this._total+this.i?(img.length - this._total)*this.Step - this.b:(c.num-this.i+1)*this.Step-this.b) </p> <p> }</p> <p> this.Onstart(c);<br /> this.Run();<br /> },<br /> Run:function(){<br /> if(this.t<this.d)<br /> {<br /> this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))<br /> this.timer = setTimeout(Bind(this,this.Run),this.Time)<br /> }<br /> else<br /> {<br /> this.RunTo(this.b+this.c);<br /> this.Stop();<br /> }<br /> },<br /> RunTo:function(i){<br /> this._obj.scrollLeft = i;<br /> },<br /> Pre:function(){<br /> this.c = this.Step*(-1);<br /> this.Start();<br /> },<br /> Next:function(){<br /> this.c = this.Step;<br /> this.Start();<br /> },<br /> Stop:function(){<br /> clearTimeout(this.timer);<br /> this.t = 0;this.Isrun=false;<br /> this.Onstop()<br /> }<br /> })</p> <p>var ss = new Imgroll($('show'),$('middle'),$('thumblist'),5,3,{<br /> Step:109, //着里的109是指中间每个包含div图片的宽度,也可以写成$('thumblist').getElementsByTagName('div')[0].offsetWidth;<br /> Onstart:function(obj){<br /> if(!obj)return;<br /> ss._show.getElementsByTagName('img')[0].src = obj.getElementsByTagName('img')[0].src;<br /> this.o.className=''<br /> this.o=obj;<br /> obj.className ='cc';<br /> },<br /> Onstop:function(){<br /> $('left').style.backgroundImage=this._obj.scrollLeft == 0?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)";<br /> $('right').style.backgroundImage=this._obj.scrollLeft == 545?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453832.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)";<br /> }});<br /> addListener($('right'),'mousedown',function(){ss.Next()});<br /> addListener($('right'),'mouseover',function(){cbg1(1)});<br /> addListener($('right'),'mouseout',function(){cbg1(0)});<br /> addListener($('left'),'mousedown',function(){ss.Pre()});<br /> addListener($('left'),'mouseover',function(){cbg(1)});<br /> addListener($('left'),'mouseout',function(){cbg(0)});<br /> function cbg(n){<br /> if(ss._obj.scrollLeft==0)return;<br /> $('left').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453941.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)"<br /> }<br /> function cbg1(n){<br /> if(ss._obj.scrollLeft==545)return;<br /> $('right').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453957.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)"<br /> }</p> <p>function sss(num){<br /> ss.i =num;<br /> }<br /> </script><br /> </body><br /> </html>
抱歉!评论已关闭.