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 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android