javascript实现鼠标经过显示隐藏内容

javascript实现鼠标经过显示隐藏内容

实现思路：

利用数组对象的方式，把数据放入数组的对象中，动态加载到一个div中，再通过改变div的定位实现在不同的地方显示不同的内容。

技术栈：

forEach();

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

Array.from(oLi) 如果是伪数组，将会转成数组在赋给新数组。

item.offsetLeft、item.offsetTop。

offset翻译过来就是偏移量 。

我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置。

clearInterval(timer);

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

setTimeout();

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

onmouseout、onmouseover 

实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件。

html:

		<div id="app">
			<ul id="list" class="clearfix">

			</ul>
			<div class="title" style="left: 173px; top:206px;">
				<!-- h3.appname+p.info+span.count+a.btn -->
				 <h3 class="appname"></h3>
				 <p class="info"></p>
				 <span class="count"></span><a href="" class="btn">下载到手机</a>
			</div>
		</div>

css：

*{
	margin: 0;
	padding: 0;
}
li{
	list-style-type: none;
}
.clearfix::after{
	content: '';
	display: block;
	clear: both;
}
#app{
	width: 600px;
	margin: 100px auto 0;
/* 	outline: 1px dashed red; */
}
#app li{
	width: 96px;
	height: 106px;
	/* 行高 */
	line-height: 106px;
	float: left;
	margin: 0 50px 40px 0;
	outline: 1px dashed red;
	/* 字体大小设置为0 */
	font-size: 0;
	/* 相对定位 (子绝 父相)*/
	position: relative;
}
#app li img{
	width: 100%;
	height: 96px;
	cursor: pointer;
	vertical-align: middle;
}
.title{
	display: none;
	width: 250px;
	padding: 20px;
	border-radius: 5px;
	background-color: #fff;
	/* 滤镜（投影） */
	filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
	/* 绝对定位 */
	position: absolute;
}
/* 绘制一个三角形 */
.title::before{
	content: '';
	width: 0;
	height: 0;
/* 	border-right: 8px solid red;
	border-left: 8px solid blue; */
	
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	border-bottom: 10px solid #fff;
	/* outline: 1px dashed green; */
	/* 绝对定位 */
	position: absolute;
	top: -10px;
	left: 30px;
}
.appname{
	margin-bottom: 0.5em;
}
.info{
	color: #666;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
.count{
	color: #999;
	font-size: 0.75rem;
	margin-bottom: 0.5em;
}
.btn{
	/* 将行元素转成块元素 */
	display: block;
	background-color: #eee;
	border-radius: 3px;
	border: 1px solid #bbb;
	color: #666;
	font-size: 0.875rem;
	padding: 4px 8px;
	margin-bottom: 0.5em;
	text-align: center;
	text-decoration: none;
}

javascript：

// 抓取元素(获取对象)
var oUl = document.querySelector('#list');
var oLi = oUl.getElementsByTagName('li');
var oDiv = document.querySelector('.title');
var oH3 = oDiv.querySelector('.appname');
var oP = oDiv.querySelector('.info');
var oSpan = oDiv.querySelector('.count');
 
var timer = null;
 
console.log(oUl);
console.log(oLi);
console.log(oDiv);
console.log(oH3);
console.log(oP);
console.log(oSpan);

// 初始化数据结构
// (把我们造的数据，初始化显示在页面中)
var data = [
	{
		url: "images/1.png",
		title: "墨迹天气",
		content: "全球约5亿人在使用的天气APP，支持196个国家20多万个城市及地区的天气查询，准确定位及时推送，分钟级、公里级天气预报，实时监测阴晴雨雪。",
		count: "下载5.6亿次"
	},
	{
		url: "images/2.png",
		title: '最美天气',
		content: '始于颜值，陷于精准，忠于陪伴，醉于懂你。最美天气不忘初心砥砺前行，不仅保持最初的精美与颜值，通过不断的升级我们成为了更加懂你的天气预报。',
		count: '下载5.8亿次'
	},
	{
		url: "images/3.png",
		title: '365日历万年历农',
		content: '从2008年到现在9年时间，我们专注于时间管理，励志成为您最好的生活助手，超2.5亿用户的一致选择。',
		count: '下载2.6亿次'
	},
	{
		url: "images/4.png",
		title: '滴滴出行',
		content: '【近3亿用户的选择】2012年诞生的滴滴现已成为广受用户欢迎的城市出行应用！覆盖全国超过400个城市，乘客叫车成功率94%以上！',
		count: '下载10.6亿次'
	},
	{
		url: "images/5.png",
		title: '大众点评',
		content: '-【大众点评黑珍珠餐厅指南】精选中国味蕾，探寻美味餐厅，盛大发布。<br>-【贺岁片放肆看】春节遇上情人节，我想陪你看电影~猜影片领礼券，最高可得35元！',
		count: '下载8.6亿次'
	},
	{
		url: "images/6.png",
		title: '58同城 -租房招',
		content: '人人信赖的生活服务平台，海量生活信息免费查询、发布。 <br>真实、高效、免费，让您生活更简单！',
		count: '下载9.3亿次'
	},
	{
		url: "images/7.png",
		title: '百度糯米',
		content: '√精选排行：快速发现优质吃喝玩乐商家<br>√搜索升级：新鲜商圈信息，精选玩乐内容，随时随地搜索get<br>√抽奖：iphone大奖抽不停 ',
		count: '下载8.2亿次'
	},
	{
		url: "images/8.png",
		title: '天气通',
		content: '专业贴心的天气APP，3.8亿用户的选择，采用权威多数据源授权信息，智能纠错，国内3000多个城市与700多个景区全覆盖的天气预报和实时天气预警信息。各种天气状况从容应对，帮你做好生活决策，为你出行保驾护航。',
		count: '下载2.1亿次'
	},
	{
		url: "images/9.png",
		title: '饿了么',
		content: '饿了么，专业的本地生活服务平台！<br>【好的都要 随叫随到】品质美食、水果生鲜、鲜花蛋糕、超市百货，30分钟送达！<br>【新人福利】外卖订餐，新用户领50元礼包，更多红包等你拿！',
		count: '下载12.6亿次'
	}
];

// 遍历
// 将数组对象data里的每一条数据中的url属性上的值，
// 赋值显示在 li中的img的src上。
// 也就是说 让图显示在每一个列表项中
// 将数据 渲染到 指定的dom节点中 显示出来
data.forEach(function(item){
	oUl.innerHTML += `<li><img src='${item.url}' /></li>`;
})

// 把类数组对象 转换成 数组
console.log(Array.from(oLi));

// 遍历（逐一操作每一个li）
Array.from(oLi).forEach(function(item,index){
	
	// 鼠标移入到当前li元素上的时候，我们要做的事情是：
	item.onmouseover = function(){
		// 4.清除计时器
		clearInterval(timer);
		// 1.我们希望 类名叫title的div盒子显示出来
		oDiv.style.display = 'block';
		// 2.我们希望 类名叫title的div盒子 显示在哪里
		// 坐标位置 设置
		oDiv.style.left = item.offsetLeft + 10 + 'px';
		oDiv.style.top = item.offsetTop + 120 + 'px';
		// 3.让data这个数组中的每一条上的数据 显示在指定的标签里
		oH3.innerHTML = data[index].title;
		oP.innerHTML = data[index].content;
		oSpan.innerHTML = data[index].count;
		
	}

	// 鼠标移出当前li元素的时候，我们要做的事情是：
	item.onmouseout = function(){
		// 1.我们希望 过0.5s后，这个类名叫title的div盒子 隐藏起来
		timer = setTimeout(function(){
			// (1)让类名叫title的div盒子 隐藏起来
			oDiv.style.display = 'none';
		},500)
		
	}
	
	// 鼠标移入到类名叫title的div盒子 上，我们需要清除计时器
	oDiv.onmouseover = function(){
		clearInterval(timer);
	}
	
	//  鼠标移出  这个 类名叫title的div盒子 时候，
	// 我们让这个盒子 过0.5s隐藏起来
	oDiv.onmouseout = function(){
		 timer = setTimeout(function(){
			 // console.log(this);//这里不能直接写this，因为这个this指向的是window对象
			 oDiv.style.display = 'none';
		 },1000)
	}
	
	
	// oDiv.onmouseout = function(){
	// 	 timer = setTimeout(()=>{
	// 		 this.style.display = 'none';
	// 	 },1000)
	// }
	
	
	
	
	
	
})