简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:2463 次  日期:2015-03-13 10:41:11

温馨提示:易贤网小编为您整理了“jQuery实现点击图片翻页展示效果的方法”,方便广大网友查阅!

这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:js实现鼠标经过时图片滚动停止的方法
下一篇:JS+CSS实现可拖动的弹出提示框
易贤网手机网站地址:jQuery实现点击图片翻页展示效果的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!