那位能给一个完整源码。
代码完整着分数全归你!!
Thanks!!!
<!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>
qq相册的基本功能都能实现,如点击小图可以显示相应的大图,以及左右图片的查看
可应用于各种web开发平台,其内容是运行在html文件中,只要在asp.net前台传个图片初始地址就行了,把列表图片改成一个或多个都可以
左右滚动的图片展示效果
相册控件,类似于QQ空间的相册,功能强大 C#,ASP.NET
我的ASP.NET 第一讲 ASP.NET 入门 ASP.NET 是动态 网络 语言。那么运行 在服务器中,在这里我们始终离不开浏览器的角色,因此在学习网页开发先了解浏览器: 浏览器的介绍 一.五大浏览器:* 1.浏览器有哪些? ...
TIPS:1.Image转成Base64保存到mongodb字段 2.数据模型是嵌套的关联 首先定义Model层: public class Photo : IEquatable { [Required] public string PhotoName { get; set; } [Required]
最近遇到要读取QQ相册的问题,所以自己诼磨了下,把读取相册的思路和代码写下来。 很多网站到图片链接都做了盗链处理。意思是如果你想在不是他的网站上引用图片就不会正确显示图片,而是一张其它的版权说明之类的...
获取项目源文件,学习交流联系Q:1415736481,可指导毕设,课设 摘要 互联网是社会发展的必然趋势,很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间,新的领域...
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit...图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
版权声明:本文为博主原创文章,未经博主允许... HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Came...
一、ASP类计算机专业毕业设计题目 1.网络留言薄2.客户管理系统3.多媒体积件管理库的开发与应用4.基于WEB的多媒体素材管理库的开发与应用5.网络教学软件中的教学设计与应用6.小型教育网站的开发与建设7.基于图像的...
承接之前的流程,在完成服务器绑定和获取access_token之后,本文主要讲述如何实现微信自定义菜单。开始之前 1、自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。 2、一级菜单最多4个汉字,二级...
本节我们将完成管理员的登录和注销,这里要学习一个重要的知识点“会话(Session)”。...客户端每次访问服务器,服务器都会给它分配一个唯一的Session ID,来标示这个连接。如果客户端没有关闭连接,继续访问服务器的...
Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰效果 Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、...
在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传。 《一》常用属性值: 1、accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 比如: <input type="file" name="pic" ...
@model int @{ ViewBag.Title = "PicUpload"; Layout = "~/Views/Shared/_Layout.cshtml"; } 图片上传: 或将
net001在线饰品销售系统 net002鲜花商城 net003商品销售管理系统 net004在线辅导答疑 net005土地税务管理系统 net006旅游管理 net007房产中介 net008房产信息网 net009小区车辆管理系统(CS) ...
最近在模仿QQ的相册,发现QQ相册中的大小图片都是动态的,通过抓包工具发现Http返回的状态码是304. 大家应该都知道当浏览器缓存了文件就直接从缓存中读取,状态码就是304.所以QQ相册的这种动态缓存技术让我研究了一...
(7)活动相册信息管理:添加,修改和删除学校活动相册。 系统亮点: 1 程序使用三层架构思想,App_Code/DB是数据层,App_Code/Logic是业务逻辑层,App_Code/Model映射数据库表 2 前台设计使用div+css技术,非传统...
现在网络中有很多网站提供图片相册功能,...大家在引用搜狐相册图片、163相册图片、QQ空间图片.....时,如果涉及到防盗链的图片,就会看到一张公用图片提示大家“此图片来自某某相册”,却不显示图片内容。这就是防...
沐雪微信平台源码,采用微软的开发语言asp.net(c#) webform开发,采用最基础的三层架构。使用了.netframework 4.0数据库sql server 2005,全部都是源码,代码有注释 ,操作说明,代码通俗易懂。平台上集成了...
第2章 采用ASP.net Ajax1.0实现Hello Word程序。 第3章 实现Ajax GridView模块。 第4章 实现了聊天室模块(利用ASP.net Ajax)。 第5章 ASP.net Ajax Control Toolkit控件应用。包括:利用AutoCompleteExtender控件...
破解(百度,网易,新浪,搜狐,QQ空间)图片防盗链 大家在连网易等站的图片的时候会发现,连接不了它的图片,因为对方有防盗链系统,现在发布一段JSP代码,用于破解防盗链,近期也会把ASP,PHP版的写出来 原理很简单,用流的...
最近有一个需求,用公众号调用本地相册,并将图片上传到本地服务器(不是微信服务器)。 步骤一:引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js...
有关于 Authentication 的知识太广,所以本篇介绍几个在 ASP.NET Core 认证中会使用到的中间件,还有Authentication的一些零碎知识点,这些知识点对于 ASP.NET 认证体系的理解至关重要。 在 Github 中 ASP.NET Cor.....
用ASP.NET读取QQ相册 最近遇到要读取QQ相册的问题,所以自己诼磨了下,把读取相册的思路和代码写下来。 很多网站到图片链接都做了盗链处理。意思是如果你想在不是他的网站上引用图片就不会正确显示图片,而是...
九九Cms系统是采用Asp.Net 2.0 + Access 进行开发的建站系统源码,适用于企业站/相册站/外贸站/简易商城站建设,含大部份常见功能:文章、新闻、产品、图片、下载、招聘和留言等。 模板用自定义标签调数据,支持国际...
此博客是转载百度空间 现在网络中有很多网站提供图片相册...大家在引用搜狐相册图片、163相册图片、QQ空间图片.....时,如果涉及到防盗链的图片,就会看到一张公用图片提示大家“此图片来自某某相册”,却不显示图片
Banner用起来超方便,实现的效果也很出乎意料、广告图片轮播、自定义样式轮播
2020美赛a题海温数据,1877年至今,趁比赛还没结束上传赚点资源值 全球海洋温度影响某些海洋生物的栖息地质量。当温度变化太大,它们无法继续繁荣时,这些物种就会迁移到其他更适合它们现在和未来生活和繁殖成功的栖息地。其中一个例子就是美国缅因州的龙虾种群,它们正缓慢地向北迁移到加拿大,那里的海洋温度较低,为它们提供了更合适的栖息地。这种地理种群的转移可能会严重影响依赖海洋生物稳定性的公司的生计。 您的团队已被苏格兰北大西洋渔业管理协会聘请为顾问。该协会希望在全球海洋温度升高的情况下,更好地了解与苏格兰鲱鱼和鲭鱼从它们目前的栖息地苏格兰附近迁移有关的问题。这两种鱼类为苏格兰渔业做出了巨大的经济贡献。鲱鱼和鲭鱼种群分布位置的变化,可能会让规模较小的苏格兰渔业公司在经济上变得不切实际。这些公司使用渔船,但船上没有冷藏设备。