在日常工作当中遇到了一个问题，平铺型列表修改单个内容设置排序时列表排序应与之对应。一下是一个小小的例子；简单的解决了此类问题，以浮动的形式改变当前的数据的显示顺序。有不足之处欢迎指点，后期还会做一个更完善的版本。敬请期待！

效果预览：

代码实现：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         html, body, div, ul {margin: 0px;padding: 0px;}

         .clear {clear: both;}

         .content, .footer {margin: 0 auto;width: 90%;}

         .content {border: solid 2px yellow;}

         .footer {border: solid 2px red;}

         .content ul li {float: left;width: 100px;height: 70px;margin: 5px 5px;border: solid 2px red;list-style-type: none;background-color: #ccc;}

     </style>

     <script src="js/jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             var m_nodeObj, t_nodeObj, tempWidth;

             $("#btnSet").click(function () {

                 m_nodeObj = $(".content li:eq(" + $("#itemNumb").val() + ")");

                 t_nodeObj = $(".content li:eq(" + $("#setNumb").val() + ")");

                 ////方案一 无动画

                 //m_nodeObj.insertAfter(t_nodeObj);

                 ////方案二

                 //$(m_nodeObj).animate({ "width": "toggle" }, function () {

                 //    $(this).insertAfter($(t_nodeObj)).animate({ "width": "toggle" })

                 //})

                 //方案三

                 $(m_nodeObj).clone(true).appendTo(".content ul")

                     .css({ "position": "absolute", "top": node.ordinate(m_nodeObj), "left": node.abscissa(m_nodeObj) })

                     .animate({ width: node.width(m_nodeObj) + 10, height: node.height(m_nodeObj) + 10, top: node.ordinate(m_nodeObj) - 5, left: node.abscissa(m_nodeObj) - 5 }, 200, function () {

                         tempWidth = node.width(m_nodeObj);

                         t_nodeObj.animate({ "margin-right": tempWidth });

                         m_nodeObj.animate({ "width": '0px' }, function () { $(this).remove() });

                     })

                     .animate({ width: node.width(m_nodeObj), height: node.height(m_nodeObj), top: node.ordinate(t_nodeObj), left: node.abscissa(t_nodeObj) }, 500, function () {

                         //  m_nodeObj.insertAfter(t_nodeObj).animate({ "width": tempWidth }); $(this).remove();

                         t_nodeObj.css({ "margin-right": "0px" });

                         m_nodeObj.css("width", tempWidth).insertAfter(t_nodeObj);

                         $(this).remove();

                     })

             })

         })

         node = {

             abscissa: function (obj) {

                 return obj.offset().left - parseInt(obj.css("margin-left").replace("px", ""));

             },

             ordinate: function (obj) {

                 return obj.offset().top - parseInt(obj.css("margin-top").replace("px", ""));

             },

             height: function (obj) {

                 return parseInt(obj.css("height").replace("px", ""));

             },

             width: function (obj) {

                 return parseInt(obj.css("width").replace("px", ""));

             }

         }     </script>

 </head>

 <body>

     <div class="content">

         <ul>

             <li>1</li>

             <li>2</li>

             <li>3</li>

             <li>4</li>

             <li>5</li>

             <li>6</li>

             <li>7</li>

             <li>8</li>

             <li>9</li>

         </ul>

         <div class="clear"></div>

     </div>

     <div class="footer">

         <br />

         元素：  <input type="text" id="itemNumb" />

         <br />

         <br />

         目的： <input type="text" id="setNumb" />

         <br />

         <br />

         <input type="button" value="设置" id="btnSet" />

     </div>

 </body>

 </html>

