当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序

 <!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">

         #ulL

         {

             border: 2px dashed black;

             width: 100px;

             float: left;

         }

         #ulR

         {

             border: 2px dashed black;

             width: 100px;

             float: right;

         }

         .bgcolor

         {

             background-color: #0094ff;

         }

     </style>

     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>

     <script type="text/javascript">

         $(function () {

             $("#ulL li").click(function () {

                 $(this).toggleClass("bgcolor");//每点击一次li标签则给标签加个背景颜色

             });

             //仅仅把选中的li标签飞到右边去

             $("#btnRemove").click(function (e) {

                 e.preventDefault();

                 $("li").each(function () {

                     if ($(this).attr("class") == "bgcolor") {

                         $(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 2000, function () {

                             $(this).css({ position: "static" }).appendTo("#ulR").toggleClass("bgcolor");

                         });

                     }

                 });

                 /*  当点击左边的li标签的时候飞到右边,点击右边的飞到左边,并且按照原来的顺序排列

                 if ($(this).parent().attr("id") == "ulL") {

                 $(this).css({ position: "absolute" }).animate({ left: document.body.clientWidth - 100 }, 1000, function () {

                 $(this).appendTo($("#ulR")).css({ position: "static" });

                 var uList = $("#ulR li");

                 uList.sort(function (x, y) {

                 return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));

                 }).appendTo($("#ulR"));

                 });

                 } else {

                 $(this).css({ position: "absolute" }).animate({ left: 100 }, 1000, function () {

                 $(this).appendTo($("#ulL")).css({ position: "static" });

                 var uList = $("#ulL li");

                 uList.sort(function (x, y) {

                 return parseInt(x.getAttribute("index")) - parseInt(y.getAttribute("index"));

                 }).appendTo($("#ulL"));

                 });

                 }

                 */

             });

         });

     </script>

 </head>

 <body>

     <ul id="ulL">

         <li index="1">●●●</li>

         <li index="2">◆◆◆</li>

         <li index="3">■■■</li>

         <li index="4">▲▲▲</li>

         <li index="5">★★★</li>

     </ul>

     <div>

         <input id="btnRemove" type="button" value="移动" />

     </div>

     <ul id="ulR">

     </ul>

 </body>

 </html>

html代码

js会飞的li标签的更多相关文章

  1. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  2. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  3. 9会飞的li标签

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. js实现点击<li>标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

  5. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  6. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  7. 怎么把<li>标签里的内容付给文本框

    如果你不想使用jq,那就可以这样先写一个js函数,function val(a){alert(a);} 然后在li标签上添加点击事件,调用这个函数并将当前li里的文本当做参数一起发送给js函数< ...

  8. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  9. 给奇数的li标签添加蓝色，给偶数的li标签添加红色

    今天遇到的面试题,哎,不看参考手册还是写的蛋疼啊!给奇数的li标签添加红色,给偶数的li标签添加蓝色 直接撸代码吧: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. ionic修改loading背景色

    .loading{ background-color: #387ef5 !important; } 只需要在自定义css文件中设置即可

  2. 1050 棋盘染色 2 - Wikioi

    题目描述 Description 有一个5*N的棋盘,棋盘中的一些格子已经被染成了黑色,你的任务是对最少的格子染色,使得所有的黑色能连成一块. 输入描述 Input Description 第一行一个 ...

  3. Mysql InnoDB彻底释放磁盘空间

    Innodb数据库对于已经删除的数据只是标记为删除,并不真正释放所占用的磁盘空间,这就导致InnoDB数据库文件不断增长. 如果需要彻底释放磁盘空间,则需要先导出数据,然后删除数据文件,最后导入数据. ...

  4. 【莫队】bzoj 3781,bzoj 2038,bzoj 3289

    好像又有一个星期没更博客了.. 最近疯狂考试...唯一有点收获的就是学会了莫队这种神奇的算法.. 听起来很难..其实是一个很简单的东西.. 就是在区间处理问题时对于一个待求区间[L',R']通过之前求 ...

  5. BZOJ 3173 [Tjoi2013] 最长上升子序列 解题报告

    这个题感觉比较简单,但却比较容易想残.. 我不会用树状数组求这个原排列,于是我只好用线段树...毕竟 Gromah 果弱马. 我们可以直接依次求出原排列的元素,每次找到最小并且最靠右的那个元素,假设这 ...

  6. [转载]Eziriz .NET Reactor 4.7.0.0 官方原版+破解补丁（强大的代码保护和软件防盗版工具）

    Eziriz .NET Reactor 是一个强大的代码保护和软件防盗版工具,完全由.NET框架编写..NET Reactor支持NET平台的软件许可系统,并支持NET程序集所有语言.当.Net编译器 ...

  7. maven 解决 Eclipse is running in a JRE, but a JDK is

    解决安装了maven插件的myeclipse每次开启报错 The Maven Integration requires that Eclipse be running in a JDK, becaus ...

  8. PYTHON设计模式，创建型之工厂方法模式

    我感觉和上一个差不多,可能不要动最要的地方吧... #!/usr/bin/evn python #coding:utf8 class Pizza(object): def prepare(self, ...

  9. intelliJ idea读取资源文件

    原文:intelliJ idea读取资源文件 原文地址 http://yanwushu.sinaapp.com/intellij-idea_raed_resource_file/ 官方文档 以下是je ...

  10. MyBatis的动态SQL操作--更新

    更新条件不确定,需要根据具体的情况生成sql语句. id是主键,一般不会去更新. 1.只更新name的值 update student set name = ? where id = ? 2.只更新s ...