文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
实例讲述了jquery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<!doctype html public -//w3c//dtd html 4.0 transitional//en>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<html>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<head>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<title>基于jquery实现的点击图片翻页展示效果</title>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<meta http-equiv=content-type content=text/html;charset=gb2312>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<style type=text/css>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
.div{width:240px;height:90px;z-index:0;position:absolute;left:10px;border:2px #3300ff solid;border:0px;color:#ffffff;margin-left:320px;}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<script type=text/javascript src=/images/jquery1.3.2.js></script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<script type=text/javascript>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
$(function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
var z=-1;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
$(div).click(function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
$(this).animate({left:350px},1000,function(){$(this).css(zindex,z--)}).animate({left:10px},1000);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
</head>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<body>若不能显示效果，则刷新页面可正常。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<div class=div><img src=images/m01.jpg></div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<div class=div><img src=images/m02.jpg></div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<div class=div><img src=images/m03.jpg></div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
<div class=div><img src=images/m04.jpg></div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
</body>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
</html>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
希望本文所述对大家的jquery程序设计有所帮助。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10254.html