js 模拟淘宝商品展示

最新推荐文章于 2022-12-26 13:19:46 发布

神奇大叔

最新推荐文章于 2022-12-26 13:19:46 发布

阅读量1.8k

点赞数 1

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102961742

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏


<html>
	<head>
		<meta charset="utf-8">
		<title>模拟淘宝</title>
		<style type="text/css">
			#showdiv{
				width:380px;
				height:390px;
				border:solid 1px orange;
				border-radius:20px;
				margin:auto;
				background-color: orange ;
			}
			
			#ta{
				margin:auto;
				margin-top:3px;
			}
			img:hover{
				border:solid 10px orangered;
				transition: 0.5s;
			}
			
		</style>
		<script type="text/javascript">
			//创建照片联动和样式
				function operInImg(img,src){
					//获取图片对象
					img.style.border="solid 2px yellow";
					//获取大图对象
					var big=document.getElementById("big");
					big.src="img/"+src;
					
				}
				function operOutImg(img){
					img.style.border="";
				}
			
		</script>
	</head>
	<body>
		<div id="showdiv">
			<table width=270px height=360px id="ta">
				<tr height="300px">
					<td colspan="5"><img src="img/show1_big.jpg" alt="" id="big"/></td>
					

				</tr>
				<tr height="60px">
					<td><img src="img/show1.jpg" alt="" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show2.jpg" alt=""  onmouseover= "operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show3.jpg" alt=""  onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show4.jpg" alt="" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show5.jpg" alt="" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>

神奇大叔

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js 模拟淘宝商品展示

<html> <head> <meta charset="utf-8"> <title>模拟淘宝</title> <style type="text/css"> #showdiv{ width:380px; height:390px; border:solid 1px orange...
复制链接

扫一扫