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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
js实现拖拽功能
Mar 01 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 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采集相关教程之一 CURL函数库
2010/02/15 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python实现简单的语音识别系统
2017/12/13 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
顶撞领导检讨书
2014/01/29 职场文书
公证委托书格式
2014/09/13 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
欧元符号 €
2022/02/17 杂记