jQuery使用animate实现ul列表项相互飘动效果示例


Posted in Javascript onSeptember 16, 2016

本文实例分析了jQuery使用animate实现ul列表项相互飘动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    body{font-size:12px;maring:0px;padding:0px;}
    #main{width:600px;margin:auto;background-color:gold;}
    ul{float:left;margin:30px;width:80px;height:140px;padding:2px;background-color:#0099cc}
    #ulRight{margin-left:300px;}
    li{list-style-type:none;margin-top:3px;background-color:Gray;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("li[name='pigeon']").click(function () {
        //开始飘动的位置,由于ulRight的margin-left为300px所以要加300,同理leftUl也一样
        var rightUlLeft = parseInt($("#ulRight").position().left + 300) + "px";
        var leftUlLeft = parseInt($("#ulLeft").position().left + 30) + "px";
        if ($(this).parent().attr("id") == "ulLeft") {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": leftUlLeft });
            next();
          })
          .animate({ "left": rightUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulRight").css({ "position": "static" });
            $(this).dequeue();
          });
        }
        else {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": rightUlLeft });
            next();
          })
          .animate({ "left": leftUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulLeft").css({ "position": "static" });
            $(this).dequeue();
          });
        }
      });
    });
  </script>
</head>
<body>
  <div id="main">
    <ul id="ulLeft">
      <li name='pigeon'>白鸽</li>
      <li name='pigeon'>花鸽</li>
      <li name='pigeon'>黑鸽</li>
      <li name='pigeon'>灰鸽</li>
      <li name='pigeon'>红鸽</li>
      <li name='pigeon'>绛鸽</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

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

Javascript 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 #Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 #Javascript
jQuery中show与hide方法用法示例
Sep 16 #Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 #Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 #Javascript
AngularJs 动态加载模块和依赖
Sep 15 #Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
pytorch 共享参数的示例
2019/08/17 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
学校节能减排倡议书
2014/05/16 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
五年级作文之想象作文
2019/10/30 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python