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& ...
随机推荐
- kaggle之旧金山犯罪
kaggle地址 github地址 特点: 离散特征 离散特征二值化处理 数据概览 import pandas as pd import numpy as np # 载入数据 train = pd.r ...
- Ubuntu下嵌入式Qt开发环境配置全攻略
http://qpcwth.blog.163.com/blog/static/20993024620139151424822/ 在安装的过称中,出现一些问题,注意试想: 1.本次开发环境的配置,是基于 ...
- C#实训 打字游戏
StatusStrip控件 状态条 =进度条+标签 等集合体
- Integer to Roman(JAVA)
public String intToRoman(int num) { int[] values={1000,900,500,400,100,90,50,40,10,9,5,4,1}; String[ ...
- C#调用WebService实例和开发(转)
1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...
- ASP.NET和PHP全面对比
谁是速度之王? 刚刚在9月编程语言排行榜上取得历史性突破的PHP在Web开发领域最到的对手可能就是基于微软.NET技术的ASP.NET.近日,微软的 Joe Stagner在博客上发表了一系列文章比较 ...
- jquery中 append 和appendto的区别
1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...
- Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to “*****”
Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment ...
- VS2003转VS2010 fatal error C1189: #error
我自己的mfc的demo要转换编译环境出现以下编译错误: VS2010编译错误:fatal error C1189: #error : This file requires _WIN32_WINNT ...
- Safecracker
问题陈述: 杭州电子科技大学HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1015 问题解析: 深度优先搜索(Depth_First Search ...