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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
javascript window对象属性整理
Oct 24 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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开发中的安全防范知识详解
2013/06/06 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Node.js Buffer用法解读
2018/05/18 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
安装python及pycharm的教程图解
2019/10/10 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
总经理驾驶员岗位职责
2013/12/04 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
公司门卫管理制度
2014/02/01 职场文书
《乌塔》教学反思
2014/02/17 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python