用JS模仿qq图片浏览资源-CSDN文库

共13个文件

gif：4个

jpg：3个

png：2个

4星 · 超过85%的资源需积分: 14 181 浏览量 2010-12-08 17:24:13 上传评论收藏 85KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

imitate-163-qq-picture-view-effect.rar （13个子文件）

left.gif 354B

5.jpg 33KB

pre.ani 2KB

right.gif 354B

next.ani 2KB

err.gif 2KB

libimg.js 9KB

pre.png 3KB

next.png 3KB

loading.gif 701B

1.jpg 33KB

5_s.jpg 33KB

index.html 3KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>模仿163图片浏览效果，模仿qq图片浏览效果</title> <meta name="Keywords" content="javascript特效,图片浏览,模仿163,模仿qq"/> <meta name="Description" content="模仿qq/163的图片效果，可以指定显示的图片间距，每次显示的图片数量，当切换图片时，根据指定显示的图片张数，自动将当前图片定位到居中的位置。" /> <style type="text/css"> body{background:#fff;} </style> </head> <body><h3>模仿qq/163的图片效果，可以指定显示的图片间距，每次显示的图片数量，当切换图片时，根据指定显示的图片张数，自动将当前图片定位到居中的位置。 <br />在调用init()函数时会根据大图显示的图片自动滚动小图，让对应的小图自动居中。 <br />显示图片的位置或者图片说明什么的，自己防止对象，使用图片类库时传递他们的id进入类库构造函数中即可。</h3><script type="text/javascript" src="libimg.js"></script> <script type="text/javascript"> var lib1=new ShowboImgLib('ShowboPhoto','ShowboImgs' ,{margin:2,opacity:0.4,dpNum:6,totalID:'ShowboPhotoTotal'} ,{pre:'ShowboLeft',next:'ShowboRight',copy:'ShowboCopy'} ,{bigImgId:'img',nowUrl:'ShowboPhotoUrl',dps:[{id:'dvTL',attr:'tl'},{id:'ShowboPhotoNow',attr:'pos',isPos:true}]} ,{pre:'left.gif',next:'right.gif' ,cpre:'pre.ani',cnext:'next.ani' ,cffpre:'pre.png',cffnext:'next.png' ,wait:'loading.gif'} ,{head:'已经移动到头！',end:'已经移动到尾！',first:'已经是第一张！',last:'已经是最后一张！',pre:'点击查看上一张',next:'点击查看下一张',copy:['复制图片地址成功！','浏览器不支持JavaScript复制地址，请打开原图手动复制浏览器地址栏图片地址！']}) </script> <div id="dvTL">alt</div> <img src="5.jpg" id="img" width="300" style="position:relative;" /> <div id="ShowboPhoto"> <div class="left" onclick="lib.move(true)" id="ShowboLeft"></div> <div id="ShowboImgs"><div><img src="1.jpg" tl="第1张图片" class="focus" /><img src="err.gif" tl="第2张图片" /><img src="1.jpg" tl="第3张图片"/><img src="err.gif" tl="第4张图片"/><img src="5_s.jpg" tl="第5张图片"/><img src="err.gif" tl="第6张图片"/><img src="1.jpg" tl="第7张图片"/><img src="err.gif" tl="第8张图片"/><img src="1.jpg" tl="第9张图片"/><img src="err.gif" tl="第10张图片"/><img src="1.jpg" tl="第11张图片"/><img src="err.gif" tl="第12张图片"/></div></div> <div class="right" id="ShowboRight"></div> <div class="summery">第<b id="ShowboPhotoNow">1</b>张共<b id="ShowboPhotoTotal">8</b>张 <a href="#" id="ShowboPhotoUrl" target="_blank">原图</a> <a href="#" id="ShowboCopy">复制地址</a></div></div> </body> </html><script type="text/javascript">lib1.init();</script>

评论收藏

内容反馈