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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现的分页插件完整示例
May 26 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
php断点续传之如何分割合并文件
2014/03/22 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
将Python代码打包为jar软件的简单方法
2015/08/04 Python
速记Python布尔值
2017/11/09 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
校园报刊亭创业计划书
2014/01/02 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python