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& ...
随机推荐
- webapp 性能优化
webapp 不像传统页面,它生命周期更长,在手机端上,硬件环境并没有pc上那么好.所以性能的优化尤为重要. webapp的性能优化主要分为两个方面 网络请求优化 和 页面渲染优化 , 我们对于性能优 ...
- Android多媒体开发-- OpenMax IL简介
1.openmax 简介 http://www.khronos.org/openmax/ OpenMax是一个多媒体应用程序的框架标准,由NVIDIA公司和Khronos在2006年推出. OpenM ...
- LINQ 操作符
using System; using System.Collections.Generic; using System.Text; using System.Linq; namespace LinQ ...
- Mac下Apache服务器配置
一.Apache服务器 1. 使用最广的 Web 服务器 2. Mac自带,只需要修改几个配置就可以,简单,快捷 3. 有些特殊的服务器功能,Apache都能很好的支持 目的:让有一个自己专属的测试环 ...
- json 去空值与缩进
var jSetting = new Newtonsoft.Json.JsonSerializerSettings(); //忽略值为null的 jSetting.NullValueHandling ...
- Android系统五大布局详解Layout
我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...
- [转载]提升进程权限-OpenProcessToken等函数的用法
GetCurrentProcessID 得到当前进程的ID OpenProcessToken 得到进程的令牌句柄LookupPrivilegeValue 查询进程的权限 AdjustTokenPriv ...
- Direct2D DirectWrite绘制文字
绘制文本使用DirectWrite: 为了简化 DirectWrite 的使用,RenderTarget有3个方法可以直接绘制文本: DrawText,用于简单绘制,支持Unicode. DrawTe ...
- 深入理解JavaWeb技术内幕（一）
最近在看许令波的<深入理解JavaWeb技术内幕>.整理了一些笔记.想做一个系列,这篇是系列的第一篇,讲Web请求. B/S架构 最常见的架构方式. 优点: 1.客户端使用统一(此处的统一 ...
- Mysql JOIN优化。
join性能自行百度,google 数据60w+,这里我只测试了一个limit , ) ,) AS C LEFT JOIN table2 AS B ON C.e_id=B.id; ) ,;