【fgm.cc练习2-11】鼠标移过，改变图片路径

最新推荐文章于 2021-03-26 16:34:17 发布

denguing

最新推荐文章于 2021-03-26 16:34:17 发布

阅读量177

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript

本文链接：https://blog.csdn.net/DGT4720/article/details/103065950

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现鼠标移过小图片时，大图片显示相应内容的交互效果。通过实例练习，强调了实践在学习过程中的重要性，提倡不断尝试和修改以掌握技术。

摘要由CSDN通过智能技术生成

练习地址：http://www.fgm.cc/learn/lesson2/11.html
在这里插入图片描述
实现效果：鼠标移到小图片上，大图片改变为相应的小图片。
实现思路：跟上篇套路一样，这里主要用到flex布局。
代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>鼠标移过，改变图片路径</title>
	<link rel="stylesheet" type="text/css" href="11_changePath.css">
</head>
<body>
	<div id="container">
		<div id="show"></div>
		<div id="col"></div>
		<div id="row"></div>
	</div>
	<script type="text/javascript" src="11_changePath.js"></script>
</body>
</html>

CSS

html, body {
	background: black;
}
#container {
	width: 215px;
	height: 275px;
	margin: 0 auto;
	border-radius: 5%;
	background: white;
	padding: 10px;
	padding-bottom: 5px;
}
#show {
	width: 160px;
	height: 160px;
	background: url("../../photos/1.jpg");
	background-size: 100%;
}
#col {
	position: relative;
	top: -160px;
	right: -165px;
	display: flex;
	flex-direction: column;
}
#row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 170px;
	position: relative;
	top: -270px;
}
.col, .row {
	width: 50px;
	height: 50px;
	margin-bottom: 5px;
}
.col {
	/*border: 1px solid black;*/
}
.row {
	/*border: 1px solid black;*/
	margin-right: 5px;
}

JavaScript

window.onload = function() {
	var col = document.getElementById("col");
	var row = document.getElementById("row");
	var show = document.getElementById("show");
	for(var i=0; i<5; i++){
		var photo = document.createElement("div");
		col.appendChild(photo);
		photo.className = "col";
		photo.style.background = "url(../../photos/"+(i+1)+".jpg";
		photo.style.backgroundSize = "100%";
		photo.onmouseover = (function(n) {
			return function() {
				show.style.background = "url(../../photos/"+(n+1)+".jpg";
				show.style.backgroundSize = "100%";
			}
		})(i);
	}
	for(var i=0; i<6; i++){
		var photo = document.createElement("div");
		row.appendChild(photo);
		photo.className = "row";
		photo.style.background = "url(../../photos/"+(i+6)+".jpg";
		photo.style.backgroundSize = "100%";
		photo.onmouseover = (function(n) {
			return function() {
				show.style.background = "url(../../photos/"+(n+6)+".jpg";
				show.style.backgroundSize = "100%";
			}
		})(i);
	}
}

其实还有一个，实践出真知。只有不断的修改达到所要的样式，才知道某个东西具体是怎么用的（我也知道看书很枯燥呜呜…）
最后还有一个啦！我的千玺好看吗哈哈哈哈哈哈哈哈…这系列练习要用多张图片的时候懒得找，就直接用电脑里的handsome千玺了嘻嘻。

denguing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【fgm.cc练习2-11】鼠标移过，改变图片路径

练习地址：http://www.fgm.cc/learn/lesson2/11.html实现效果：鼠标移到小图片上，大图片改变为相应的小图片。实现思路：跟上篇套路一样，这里主要用到flex布局。代码如下：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">...
复制链接

扫一扫

专栏目录