jQuery实现点击图片翻页彰显效果的主意

作者: 计算机网络  发布:2019-09-06

本文实例陈述了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程序设计具备帮忙。

你或者感兴趣的文章:

  • 凭仗jQuery完毕鼠标点击导航菜单水波动画作用附源码下载
  • jquery完成鼠标点击后打开列表内容的导航栏效果
  • jquery点击页面任何区域落到实处鼠标核心十字效果
  • jquery达成可点击伸缩与展开的菜单功效代码
  • jquery完成点击弹出层效果的简练实例
  • js点击出现悬浮窗效果不利用JQuery插件
  • 基于jQuery的焰火效果(运动有关)点击荧屏出焰火
  • jquery完结的点击翻书效果代码
  • jquery完结的图纸点击滚动效应
  • jquery达成漂浮在网页左侧的qq在线客服插件示例
  • jQuery达成鼠标点击处心形漂浮的炫丽效果示例

本文由今晚开什么码发布于计算机网络,转载请注明出处:jQuery实现点击图片翻页彰显效果的主意

关键词: