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& ...
随机推荐
- CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（转载）
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- 关于Oracle中查询结果为未选定行
今天在做关于Oracle查询语句的练习时,碰到这么一个题目:找出EMP表中姓名(ENAME)第三个字母是A的员工姓名.我的Scott.emp表的现有数据如下: SQL> select * fro ...
- pl sql练习（1）
编写函数接受参数并返回字符串:Hello $var.然后赋值给绑定变量并打印: create or replace function hello_function ( pv_whom varchar2 ...
- div背景等比例缩小
background: url("http://www.asdear.com/Content/loginPage/newimages/nchina.png") 50% 0px no ...
- 第一个XAML程序
创建win8程序的默认Xaml文件是MainPage.Xaml文件,文件的内容如下所示: <Page x:Class="App1.MainPage" xmlns=" ...
- HttpClient 请求WebApi
HttpClient client = new HttpClient(); client.BaseAddress = new Uri(ConfigurationManager.AppSettings[ ...
- Python Tkinter canvas oval原理
Ovals, mathematically, are ellipses, including circles as a special case. The ellipse is fit into a ...
- H5 progress标记
进度条标记 示例:<progress class="processbar" id="processbar" max="100" val ...
- Linux命令行之逗趣无极限
Linux命令行之逗趣无极限 . Linux"sl"命令行 尽管"sl"代表了"蒸汽机机头",但它是用来提醒那些命令行控们别把"l ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...