jquery实例:点击图片翻页展示效果的方法

2019-03-2209:51:51WEB前端开发Comments2,347 views字数 867阅读模式

 文章源自菜鸟学院-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
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10254.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定