9会飞的li标签
<!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">
ul {
border: dashed;
} #ulL {
float: left;
} #ulR {
float: right;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ulL").children().click(function () {
$("#ulL li").click(function () {
var $curLi = $(this);
//0.判断当前 li 是否在左侧 ul中，如果在，则移动到右侧
if ($curLi.parent().attr("id") == "ulL") {
//1.被点击的li对象 设置为 绝对布局，动画飞到 右侧
//***获取浏览器的可见宽度：document.body.clientWidth
$curLi.css("position", "absolute").animate({ left: document.body.clientWidth - 20 }, 2000, function () {
//2.动画的回调函数中，将 li对象 移到 右侧ul中，并设置为 静态布局（默认值）。
$curLi.appendTo($("#ulR")).css("position", "static");
})
} else {//否则移动到左侧
//1.被点击的li对象 设置为 绝对布局，动画飞到 右侧
$curLi.css("position", "absolute").animate({ left: "10px" }, 2000, function () {
//2.动画的回调函数中，将 li对象 移到 右侧ul中，并设置为 静态布局（默认值）。
$curLi.appendTo($("#ulL")).css("position", "static");
})
} });
});
});
</script>
</head>
<body>
<ul id="ulL">
<li>中国</li>
<li>美国</li>
<li>德国</li>
<li>俄罗斯</li>
</ul> <ul id="ulR">
</ul> </body>
</html>
9会飞的li标签的更多相关文章
- js会飞的li标签
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 给li标签添加自定义属性
给li标签添加属性<ul> <li></li> <li></li> <li></li> <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 ...
- ul+li标签制作表格
table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...
- li标签行内元素高度及居中
<head> <title><title> <style type="text/css"> * { padding: 0px; ma ...
- li标签之间的空隙问题（转）
原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加 ...
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- 用正则表达式抓取网页中的ul 和 li标签中最终的值！
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...
随机推荐
- 跟我一起学extjs5(18--模块的新增、改动、删除操作)
跟我一起学extjs5(18--模块的新增.改动.删除操作) 上节在Grid展示时做了一个金额单位能够手工选择的功能,假设你要增加其它功能.也仅仅要依照这个模式来操作即可了,比方说你想 ...
- if分支的四种形式
分支:——四种if一.if(条件表达式){} 二.if(条件表达式){}else{} 三.if(条件表达式){}else if(条件表达式){}else if(条件表达式){}....else{} 四 ...
- 用MVC4+EF改写XXX系统的计划--前言
感觉自己工作了三年,重来没有自己一个人写一个项目,从开始的策划,功能需求,业务逻辑,扩展,性能优化等等方面去做,从今天起准备发比半年时间重写XXX项目,每天中午和晚上分别花半个小时和一个小时开发,周末 ...
- tomcat应用服务器
Tomcat性能调优方案 一.操作系统调优 对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU的频率,保证文件系统的读写速率等.经过压力测试验证,在并发连接很多的情况下,CPU的处理能力 ...
- Android系统休眠对程序的影响以及处理
Android系统在用户长时间不操作时,为了节省资源,系统会选择休眠.在休眠过程中自定义的Timer.Handler.Thread.Service等都会暂停.而有时候这种机制会影响到我们程序的正常运行 ...
- iOS获取文件路径
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC"; color: #008400 } p.p2 ...
- JAVA byte有无符号数的转换
如果你只需要对英文文本的每个字节进行数据处理,则无需考虑有符号数和无符号数的转换问题: 但如果你需要对含有中文的文本进行字节处理,则可能需要考虑有无符号数的转换问题. 以下代码均为Java代码. 1. ...
- stringstream函数（i o）
stringstream函数 头文件 #include<sstream> stringstream是字符串流,被用来切分数据或转化类型 样例一(摘) 输入n,代表接下来输入n行资料,每行 ...
- ckeditor的使用与验证
1.使id=id的textArea变为富文本编辑框 function inittextarea(id) { CKEDITOR.replace(id,{ width:'600px', ...
- HttpClient基础教程
1.HttpClient相关的重要资料 官方网站:http://hc.apache.org/ API:http://hc.apache.org/httpcomponents-client-4.3.x/ ...