jQuery操作动画完整实例分析


Posted in jQuery onJanuary 10, 2020

本文实例讲述了jQuery操作动画。分享给大家供大家参考,具体如下:

<html>
 <head>
 <title>jQuery操作动画</title>
 <meta charset="UTF-8"/>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  //在一个函数中实现点击触发---jQuery和js相结合的实现方法,(不推荐)
  var flag=false;    //最开始设置为不显示,所以设置为false,以为规定了false对应的会执行下拉的操作
//  function testCl(){    //实现点击一次下拉显示。再次点击收起
//  if(flag){
//   $("#showdiv").slideUp(2000);
//   $("#lb1").attr("src","../img/labledown.jpg"");
//   flag=false;
//  }else{
//   $("#showdiv").slideDown(2000);
//   $("#lb1").attr("src","../img/lableUp.jpg""); 
//   flag=true;
//  } 
//  }
  //仅仅利用jQuery实现,在不使用onclick的方法实现
//  $(function(){    //相当于$(document)的效果,页面加载的时候置入
////  $("ul>label").bind("click",function() //利用bind也可以实现这个操作,而且可以修改其事件触发的机制
//  $("ul>label").click(function(){   //利用ul>label得到属性子对象,然后进行其属性的操作
//   if(flag){
//   $("#showdiv").slideUp(2000);
//   $("#lb1").attr("src","../img/labledown.jpg");
//   flag=false;
//   }else{
//   $("#showdiv").slideDown(2000);
//   $("#lb1").attr("src","../img/lableUp.jpg");  //改变标签的图标
//   flag=true;
//   } 
//  });
//  })  //直接利用$进行页面操作,在其函数的内部是一个标签的点击属性操作
  //利用分散的方法实现鼠标移动的操作
  $(function(){
  $("ul>label").bind("mouseout",function(){
   $("#showdiv").slideUp(2000);
   $("#lb1").attr("src","../img/labledown.jpg");
  });
  $("ul>label").bind("mouseover",function(){
   $("#showdiv").slideDown(2000);
   $("#lb1").attr("src","../img/lableUp.jpg");
  });
  })   //在页面操作中有两个对象的操作来分别控制两个事件
 </script>
 <style type="text/css">
  ul li{
  list-style-type: none;
  }
  img{
  width: 160px;
  height: 100px;
  margin-left: 70px;
  }
  #lb1{
  width: 30px;
  height: 20px;
  margin-top: 80px;
  margin-left: 80px;
  }
 </style>
 </head>
 <body>
 <ul>
  <img src="../img/labledown.jpg" id="lb1"/>  <label for=""><b>Clannad展示</b></label>;
  <div id="showdiv" style="display: none;"> <!--设置刚开始的不进行显示-->
  <li><img src="../img/0.jpg"/></li>
  <li><img src="../img/dangao.jpg"/></li>
  </div>
 </ul>
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
You might like
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
node使用request请求的方法
2019/12/20 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python中文件变化监控示例(watchdog)
2017/10/16 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python常用排序算法的实现代码
2019/11/08 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
css3的transition属性详解
2014/12/15 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
外包公司软件测试工程师
2014/11/01 面试题
应届毕业生求职自荐书
2014/01/03 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
安全标语大全
2014/06/10 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
赞助商致辞
2015/07/30 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python