编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

复制Input内容的js代码_支持所有浏览器，修正了Firefox3.5以上的问题

Jun 21 Javascript

JavaScript实现的一个计算数字步数的算法分享

Dec 06 Javascript

js控制多图左右滚动切换效果代码分享

Aug 26 Javascript

AngularJS directive返回对象属性详解

Mar 28 Javascript

JavaScript的模块化开发框架Sea.js上手指南

May 12 Javascript

jQuery选择器实例应用

Jan 05 Javascript

js 颜色选择插件

Jan 23 Javascript

JavaScript 日期时间选择器一些小结

Apr 02 Javascript

使用jQuery动态设置单选框的选中效果

Dec 06 jQuery

fastadmin中调用js的方法

May 14 Javascript

深入理解JavaScript 箭头函数

May 30 Javascript

vue axios封装httpjs,接口公用配置拦截操作

Aug 11 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

从零开始学YII2框架（三）扩展插件yii2-gird

2014/08/20 PHP

php ImageMagick windows下安装教程

2015/01/26 PHP

PHP自带方法验证邮箱是否存在

2016/02/01 PHP

PHP面向对象继承用法详解(优化与减少代码重复)

2016/12/02 PHP

将jQuery应用于login页面的问题及解决

2009/10/17 Javascript

用js设置下拉框为只读的小技巧

2014/04/10 Javascript

简单实现限制uploadify上传个数

2015/11/16 Javascript

深入浅析JavaScript中的arguments对象(强力推荐)

2016/06/03 Javascript

手机Web APP如何实现分享多平台功能

2016/08/19 Javascript

jQuery实现的导航下拉菜单效果示例

2016/09/05 Javascript

js中scrollTop()方法和scroll()方法用法示例

2016/10/03 Javascript

nodejs个人博客开发第七步后台登陆

2017/04/12 NodeJs

微信小程序实战之上拉（分页加载）效果（2）

2017/04/17 Javascript

Javascript中this关键字指向问题的测试与详解

2017/08/11 Javascript

jQuery zTree 异步加载添加子节点重复问题

2017/11/29 jQuery

vue2.0在没有dev-server.js下的本地数据配置方法

2018/02/23 Javascript

又拍云 Node.js 实现文件上传、删除功能

2018/10/28 Javascript

Vuex 使用 v-model 配合 state的方法

2018/11/13 Javascript

Vue使用zTree插件封装树组件操作示例

2019/04/25 Javascript

vue路由守卫及路由守卫无限循环问题详析

2019/09/05 Javascript

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

2020/02/01 jQuery

[06:15]2016国际邀请赛中国区预选赛单车采访：我顶WINGS

2016/06/27 DOTA

[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

用Python脚本来删除指定容量以上的文件的教程

2015/05/04 Python

编写Python脚本抓取网络小说来制作自己的阅读器

2015/08/20 Python

Python_LDA实现方法详解

2017/10/25 Python

Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析

2019/12/26 Python

python3+openCV 获取图片中文本区域的最小外接矩形实例

2020/06/02 Python

纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)

2013/01/07 HTML / CSS

HTML块级标签汇总（小篇）

2016/07/13 HTML / CSS

肯尼亚网上商城：Kilimall

2016/08/20 全球购物

预备党员转正思想汇报

2014/01/12 职场文书

2015年物业管理工作总结

2015/04/23 职场文书

合作合同协议书

2016/03/21 职场文书

MySQL数据库超时设置配置的方法实例

2021/10/15 MySQL

Redis+Lua脚本实现计数器接口防刷功能(升级版)

2022/02/12 Redis