<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,滚动条,图片展示,滚动效果,JS图片特效,JS广告代码，JS常用代码" />
<meta name="description" content="jQuery实现的滚动条展示图片效果，更多滚动条,图片展示,滚动效果代码请访问脚本分享网JS代码频道。" />
<title>jQuery实现的滚动条展示图片效果_脚本分享网</title>
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
h1 {
margin: 20px;
}
a{ color:#FFCC00;}
p {
margin: 20px;
}
div.magnifyme {
height: 80px;
padding: 30px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 20px;
height: 160px;
border: 2px solid #999;
overflow: hidden;
width: 600px;
position: relative;
}
div.slider {
position: absolute;
bottom: 5px;
left: 30px;
width: 542px;
height: 19px;
background: url(images/productb.png) no-repeat;
}
div.ui-slider-handle {
position: absolute;
cursor: pointer;
cursor: hand;
top: 0px;
left: 0px;
height: 100%;
width: 181px;
background: url(images/handle.png) no-repeat;
}
div.magnifyme img {
width: 64px;
height: 64px;
float: left;
margin: 5px;
position: relative;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="images/jquery-1.js"></script>
<script type="text/javascript" src="images/ui.js"></script>
<script type="text/javascript" src="images/ui1.js"></script>
<script type="text/javascript" src="images/effects.js"></script>
<script type="text/javascript" src="images/ui2.js"></script>
<script type="text/javascript" src="images/sylveste.js"></script>
<script type="text/javascript" src="images/pb.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
});
</script>
</head>
<body>
<h1>Coverflow effect featuring CSS transformations and jQuery UI</h1>
<p>
This proof-of-concept shows a coverflow effect using the new CSS transformation feature from Webkit (featured in Safari 3.1). Needless
to say that it won't run in other browsers at this point (however, adapting it to canvas should be quite easy, and even now, it won't break in other browsers).
</p>
<p>
Unlike other demos, this one can truly animate between two half states, making a slider implementation like the iTunes slider really easy (will come
to this demo soon!). Have fun and try using the keyboard for hotness ;)
</p>
<div class="wrapper">
<div class="magnifyme">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
<img src="images/5.png" />
<img src="images/6.png" />
<img src="images/7.png" />
<img src="images/8.png" />
<img src="images/9.png" />
<img src="images/11.png" />
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
<img src="images/5.png" />
<img src="images/6.png" />
<img src="images/7.png" />
<img src="images/8.png" />
<img src="images/9.png" />
<img src="images/11.png" />
</div>
<div class="slider">
<div class="ui-slider-handle"></div>
</div>
</div>
<div style="text-align:center; clear:both; margin:5px auto">
<p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> 更多相关效果，请到脚本之家 <a href="http://www.jb51.net/jiaoben/guanggao1.html" target="_blank">脚本下载</a>栏目</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p><a href="http://sc.jb51.net" target="_blank">脚本之家素材中心</a>整理。</p>
<p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p>
</div>
</body>
</html>
基于jQuery的滚动条展示图片效果代码.zip （20个子文件） 
132677923290333254 likecs.com_132677923300462969 images 
11.png 33KB
jquery-1.js 98KB 5.png 27KB 9.png 27KB effects.js 20KB ui1.js 15KB 1.png 10KB productb.png 4KB handle.png 1KB sylveste.js 14KB 6.png 25KB 2.png 18KB 7.png 25KB 4.png 17KB pb.js 4KB ui2.js 3KB 8.png 18KB ui.js 8KB 3.png 18KB
index.html 4KB资源评论
毕业_设计
- 粉丝: 1974
- 资源: 1万+
最新资源
- 面向对象编程：基于java控制台学生成绩管理系统
- 【java毕业设计】考研互助平台源码（springboot+vue+mysql+说明文档+LW）.zip
- 散花飞天茅台最新最全答题答案攻略如下
- DirectX-1-2-3.zip
- 【java毕业设计】酒店管理系统的设计与实现源码（springboot+vue+mysql+说明文档+LW）.zip
- 基于JAVA实现的成绩管理系统面向对象编程【控制台版本】
- Win11右键功能V3
- 机器视觉作业与课设.zip，亚像素边缘检测部分C++
- 特种气体：2023年市场规模增长至496亿元，工业新蓝海待你探索！
- 【源码+数据库】基于springboot+mysql+mybatis实现的垃圾分类查询管理系统，界面优美，推荐！
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
