1.1 复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
var $div=$("div").eq(0);
console.log($div);
var divDom=$("div").get(0);
console.log(divDom);
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//.eq(index)获取到的是jquery对象
//.get(index)获取到的是DOM对象
//获取的是jquery对象
$("div").eq(0).css({
//这里面的键值对,键可以带双引号或者单引号,也可以不带引号
//一些不合法的变量名字,可以使用加引号的方式来声明
"font-size":"40px"
})
var $div=$("div").eq(0);
console.log($div);
//获取的是DOM
//下面这句是错误的,因为.get(index)方法获取的是DOM,DOM对象没有css方法
$("div").get(1).css("font-size","40px");
var divDom=$("div").get(0);
console.log(divDom);
})
</script>
</head>
<body>
<div>
我是div1
</div>
<div>
我是div2
</div>
<div></div>
</body>
</html>
1.2 动画
1.2.1 基本效果(显示和隐藏)
$("div").show(); //让div显示
$("div").hide(); //隐藏div
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
background-image: url(imgs/bg.jpg);
padding-left: 10px;
}
.wrap li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
position: relative;
}
.wrap a {
color: black;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-image: url(imgs/libg.jpg);
}
.wrap li ul {
position: absolute;
display: none;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//mouseenter事件是鼠标经过时触发的事件
$(".wrap li").mouseenter(function () {
//$(this)是将DOM的this对象转换成jquery对象
//children()方法:获取子元素
//参数为:jquery过滤器
$(this).children("ul").show();
});
//mouseleave事件是鼠标离开时触发的事件
$(".wrap li").mouseleave(function () {
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li><li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("button").eq(0).click(function () {
$("div").css({
"display":"none",
"height":"200px",
"width":"300px",
"background":"gold"
});
//让div展示出来
//show()
//$("div").show(3000);//以毫秒为单位
//$("div").show("slow");
//$("div").show("fast");
//$("div").show("normal");
//第一个参数是动画时长,可以是数字或者字符串
//第二个参数是动画执行完成后,要执行的函数
$("div").show(2000,function () {
//alert("show动画执行完毕");
$("div").hide(1000);
})
});
$("button:last").click(function () {
//让div隐藏
$("div").hide();
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<div></div>
</body>
</html>
1.2.2 滑动效果
$("div").slideDown(); //下拉显示
$("div").slideUp(); //上拉
$("div").slideToggle(); //切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//设置div的默认样式
$("div").css({
"display":"none",
/*"float":"left",*/
"margin-bottom":"20px",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("input[type='button']").click(function () {
//让div以下拉的方式展示出来
//$(".divItem").slideDown(3000);
//两个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画执行完毕后要执行的函数
$(".divItem:first").slideDown(3000,function () {
});
//三个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画效果
//第三个参数是:动画执行完毕后要执行的函数
/*$(".divItem:first").slideDown(2000,"linear",function () {
});
//swing是一个先慢后快的效果
$(".divItem:last").slideDown(2000,"swing",function () {
});*/
$("button:first").click(function () {
$(".divItem").slideUp(3000);
});
$("button:eq(1)").click(function () {
$(".divItem").slideToggle();
})
});
});
</script>
</head>
<body>
<!--<button>下拉</button>-->
<input type="button" value="下拉"/>
<button>上拉</button>
<button>切换</button>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
1.2.3 淡入淡出(淡定)
$("div").fadeIn();
$("div").fadeOut();
$("div").fadeToggle();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//设置div的默认样式
$("div").css({
"display":"none",
/*"float":"left",*/
"margin-bottom":"20px",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("input[type='button']").click(function () {
//让div以下拉的方式展示出来
//$(".divItem").slideDown(3000);
//两个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画执行完毕后要执行的函数
$(".divItem:first").slideDown(3000,function () {
});
//三个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画效果
//第三个参数是:动画执行完毕后要执行的函数
/*$(".divItem:first").slideDown(2000,"linear",function () {
});
//swing是一个先慢后快的效果
$(".divItem:last").slideDown(2000,"swing",function () {
});*/
});
$("button:first").click(function () {
$(".divItem").slideUp(3000);
});
$("button:eq(1)").click(function () {
$(".divItem").slideToggle();
});
//淡入淡出效果
$("button:eq(2)").click(function () {
//淡入
$(".divItem").fadeIn(3000);
});
$("button:eq(3)").click(function () {
//淡出
$(".divItem").fadeOut(3000);
});
$("button:eq(4)").click(function () {
//淡入淡出切换
$(".divItem").fadeToggle(3000);
});
$("button:eq(5)").click(function () {
//淡入淡出切换
$(".divItem").fadeTo(1000,0.5);
});
});
</script>
</head>
<body>
<!--<button>下拉</button>-->
<input type="button" value="下拉"/>
<button>上拉</button>
<button>上拉下拉切换</button>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>设置不透明度</button>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
1.2.4 自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//设置div的默认样式
$("div").css({
"display":"none",
/*"float":"left",*/
"margin-bottom":"20px",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("input[type='button']").click(function () {
//让div以下拉的方式展示出来
//$(".divItem").slideDown(3000);
//两个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画执行完毕后要执行的函数
$(".divItem:first").slideDown(3000,function () {
});
//三个参数的时候
//第一个参数是:动画执行的时长
//第二个参数是:动画效果
//第三个参数是:动画执行完毕后要执行的函数
/*$(".divItem:first").slideDown(2000,"linear",function () {
});
//swing是一个先慢后快的效果
$(".divItem:last").slideDown(2000,"swing",function () {
});*/
});
$("button:first").click(function () {
$(".divItem").slideUp(3000);
});
$("button:eq(1)").click(function () {
$(".divItem").slideToggle();
});
//淡入淡出效果
$("button:eq(2)").click(function () {
//淡入
$(".divItem").fadeIn(3000);
});
$("button:eq(3)").click(function () {
//淡出
$(".divItem").fadeOut(3000);
});
$("button:eq(4)").click(function () {
//淡入淡出切换
$(".divItem").fadeToggle(3000);
});
$("button:eq(5)").click(function () {
//淡入淡出切换
$(".divItem").fadeTo(1000,0.5);
});
//自定义动画
$("button:eq(6)").click(function () {
$(".divItem").animate({
"width":"500px",
"height":"600px",
"opacity":1
/*"background":"green"*/
},2000);
});
});
</script>
</head>
<body>
<!--<button>下拉</button>-->
<input type="button" value="下拉"/>
<button>上拉</button>
<button>上拉下拉切换</button>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>设置不透明度</button>
<button>自定义动画</button>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
$("div").animate();
$("div").stop();
有两个参数:
第一个参数是:表示是否清空动画队列,也就是后面的动画。默认值为false,如果为true,表示清空队列,也就是说,后面所有的动画都停止了。
第二个参数是:表示是否立即执行完当前动画。默认是为false,如果为true,表示立即执行完当前的动画,然后,在执行后续动画。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
background-image: url(imgs/bg.jpg);
padding-left: 10px;
}
.wrap li {
float: left;
width: 100px;
height: 30px;
margin-right: 10px;
position: relative;
}
.wrap a {
color: black;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background-image: url(imgs/libg.jpg);
}
.wrap li ul {
position: absolute;
display: none;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//mouseenter事件是鼠标经过时触发的事件
$(".wrap li").mouseenter(function () {
//$(this)是将DOM的this对象转换成jquery对象
//children()方法:获取子元素
//参数为:jquery过滤器
$(this).children("ul").stop(false,true).slideDown(3000);
});
//mouseleave事件是鼠标离开时触发的事件
$(".wrap li").mouseleave(function () {
$(this).children("ul").stop(false,true).slideUp();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li><li>
<a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#start").click(function () {
$("#box").animate({height:300},3000);
$("#box").animate({width:300},3000);
$("#box").animate({height:100},3000);
$("#box").animate({width:100},3000);
});
$("#stop").click(function () {
$("#box").stop();
});
});
function stop(clearQueue,gotoEnd) {
if(!!clearQueue){
console.log(clearQueue);
}else{
console.log(clearQueue);
}
/*var args=arguments.length;
if(args<=0){
//设置默认值 false
}*/
}
stop();
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"></div>
</body>
</html>
1.3 操作样式
$("div").css("background","pink"); //设置背景颜色值
$("div").addClass("color-red");//添加样式
$("div").removeClass("color-red");//移除样式
$("div").toggleClass("color-red");//切换样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<style type="text/css">
.divItem{
background: #000;
color:#fff;
}
.divItem1{
font-size:20px;
}
</style>
<script>
$(document).ready(function () {
//css
/*$("li").css("font-size","18px");
$("li").css({
"background":"yellow",
"color":"white"
});
var fontSize=$("li").css("font-size");
console.log(fontSize);*/
//给所有li元素添加样式
//给选定的元素添加类样式,注意:样式名字没有点。
$("li").addClass("divItem");
//给指定的元素删除某个样式
//有参数的时候,移除指定的样式。如果指定的样式该元素不存在,那么将不删除任何样式
//$("li").eq(2).removeClass("divItem");
//没有参数的话,移除所有的样式
//$("li").eq(2).removeClass();
//切换样式
/*$("#demo").click(function () {
$("li").eq(2).toggleClass("divItem1");
});*/
//判断有无样式
$("#hasBtn").click(function () {
//hasClass的返回值为true或者false
var hasDivItem1Class=$("li").eq(2).hasClass("divItem1");
//console.log(hasDivItem1Class);
if(hasDivItem1Class){
//有某个样式
$("li").eq(2).removeClass("divItem1");
}else{
$("li").eq(2).addClass("divItem1");
}
});
});
</script>
</head>
<body>
<input type="button" value="切换样式" id="demo"/>
<input type="button" value="判断有没有样式" id="hasBtn"/>
<ul>
<li>元素很多1</li>
<li>元素很多2</li>
<li class="divItem1">元素很多3</li>
<li>元素很多4</li>
<li>元素很多5</li>
<li>元素很多6</li>
<li>元素很多7</li>
<li>元素很多8</li>
</ul>
</body>
</html>
tab栏案例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}
.wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}
.tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}
.tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;
border-top:4px solid #fff;}
.tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }
.products{ width: 1002px;border:1px solid #ddd;height: 476px;}
.products .main{float: left;display: none;}
.products .main.selected{display: block;}
.tab li.active{border-color: red; border-bottom: 0;}
</style>
<script type="text/javascript" src="../../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".tab>li").mouseenter(function () {
//给当前元素添加active这个样式
//给当前这个元素的所有兄弟元素移除active这个样式
$(this).addClass("active").siblings().removeClass("active");
//让下面的div内容,根据上面tab栏菜单展示相应内容
var index=$(this).index();
$(".main")
.eq(index)
.addClass("selected")
.siblings(".main")
.removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
1.4 常用DOM操作(属性,值,内容)
$("div").attr("name");//获取name属性值
$("div").removeAttr("name");//移除属性
$("input").val(function(i,v){});//设置input的值
.html .text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
background: gray;
height: 300px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function () {
//设置属性
$("input:eq(0)").click(function () {
$(this).attr("title","我是动态设置的属性");
});
//获取属性
$("input:eq(1)").click(function () {
var attr=$("input:eq(0)").attr("title");
console.log(attr);
});
//移除属性
$("input:eq(2)").click(function () {
$("input:eq(0)").removeAttr("title");
});
//设置值
$("input:eq(3)").click(function () {
$("#txt").val("我是动态设置的值");
});
//获取值
$("input:eq(4)").click(function () {
console.log($("#txt").val());
});
//设置html
$("input:eq(5)").click(function () {
//$("div").html("我是div的html内容");
$("div").html("<p>我是p元素</p>");
});
//获取html内容
$("input:eq(6)").click(function () {
alert($("div").html());
});
//设置文本内容
$("input:eq(7)").click(function () {
$("div").text("我是动态创建的文本内容");
});
//获取文本内容
$("input:eq(8)").click(function () {
alert($("div").text());
});
});
</script>
</head>
<body>
<input type="button" value="设置属性"/>
<input type="button" value="获取属性"/>
<input type="button" value="移除属性"/>
<input type="button" value="设置值"/>
<input type="button" value="获取值"/>
<input type="button" value="设置html内容"/>
<input type="button" value="获取html内容"/>
<input type="button" value="设置text内容"/>
<input type="button" value="获取text内容"/>
<div>
<input type="text" id="txt"/>
</div>
</body>
</html>
1.5 操作文档
1.5.1 内部插入节点
$("div").append(node);//在div内部的后面追加元素
node.appendTo("div");//把node追加到div
$("div").prepend(node);//在div内部的前面追加元素
node.prependTo($("div"));//把node追加到div内部的前面
1.5.2 外部插入节点
$("div").after(node);//在div后面添加兄弟节点node
$("div").before(node);//在div前面添加兄弟节点node
$("div").insertBefore(node);//把div插入到node前面
$("div").insertAfter(node);//把div追加到node前面
1.5.3 删除节点
$("div").remove();//删除选中的元素,"自杀"
$("div").empty();//清空子元素
$("div").html("");//清空子元素,推荐使用这个方法
1.5.4 复制节点
$("div").clone();//复制节点
1.5.5 包裹节点
$("div").wrap(node);//包裹单个包裹
$("div").wrapAll(node);//包裹 所有包裹在一个node中
1.5.6 替换节点
$("div").replaceWidth(node);//替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function () {
$("button:first").click(function () {
//追加节点
//$("div").append("<p>我是动态创建出来的p元素</p>");
$("div").append($("p"));
});
$("button:eq(1)").click(function () {
//把前面这个元素添加给后面$("div")元素
$("<p>我是动态创建出来的</p>").appendTo($("div"));
});
$("button:eq(2)").click(function () {
$("div").prepend("<p>我是动态创建出来的p元素</p>");
});
$("button:eq(3)").click(function () {
$("<p>我是p元素-prependTo进来的</p>").prependTo($("div"));
});
$("button:eq(4)").click(function () {
//往div后面添加元素,它们是兄弟关系
$("div").after("<p>我是div后面的元素</p>");
});
$("button:eq(5)").click(function () {
//往div前面添加元素,它们是兄弟关系
$("div").before("<p>我是div后面的元素</p>");
});
$("button:eq(6)").click(function () {
//把前面的元素放到后面div元素的前面,它们是兄弟关系
$("<p>我在那?</p>").insertBefore($("div"));
});
$("button:eq(7)").click(function () {
//把前面的元素放到后面div元素的前面,它们是兄弟关系
$("<p>我在那?</p>").insertAfter($("div"));
});
//删除节点元素
$("button:eq(8)").click(function () {
//删除节点
//$("div").remove();
//$(this).remove();
});
//清空节点元素
$("button:eq(9)").click(function () {
//$("div").empty();
$("div").html("");
});
//复制
$("button:eq(10)").click(function () {
$("div").append($("p").clone());
});
//包裹元素
$("button:eq(11)").click(function () {
$("span").wrap($(".divItem"));
});
//包裹所有节点
$("button:eq(12)").click(function () {
$("li").wrapAll($(".divItem"));
});
//替换节点
$("button:eq(13)").click(function () {
$("span").replaceWith($(".divItem"));
});
});
</script>
</head>
<body>
<button>append 追加节点</button>
<button>appendTo 追加节点</button>
<button>prepend 往内部的前面添加节点</button>
<button>prependTo 往内部的前面添加节点</button>
<button>after 往后面添加节点</button>
<button>before 往前面添加节点</button>
<button>insertBefore 往前面添加节点</button>
<button>insertAfter 往后面添加节点</button>
<br>
<button>remove 删除节点</button>
<button>empty 删除节点</button>
<button>复制节点</button>
<button>wrap 包裹节点</button>
<button>wrapAll 包裹所有节点</button>
<button>replaceWidth 替换节点</button>
<div>
<h1>我是标题h1</h1>
</div>
<p>我是div外面的元素,不是动态添加的</p>
<div class="divItem">我是一个大div</div>
<span>我是一个小span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
</body>
</html>
网站导航案例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style: none;}
img{display: block; border:0;}
.wrapper{width: 752px; border:1px solid #ccc;
padding: 10px 0 0 10px;
font-family: arial;
overflow: hidden;
margin:100px auto;
}
.wrapper li{
float: left;
margin:0 10px 10px 0;
width: 178px;
height: 125px;
overflow: hidden;
position: relative;
}
.wrapper li div,.wrapper li p{
width:178px;
height: 25px;
position: absolute;
font-size:14px;
text-align: center;
line-height: 25px;
color:white;
left:0;
bottom:-25px;
_bottom:-26px;
}
.wrapper li div{
background-color:#000;
}
.wrapper li p{
background: url(images/bg.png) no-repeat 5px 0;
}
</style>
<script type="text/javascript" src="../../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
/*$(function(){
var div = $("<div></div>"),speed = 388,$p = $(".wrapper p");
$p.before(div);
$(".wrapper div").fadeTo(0,0.5);
$p.each(function(index,ele){
var y = index * 25;
$(ele).css("background-position","5px -" + y + "px");
});
$(".wrapper li").hover(function(){
$(this).children("div,p").stop().animate({"bottom":0},speed);
},function(){
$(this).children("div,p").stop().animate({"bottom":-26},speed);
});
});*/
$(document).ready(function () {
$(".wrapper li")
.append("<div></div><p>全栈,你值得拥有</p>")
.children("div")
.fadeTo(500,0.5)
.next("p")
.each(function (index,ele) {
$(this).css("background-position","5px -"+(index*25)+"px");
})
.parent()
.mouseenter(function () {
$(this).children("div,p").stop().animate({
"bottom":0
},400);
})
.mouseleave(function () {
$(this).children("div,p").stop().animate({
"bottom":"-25px"
},400);
});
})
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="###"><img src="images/01.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/02.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/03.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/04.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/05.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/06.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/07.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
<li><a href="###"><img src="images/08.jpg" alt=""/></a><p>百度一下,你就知道</p></li>
</ul>
</div>
</body>
</html>