利用JS实现类似淘宝的选中图片放大功能

cheese年糕

于 2019-04-19 20:33:08 发布

阅读量773

点赞数

分类专栏：前端文章标签： JS 图片放大前端 onmouseover

本文链接：https://blog.csdn.net/qq_40933991/article/details/89407653

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

利用JavaScript实现类似淘宝购物界面的选中图片放大功能

功能介绍:当鼠标移动到下方的缩略图后,在上方的框体内放大显示此图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function change(src){
				var datu=document.getElementById("datu");
				datu.src=src;
			}
		</script>
		<style type="text/css">
			#da{
				border: 1px red solid;
				width: 350px;
				height:350px;
				font-size: 50px;
				margin-left: 65px;
			}
			.xiao{
				float: left;
				margin-left: 22px;
			}
		</style>
	</head>
	<body>
		<div id="da">
			<img src="img/上海吉祥混沌.jpg" id="datu" width="350px" />
		</div>
			<img src="img/上海吉祥混沌.jpg"  onmouseover="change(this.src)" class="xiao" style="margin-left: 63px;" />
			<img src="img/减负手作汉堡.jpg"  onmouseover="change(this.src)" class="xiao" />
			<img src="img/好味来酸辣粉冒菜.jpg" onmouseover="change(this.src)" class="xiao" />
			<img src="img/沙县小吃.jpg" onmouseover="change(this.src)" class="xiao" />
	</body>
</html>

cheese年糕

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用JS实现类似淘宝的选中图片放大功能

利用JavaScript实现类似淘宝购物界面的选中图片放大功能功能介绍:当鼠标移动到下方的缩略图后,在上方的框体内放大显示此图像<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text...
复制链接

扫一扫

专栏目录