jquery实现简单易懂的图片展示小例子


Posted in Javascript onNovember 21, 2013

HTML代码:

<body> 
<div style="overflow:hidden;width:360px;height:225px;position:absolute;top:30px;" id="div"> 
<div style="width: 360px; height: 900px; position: relative;" id="imgCon"> 
<img src="img/1.jpg" id="img0"/> 
<img src="img/2.jpg" id="img1"/> 
<img src="img/3.jpg" id="img2"/> 
<img src="img/1a.jpg" id="img3"/> 
<img src="img/1.jpg"/> 
</div> 
</div> 
<div class="box" num="0" id="box0" style="color:red;">1</div> 
<div class="box" num="1" id="box1">2</div> 
<div class="box" num="2" id="box2">3</div> 
<div class="box" num="3" id="box3">4</div> 
</body>

JS代码:
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box0").click(function(){ 
//$("#imgCon").slideUp(4200); 
$("#imgCon").animate({top:'-225px'},"slow"); 
}); 
$("#box1").click(function(){ 
$("#imgCon").animate({top:'-450px'},"slow"); 
}); 
$("#box2").click(function(){ 
$("#imgCon").animate({top:'-675px'},"slow"); 
}); 
$("#box3").click(function(){ 
$("#imgCon").animate({top:'-900px'},"slow"); 
}); 
}); 
</script>

CSS:代码:
<style type="text/css"> 
.box{ 
width:40px; 
height:20px; 
border:1px solid #000; 
float:left; 
cursor:pointer; 
} 
#imgCon img{ 
display:block; 
padding:0; 
margin:0; 
width:360px; 
height:225px; 
} 
</style>
Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
js常用正则表达式集锦
May 17 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 #Javascript
利用jq让你的div居中的好方法分享
Nov 21 #Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 #Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 #Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python函数中不定长参数的写法
2019/02/13 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Ruby如何实现动态方法调用
2012/11/18 面试题
老师推荐信
2013/10/28 职场文书
西式婚礼证婚词
2014/01/12 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014年营业员工作总结
2014/11/18 职场文书
同学聚会祝酒词
2015/08/10 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python