360导航基本效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360导航基本效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//console.log("你好阳光")
// 给所有的li里面都添加下面的一个现实标题内容的div单独做不透明的背景，p是放元素标题及logo，它的不透明度不改变
// 第一步：给下面的li动态添加元素
var element=$(".wrap li")
.append("<div class='logobg'></div><p>显示的文字</p>")//1:在li元素里面的后面添加div元素和p元素,注意样式这里的单双引号
.children(".logobg")
// 2:添加的div 和 p 元素中，div的颜色要改变不透明度，但是文字和图标的颜色不改变不透明度，所以单独写一个div，div单独一个背景色 children("div,p")只要div元素如上
.fadeTo('400', 0.5)
//3:div颜色渐变到0.5
.next("p")
//4：当前处理的元素是div，要改变的是p里面的背景图和文字，所以.next去取div后面的元素,再遍历每一个p元素，每个p元素里的图片和文字都发生改变
.each(function(index,element){//这里遍历的是每一个p元素
// console.log(index);
// console.log(element);
//
// 5:创建对象，这里的this指向当前对象，element也是指向当前对象的
// console.log(this==element)//true 结果是true，这里的this和element都是指向当前对象的
// console.log($(this)===$(element))//false
//结果是false $(this)和$(element)转换成了jquery对象，
//创建一个新的对象 new()做了三件事：1：调用构造函数2：创建对象3：分配内存，开辟了一个内存空间
//创建的两个对象指向的是内存中两个不同的空间位置，所以结果是false
// 6：这里改变p元素的背景图片，每个图片之间的像素差25px，使用图片精灵
// $(element).css({"background-position":"5px -25px"}) 这里的-25是变量值
// $(this).css({"background-position":"5px -25*'+index+'+px"})将数值转换成变量这里添加双引号“++”
$(element).css({"background-position":"5px -"+25*index+"px"})
// 7:改变p元素里面的文字内容
.html("你好阳光")

})
// 8:当前处理的是p元素，要将鼠标放在li上面触发事件，所以要在p这里向上找li的元素
.parent()
// 9:获取所有的li元素
.mouseenter(function(){
$(this).children("div,p").stop().animate({"bottom":"0px"},400)

})
.mouseleave(function(){
$(this).children("div,p").stop().animate({"bottom":"-25px"},400)

})

console.log(element)
// console.log(element.children())

// 事件添加在li元素上面，div和p标签移动效果

// $(".wrap li").mouseenter(function(){
// $(this).children("div,p").stop().animate({
// "bottom": "0px"
// },300)
// })
// $(".wrap li").mouseleave(function(){
// $(this).children("div,p").stop().animate({
// "bottom":"-25px"
// },300)
// })

})
</script>
</head>
<body>
<div class="wrap">
<ul>

<li>
<a href="javascript:;">
<img src="img/01.jpg">
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/02.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/03.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/04.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/05.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/06.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/07.jpg" >
</a>

</li>
<li>
<a href="javascript:;">
<img src="img/08.jpg" >
</a>

</li>

<div class="clear"></div>

</ul>

</div>

</body>
</html>

猜你喜欢