网页特效之鼠标展示

标签: onmouseover  网页特效  前端

效果:每当鼠标移动到该图片,展示该图片的大图

效果图:

思路:

给div的padding-top值和大图高度一样,并以大图做该div背景

使用onmouseover事件使鼠标移动到图片上时更换div背景

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标展示</title>
	<style type="text/css">
		* {
			margin: 0; 
			padding: 0;
		}
		img{
			border:0;
			vertical-align:middle;
		}
		ul {
			list-style: none;
		}
		#box {
			width:360px;
			height: 70px;
			padding-top: 360px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background: url(images/01big.jpg);
		}
		#box ul li {
			float: left;
			cursor: pointer;
			border-left: 2px solid #fff;
		}
		li{
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li id="li01"><img src="images/01.jpg" alt=""></li>
			<li id="li02"><img src="images/02.jpg" alt=""></li>
			<li id="li03"><img src="images/03.jpg" alt=""></li>
			<li id="li04"><img src="images/04.jpg" alt=""></li>
			<li id="li05"><img src="images/05.jpg" alt=""></li>
		</ul>
	</div>
</body>
<script type="text/javascript">
 	var box = document.getElementById('box');
 	console.log(box);
 	function fn(li_id,bg_num){
 		var obj = document.getElementById(li_id);
 		console.log(obj);
 		obj.onmouseover = function(){
 			box.style.backgroundImage = bg_num;
 		}
 	}
 	fn('li01','url(images/01big.jpg)');
 	fn('li02','url(images/02big.jpg)');
 	fn('li03','url(images/03big.jpg)');
 	fn('li04','url(images/04big.jpg)');
 	fn('li05','url(images/05big.jpg)');
</script>
</html>

使用for循环改进后的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标展示</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		img{
			border:0;
			vertical-align:middle;
		}
		ul {
			list-style: none;
		}
		#box {
			width:360px;
			height: 70px;
			padding-top: 360px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background: url(images/01big.jpg);
		}
		#box ul li {
			float: left;
			cursor: pointer;
			border-left: 2px solid #fff;
		}
		li{
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/01.jpg" alt=""></li>
			<li><img src="images/02.jpg" alt=""></li>
			<li><img src="images/03.jpg" alt=""></li>
			<li><img src="images/04.jpg" alt=""></li>
			<li><img src="images/05.jpg" alt=""></li>
		</ul>
	</div>
</body>
<script type="text/javascript">
 	var box = document.getElementById('box');
	var lis = document.getElementsByTagName('li');
 	function fn(li_id,bg_num){
 		var obj = document.getElementById(li_id);
 		// console.log(obj);
 		obj.onmouseover = function(){
 			box.style.backgroundImage = bg_num;
 		}
 	}
	for(var i=1;i<=lis.length;i++){
		// console.log(i);
		lis[i-1].id = 'li0'+i;//给各项li添加id
		fn('li0'+i,'url(images/0'+i+'big.jpg)');
	}
</script>
</html>

具体效果图可见:鼠标展示

版权声明:本文为lyxuefeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lyxuefeng/article/details/80708714

智能推荐

机器学习中K-means聚类算法的原理及实现(Python)

背景知识 K-means聚类算法是一种流行于数据挖掘领域的无监督学习算法。K-means聚类算法的目的是:把已知的 n个点划分到k个聚类中,使得每个点都属于离它最近的点(聚类中心)对应的聚类。 在完成该算法的过程中,找到k个聚类中心是关键。 算法介绍 我们先介绍几个基本概念: 簇:数据点的集合,每一个簇中的对象是相似的。 质心:簇中所有点的中心(由计算所有点坐标的均值可得)。 比如在这幅图中,我们...

接口回调基础理解

接口回调听起来好像很厉害的样子,但其实只要能够搞清楚代码的执行过程,多看几遍,并且认真思考,再加上勤奋的练习,熟练掌握简单的接口回调并不是难题,接下来,我会用一个简单的例子,来带大家一起分析代码的执行过程,以及这样写的好处,以及这样写的思路。 我们知道recyclerView是没有自带点击事件的,所以这里我们就拿给recyclerView添加点击事件为例。 ok 我们做好了一个简单的recycer...

Mac下的myeclipse安装

1.首先要安装jdk跟jre 2.安装过程中可能会遇到您需要安装旧 Java SE 6 运行环境才能打开此 Java 应用程序的提示     解决办法就是安装ava for os x 2015-001.,这里不要点系统给你提示的界面,根本没法下载 我上传的链接,可以直接下载:链接: https://pan.baidu.com/s/1qYbT6os 密码: x...

30分钟实战树莓派连接到微软云Azure IoT Hub并将数据可视化

更多内容,关注公众号: 树莓派是很多动手达人必备的小玩具,本节内容,让我们拿出树莓派,在30分钟内,将树莓派连接到微软云Azure的IoT Hub,然后将温湿度曲线可视化。 本实战完整视频: 树莓派连接到Azure IoT Hub 并用时序见解展示数据 本节内容中,树莓派发送的数据是模拟出来的,并没有真实的连接到传感器,您可以选购不同的传感器来采集真实的环境信息。 Azure IoT Hub 为我...

spring cloud gateway 整合ribbon、nacos discovery实现负载均衡源码简析

1 spring cloud gateway 负载均衡入口 spring cloud gateway 使用 LoadBalancerClientFilter 来实现载均衡的功能,该过滤器通过LoadBalancerClient.choose(ServerWebExchange exchange)方法来获取目标实例。 LoadBalancerClient 为spring-cloud-commons包...

猜你喜欢

VUE快速搭建项目

作为一个前端小辣鸡 今天在网上找到了 一个 快速 无脑式搭建vue项目的方式 分享一下 我们采用图形界面创建项目。通过 vue ui 命令启动 vue cli service 后,访问 http://localhost:8000/project/create 可以直接进入项目创建流程。 步骤中有些地方值得一提 详情:包管理器指定 npm,后续在npm 配置文件(.npmrc)中可手动指定国内镜像源...

2017-8-10 Struts2学习笔记二

一、web.xml文件的编写 1. 由于struts2是用过滤器拦截请求的,所以需要在web.xml文件中配置一个过滤器。 2. 这个过滤器的名字叫StrutsPrepareAndExecuteFilter,中文名曰struts准备和执行过滤器,就是这个过滤器拦截我们在地址栏的请求。 3. 查找这个过滤器,将它的全路径写在filter-class标签中,eclipse可以使用Shift+Ctrl+...

Windows Terminal配置Git

文章目录 Windows Terminal配置Git 效果 下载和安装 配置Windows Terminal 配置其它命令行 Windows Terminal配置Git 效果 先上效果图: 下载和安装 Windows Terminal是微软开发的面向命令行用户的全新,现代,功能丰富,高效的终端应用程序。 它包括Windows命令行社区最常请求的许多功能,包括对选项卡,富文本,全球化,可配置性,主题...

CW MCU v11.1学习笔记1

说明:通过处理器专家创建芯片为MC9S08DZ60的工程,按键控制LED 一、CW11.1软件界面布局 1、双击桌面图标,打开软件,设置工作空间 软件主界面 调试界面 处理器专家界面 有时经常调整(删除)面板布局,如果想恢复布局,可在Window工具栏下的Reset Perspective选项来复位面板布局 二、新建工程 1、在C/C++模式下,在Commander面板下点击New MCU pro...

栈-综合应用-中缀表达式转后缀表达式

综合应用 使用栈完成一个计算表达式的结果 输入:2 * 3 - 4 / 5 * 0.2 => 0.08 思路 使用index -> 2 (第一个为止),数字放入数栈,符号放入符号栈,符号栈为空,直接放入。 遇到第二个运算符,与符号栈中的符号进行运算符优先级比较。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvhtZGbo-1601271684334)...