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& ...
随机推荐
- C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域
面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...
- RAID技术介绍和总结
简介 RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能有很清楚的认识和掌握.本文将对RAID技术进行介绍和总结,以期能尽量阐明其概念. RAID全称为独立磁盘冗 ...
- 五、MP3文件认识上的几个误区
1.每帧播放时长都为26ms? 很多博客和文章都提到,Mp3文件每个帧的播放时长(Frame_PlayingTime)是26ms,这个结论是错误的.公式应该是这样的: 一个帧的播放时长=一个帧的采样个 ...
- Linux下重要日志文件及查看方式
http://os.51cto.com/art/201108/282184_all.htm 1.Linux下重要日志文件介绍 /var/log/boot.log 该文件记录了系统在引导过程中发生的 ...
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
- ANCS协议翻译
综述 苹果通知中心(Apple Notification Center Service, ANCS)的目的是提供给蓝牙外设一种简单.方便的获取ios设备通知信息的方式. 依赖 ANCS的使用没有依赖, ...
- iOS开发之UIApplication
UIApplication的核心作用是提供了iOS程序运行期间的控制和协作工作. iPhone应用程序是由主函数main启动,它负责调用UIApplicationMain函数,该函数的形式如下所示: ...
- Linq 查询基本操作
- from 子句 - where 子句 - select子句 - group 子句 - into 子句 - orderby 子句 - join 子句 - let 子句 - 复合from子句 - 在某 ...
- Java File 类的使用方法详解（转）
转自:http://www.codeceo.com/article/java-file-class.html Java File类的功能非常强大,利用Java基本上可以对文件进行所有的操作.本文将对J ...
- Java内存模型(转载)
1. 概述 多任务和高并发是衡量一台计算机处理器的能力重要指标之一.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这个指标比较能说明问题 ...