jQuery实现点击图片翻页展示效果的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>基于jQuery实现的点击图片翻页展示效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

.div{width:240px;height:90px;z-index:0;position:absolute;left:10px;border:2px #3300FF solid;border:0px;color:#FFFFFF;margin-left:320px;}

</style>

<script type="text/javascript" src="/images/jquery1.3.2.js"></script>

<script type="text/javascript">

$(function(){

 var z=-1;

 $("div").click(function(){

  $(this).animate({left:"350px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);

 })

});

</script>

</head>

<body>若不能显示效果,则刷新页面可正常。

<div class="div"><img src="images/m01.jpg"></div>

<div class="div"><img src="images/m02.jpg"></div>

<div class="div"><img src="images/m03.jpg"></div>

<div class="div"><img src="images/m04.jpg"></div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Javascript delete 引用类型对象
2013/11/01 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python计算字符宽度的方法
2016/06/14 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python交互式图形编程实例(二)
2017/11/17 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python文件写入write()的操作
2019/05/14 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
结对共建协议书
2014/08/20 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
法定代表人证明书
2014/11/28 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书