html元素li移动动态效果的更多相关文章

  1. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  2. 横向子菜单栏ul根据其子元素li个数动态获取宽度，并与父li绝对垂直居中的jquery代码段

    ;(function(window){    $('.menuitem').hover(function(){        $('>a',this).css('background-color ...

  3. 关于li元素嵌套的事儿

    今天阅读<锋利的jQuery>第二版2.6节案例研究部分的时候,遇到一个问题. <ul> <li class="a1"><a href=& ...

  4. ul或者ol中添加li元素

    <!doctype html><html>    <head>        <meta charset="utf-8">      ...

  5. CCS设置第一个li的元素与其他li样式不同

    <div class="ly-content-list"> <ul> <li> <div class="title"& ...

  6. AngularJS的基础元素应用

    <!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...

  7. <<< Jquery查找元素、选择器使用方法总结

    $("#myDiv"); //根据给定的ID匹配一个元素,用于搜索id 属性中给定的值,id属性必须是唯一的 $("div"); //根据给定的元素名匹配所有元 ...

  8. VB下对HTML元素的操作

    <!DOCTYPE html> <html> <head> <title>test</title> </head> <bo ...

  9. 在js中怎么样选择互斥的相邻元素

    在使用jquery中,我们通常会选择siblings()去选择相邻元素,使用eq()方法去匹配元素,使用index()获取对应元素的索引值,具体jquery代码如下: <style> *{ ...

随机推荐

  1. 从PHPCMS、帝国CMS谈站长如何选择适合自己的CMS

    经常见站长论坛有人提到选哪个CMS好,最近也又有朋友在51LA站长群里问到PHPCMS和帝国CMS比较选哪个好的问题,所以落叶今天从PHPCMS及帝国CMS对比的角度来谈谈站长应该如何选择适合自己的C ...

  2. 辛星浅谈PHP的混乱的编码风格

    我们都知道.各种编程语言都有自己的风格,即使是像C和C++那样一脉相承的语言(C++本意全然兼容C的语法).编程风格上还是有些区别.比方非常典型的就是C++风格的单行凝视和C风格的多行凝视. 而尽管J ...

  3. C++ 过载，重写，隐藏

    1.过载:在一个类中(也就是一个作用域),方法名相同,形参表不同的方法. 2.重写:父类方法使用virtual,子类方法和方法的方法名,形参表,返回类型相同,子类可以不使用virtual,但是建议使用 ...

  4. android128 zhihuibeijing 科大讯飞 语音识别

    - 科大讯飞 开放平台 http://open.voicecloud.cn/ package com.itheima.voicedemo; import android.app.Activity; i ...

  5. 【大坑】DataGridView多线程更新修改Cell单元格卡死

    最新发现是Column的AutoSizeMode设置为AllCell调整宽度而造成的卡顿,还有就是在现在里面使用Invoke用匿名函数闭包的形式访问For循环的i变量值会不正确导致找不到索引而造成卡顿 ...

  6. mysql与java的之间的连接

    package cn.hncu; //注意,以下都是sun公司的接口(类)---这样以后换成Oracle等其它数据库,代码不用动import java.sql.Connection;import ja ...

  7. 关于automatic_Panoramic_Image_Stitching_using_Invariant_features 的阅读笔记

    并没有都读完,不过感觉还是有必要做一个笔记的,毕竟这只是随笔不是文章,所以可以有多少写多少,也算是工作总结了,最重要的是这个好在可以,完成所有有意义文档的检索,比起自己的word来说高级很多~~~. ...

  8. 例3-12opencv设置ROI感兴趣区域

    前面说了一堆,也不知道啥用,感觉也没说清楚,可能确实需要一些例子来显性表示一下,或者他们在当初出版书籍针对的人群已经有了对图像的基本认识,然而自己还是没有建立起来,往后看看吧,希望能比较清楚的自己处理 ...

  9. Windows2012中Jenkins搭建.NET自动编译测试与发布环境

    安装7Zip 下载地址: http://www.7-zip.org/a/7z1602-x64.exe 安装Git 下载地址:https://github.com/git-for-windows/git ...

  10. asp中的几个取整函数fix(),int(),round()的用法

    asp中的几个取整函数是:fix(),int(),round(); Int(number).Fix(number)函数返回数字的整数部分.number 参数可以是任意有效的数值表达式.如果 numbe ...