js会飞的li标签
当点击左边的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标签的更多相关文章
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- 9会飞的li标签
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js实现点击<li>标签弹出其索引值
据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...
- 给li标签添加自定义属性
给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- 怎么把<li>标签里的内容付给文本框
如果你不想使用jq,那就可以这样先写一个js函数,function val(a){alert(a);} 然后在li标签上添加点击事件,调用这个函数并将当前li里的文本当做参数一起发送给js函数< ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- 给奇数的li标签添加蓝色,给偶数的li标签添加红色
今天遇到的面试题,哎,不看参考手册还是写的蛋疼啊!给奇数的li标签添加红色,给偶数的li标签添加蓝色 直接撸代码吧: <!DOCTYPE html> <html lang=" ...
随机推荐
- 构建第一个Java程序
- 【扩展欧几里得】Codevs 1200: [noip2012]同余方程
Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. Input Description 输入只有一行,包含两个正整数 a, b,用 一个 空格隔开. Outpu ...
- js 全选 反选
1.全选 function selectAll(form){ for (var i = 0; i < form.elements.length; i++) { if (form.elements ...
- POJ2031Building a Space Station
http://poj.org/problem?id=2031 题意:你是空间站的一员,太空里有很多球形且体积不一的“小房间”,房间可能相距不近,也可能是接触或者甚至是重叠关系,所有的房间都必须相连,这 ...
- HDU4611+数学
/* 找规律 题意:abs(i%A - i%B) 对i从0~N-1求和 从0~N-1一个一个算必TLE,着A,B两者差相同的部分合并起来算 */ #include<stdio.h> #in ...
- Jquery-DataTable 使用介绍
http://dt.thxopen.com/example/server_side/simple.html
- WCF之各种WCF引用方式
写在开头:本文内容来自 WCF全面解析中的一个经典例子,如果你已经看过了,那么可以忽略本文,本文旨在和大家分享不一样的WCF使用方法. 准备工作: 1.创建解决方案WCFService(当然名字可以任 ...
- zookeeper入门必读
(如果感觉有帮助,请帮忙点推荐,添加关注,谢谢!你的支持是我不断更新文章的动力.本博客会逐步推出一系列的关于大型网站架构.分布式应用.设计模式.架构模式等方面的系列文章) 今天我想谈谈zookeepe ...
- JAVA-----乱码的处理 乱码的解决方法总结
为什么说乱码是程序员无法避免的话题呢?这个首先要从编码机制上说起,大家都是中文和英文的编码格式不是一样,解码也是不一样的!工作遇到各种各样的乱码的解决方法总结一下. 对于Java由于默认的编码方式是 ...
- git整理纷乱的历史合并记录
https://github.com/Epix37/Hearthstone-Deck-Tracker 以上面版本库的master分支为例 父节点1 SHA-1: a21142968282ae49720 ...