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 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
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
Yii2.0多文件上传实例说明
2017/07/24 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python代码制作configure文件示例
2014/07/28 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
计算机应用专业自荐信
2014/07/05 职场文书
教师听课评语大全
2014/12/31 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
JavaScript前端面试组合函数
2022/06/21 Javascript