<!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*8>a{a链接里面的内容>img} 再加上tab键-->
<li>
<a href="javascript:;">
<img src="img/01.jpg">
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/02.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/03.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/04.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/05.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/06.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/07.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/08.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<div class="clear"></div>
</ul>
</div>
</body>
</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*8>a{a链接里面的内容>img} 再加上tab键-->
<li>
<a href="javascript:;">
<img src="img/01.jpg">
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/02.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/03.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/04.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/05.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/06.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/07.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<li>
<a href="javascript:;">
<img src="img/08.jpg" >
</a>
<!-- <div class="logobg"></div><p>显示的文字</p> -->
</li>
<div class="clear"></div>
</ul>
</div>
</body>
</html>