asp.net怎样实现QQ相册的效果？

民工_ 2010-01-12 03:37:14

asp.net怎样实现QQ相册的效果？就是从数据库里面得到照片的路径，然后在相册的上头显示所有的图片，并且可以左右滚动，在下面查看的时候默认显示一张图，点击某一张的时候在下面显示出来，多谢高手帮忙啊！

...全文

368 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

民工_ 2010-04-27

打赏
举报

谢谢~!

爱拼才会赢 2010-04-09

打赏
举报

配合JS的相关插件使用！

本例我没做过，有时间试试！

lakeq 2010-04-08

打赏
举报

配合Jq插件，方便很多

ycproc 2010-04-08

打赏
举报

我明天有时间给个DEMO你
我已经做出来了
jquery的
QQ：604659359

zhaobinzcb 2010-04-07

打赏
举报

去找插件。。。。。。。。。。。。。

民工_ 2010-04-07

打赏
举报

谢谢~！

kk297173176 2010-04-07

打赏
举报

单一的功能其实很简单，最主要的是实现看着很酷的效果

sdnjwang 2010-01-12

打赏
举报

灵雨飘零 2010-01-12

打赏
举报

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   <title>Imgmove </title>   <style type="text/css">  #show{height:auto;width:700px; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}  #show img{ text-align:center; }  #container{  height:auto; width:613px; text-align:center; display: inline-table}  #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;}  #middle{ height:109px;  width:545px; float:left; overflow:hidden;}  #thumblist{ width:1090px;}  #thumblist div { width:109px; height:109px; text-align:center; float:left}  .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)}  #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}  #thumblist div span img { width:100%; height:100%; display:block}  #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}   </style>   </head>   <body style="background-color:#FFFFFF; text-align:center" >     <div id="container">       <div id='show'> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'> </div>       <div id="left"> </div>       <div id="middle">           <div id="thumblist">  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811863.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811894.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811457.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811769.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811738.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811613.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811566.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811472.p.gif'> </span>  			 </div>  			 <div >  			    <span> <img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812004.p.gif'> </span>  			 </div>																																						  		 </div>       </div>       <div id="right"> </div>   </div>   <!-- <div>   <input value='聚焦第1张图片' type="button" onclick="sss(1)" />   <input value='聚焦第2张图片' type="button" onclick="sss(2)"/>   <input value='聚焦第3张图片' type="button" onclick="sss(3)"/>   <input value='聚焦第4张图片' type="button" onclick="sss(4)"/>   <input value='聚焦第5张图片' type="button" onclick="sss(5)"/>   </div>-->   <script type="text/javascript">      document.all&&document.execCommand("BackgroundImageCache", false, true);     var isIE = (document.all) ? true : false;    var $ = function (id) {   return  document.getElementById(id);  };    var Extend = function(destination, source) {   for (var property in source) {    destination[property] = source[property];   }  }    var Bind = function(object, fun,args) {   return function() {    return fun.apply(object,args||[]);   }  }    var BindAsEventListener = function(object, fun) {   var args = Array.prototype.slice.call(arguments).slice(2);   return function(event) {    return fun.apply(object, [event || window.event].concat(args));   }  }    var CurrentStyle = function(element){   return element.currentStyle || document.defaultView.getComputedStyle(element, null);  }    var Tween = {      Quart: {              easeOut: function(t,b,c,d){                  return -c * ((t=t/d-1)*t*t*t - 1) + b;              }          }  }     function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};   function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};   function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};     var Class = function(properties){         var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};         _class.prototype = properties;         return _class;   };    var  Imgroll =new Class({  	options:{  		Isrun : false,   //判断是否正在滚动  		Step    : 100,  		Time    : 10,  		t       : 0,  		b       : 0,  		c       : 0,  		d       : 60,  		Tween   : Tween.Quart.easeOut,  		Oninit  : function(){},  		Onstart : function(){},  		Onstop  : function(){}  	},  	initialize:function(show,obj,c,total,i,options){  		this._show  = show    //代表大图的那个div  		this._obj   = obj;  		this._c     = c;  		this._total = total;  		this.i      = i ;  		this.o      = '';   //记录图片背景的  		this.timer  = null;  		this.Isrun  = this.options.isrun;  		this.Step   = this.options.Step;  		this.Time   = this.options.Time;  		this.t      = this.options.t;  		this.b      = this.options.b;  		this.c      = this.options.c;  		this.d      = this.options.d;  		this.Tween  = this.options.Tween;	  		this.Oninit = this.options.Oninit;	  		this.Onstart= this.options.Onstart;				  		this.Onstop = this.options.Onstop;  		Extend(this,options||{});  		var self =this, i = 0,img = this._c.getElementsByTagName('div');  		this.o = img[this.i-1];  		this.o.className = "cc";  		for(;i <img.length;i++)  		{   			img[i].num = i;  			(function(i){  			 addListener(img[i],'click',Bind(self,self.Start,[img[i]]));  			 })(i);  		}  	},  	Start:function(c){  		if(this.Isrun)return;  		this.Isrun = true;  		var img = this._c.getElementsByTagName('div')  		this.b     = this._obj.scrollLeft;  		if(c)  		{	  			/*if(c.num <this.i)  			{  				this.c =  -1*(this.b);  			}  			else if(c.num>img.length-1-this._total+this.i)    			{  				this.c =(img.length - this._total)*this.Step - this.b   			}  			else  			{  				this.c = (c.num-this.i+1)*this.Step-this.b;  			}*/  			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)    			  		}    		this.Onstart(c);  		this.Run();  	},  	Run:function(){  		if(this.t <this.d)  		{  			this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))  			this.timer = setTimeout(Bind(this,this.Run),this.Time)  		}  		else  		{  			this.RunTo(this.b+this.c);  			this.Stop();  		}  	},  	RunTo:function(i){  		this._obj.scrollLeft = i;  	},  	Pre:function(){  		this.c = this.Step*(-1);  		this.Start();  	},  	Next:function(){  		this.c = this.Step;  		this.Start();  	},  	Stop:function(){  		clearTimeout(this.timer);  		this.t = 0;this.Isrun=false;  		this.Onstop()  	}  })    var ss = new Imgroll($('show'),$('middle'),$('thumblist'),5,3,{          Step:109,   //着里的109是指中间每个包含div图片的宽度,也可以写成$('thumblist').getElementsByTagName('div')[0].offsetWidth;  		Onstart:function(obj){  			if(!obj)return;  			ss._show.getElementsByTagName('img')[0].src = obj.getElementsByTagName('img')[0].src;  			this.o.className=''  			this.o=obj;  			obj.className ='cc';          },  		Onstop:function(){  		$('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)";  		$('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)";          }});	  	addListener($('right'),'mousedown',function(){ss.Next()});  	addListener($('right'),'mouseover',function(){cbg1(1)});  	addListener($('right'),'mouseout',function(){cbg1(0)});  	addListener($('left'),'mousedown',function(){ss.Pre()});  	addListener($('left'),'mouseover',function(){cbg(1)});  	addListener($('left'),'mouseout',function(){cbg(0)});	  function cbg(n){      if(ss._obj.scrollLeft==0)return;  	$('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)"  }  function cbg1(n){      if(ss._obj.scrollLeft==545)return;  	$('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)"  }    function sss(num){  	ss.i =num;  }   </script>   </body>   </html>

灵雨飘零 2010-01-12