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

效果预览：

代码实现：

 <!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. Windows Server 2012网卡Teaming模式

    成组模式: Switch-independent(交换机独立): 这是配置时的默认值,此模式不要求交换机参与组合配置,由于独立模式下的交换机不知道网卡是主机上组合一部分,teaming组中的网卡可以连 ...

  2. oracle查找重复记录

    SELECT *FROM t_info aWHERE ((SELECT COUNT(*)          FROM t_info          WHERE Title = a.Title) &g ...

  3. JS知识点备忘

    做前端久了,会发现很多比较杂的知识点,平时很少用到(往往在面试的时候经常见到),但是遇到的时候会很揪心...所以遇到的时候把它记录下来,但求有个印象,再次遇到时,可以在这里快速找到解决. 1.文档碎片 ...

  4. http的get与post方式下的getParameter获取中文

    客户端提交某个中文参数,比如a=中国 (1)如果以GET方式提交,在地址栏中,可以看到参数进行了URL ENCODE,形如:a=%E4%B8%AD%E5%9B%BD.服务端接收到请求,使用reques ...

  5. MFC——从实现角度分析微云界面

    在云计算时代之风吹来,很多互联网公司都在建云,提出云盘.云储存.云平台.云空间等等,骤然间,天下皆云.云是啥?有用户量,就有云,没有用户量,你的系统,你的云,也就是一朵白云. 最近研究了下微云的界面, ...

  6. [Practical Git] Format commit history with git log arguments

    When running the git log command, we can pass in options as arguments toformat the data shown for ea ...

  7. Android ListView快速定位（二）

    方法二:android:textFilterEnabled="true" + Filter 这个属性在android.widget.AbsListView下,要求adapter必须 ...

  8. 在Struts2中使用ValueStack、ActionContext、ServletContext、request、session等 .

    笔者不知道该用哪个词来形容ValueStack.ActionContext等可以在Struts2中用来存放数据的类.这些类使用的范围不同,得到的方法也不同,下面就来一一介绍. 声明:本文参考Strut ...

  9. Android 导入导出CSV，xls文件 .

    1 . http://www.bangchui.org/read.php?tid=62 2 .http://blog.csdn.net/xinzheng_wang/article/details/77 ...

  10. 从你的u盘启动：30天自制操作系统第四天u盘启动学习笔记

    暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078    ,更多学习中的问题.资料,群里分享 developing environment:ubuntu 关于u盘启动自己做的操 ...