编程 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 相关文章推荐

Javascript下IE与Firefox下的差异兼容写法总结

Jun 18 Javascript

鼠标滑在标题上显示图片的JS代码

Nov 19 Javascript

$.each遍历对象、数组的属性值并进行处理

Jul 18 Javascript

JQuery复制DOM节点的方法

Jun 11 Javascript

js实现一个猜数字游戏

Mar 31 Javascript

swiper 解决动态加载数据滑动失效的问题

Feb 26 Javascript

JavaScript中set与get方法用法示例

Aug 15 Javascript

js canvas画布实现高斯模糊效果

Nov 27 Javascript

Vue组件之高德地图地址选择功能的实例代码

Jun 21 Javascript

如何在JavaScript中谨慎使用代码注释

Jun 21 Javascript

js数据类型转换与流程控制操作实例分析

Dec 18 Javascript

如何优化vue打包文件过大

Apr 13 Vue.js

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中如何判断AJAX提交的数据

2012/02/05 PHP

学习php设计模式 php实现装饰器模式(decorator)

2015/12/07 PHP

php 遍历目录，生成目录下每个文件的md5值并写入到结果文件中

2016/12/12 PHP

PHP实现的操作数组类库定义与用法示例

2019/05/24 PHP

js 操作符实例代码

2009/10/24 Javascript

js 强制弹出窗口代码研究－又一款代码

2010/03/20 Javascript

jquery easyui滚动条部分设置介绍

2013/09/12 Javascript

JS实现至少包含字母、大小写数字、字符的密码等级的两种方法

2015/02/03 Javascript

jquery使用ul模拟select实现表单美化的方法

2015/08/18 Javascript

jquery mobile 移动web(5)

2015/12/20 Javascript

Vue的百度地图插件尝试使用

2017/09/06 Javascript

解决Layui 表单提交数据为空的问题

2018/08/15 Javascript

vue select选择框数据变化监听方法

2018/08/24 Javascript

微信小程序使用canvas的画图操作示例

2019/01/18 Javascript

关于vue-cli 3配置打包优化要点（推荐）

2019/04/22 Javascript

vue中使用vue-print.js实现多页打印

2020/03/05 Javascript

Vue项目vscode 安装eslint插件的方法(代码自动修复)

2020/04/15 Javascript

JavaScript大数相加相乘的实现方法实例

2020/10/18 Javascript

Vue实现随机验证码功能

2020/12/29 Vue.js

[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片

2016/03/03 DOTA

重命名批处理python脚本

2013/04/05 Python

Python3搜索及替换文件中文本的方法

2015/05/22 Python

Python/Django后端使用PIL Image生成头像缩略图

2019/04/30 Python

python处理excel绘制雷达图

2019/10/18 Python

将python2.7添加进64位系统的注册表方式

2019/11/20 Python

python dict乱码如何解决

2020/06/07 Python

详解如何使用Pytest进行自动化测试

2021/01/14 Python

青年文明号复核材料

2014/02/11 职场文书

工作睡觉检讨书

2014/02/25 职场文书

课前三分钟演讲稿

2014/04/24 职场文书

《槐乡五月》教学反思

2014/04/25 职场文书

2014教师党员个人自我评议

2014/09/20 职场文书

党的群众路线教育实践活动个人整改方案

2014/09/21 职场文书

幼儿园新生开学寄语

2015/05/27 职场文书

2015年酒店销售部工作总结

2015/07/24 职场文书

2019年健身俱乐部的创业计划书

2019/08/26 职场文书