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 相关文章推荐
JavaScript Date对象 日期获取函数
Dec 19 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
小试SVG之新手小白入门教程
Jan 08 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
JS实现九宫格拼图游戏
Jun 28 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
团队精神演讲稿
2013/12/31 职场文书
教师档案管理制度
2014/01/23 职场文书
营销计划书
2015/01/17 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL