js学习之模拟淘宝案例

最新推荐文章于 2023-02-22 17:09:48 发布

playboy-jordan

最新推荐文章于 2023-02-22 17:09:48 发布

阅读量335

点赞数 1

分类专栏： # JavaScript教程文章标签： javascript css vue.js html5 html

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106973665

版权

JavaScript教程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>模拟淘宝网</title>
		<meta charset="UTF-8"/>
		<!--声明js代码域-->
		<script type="text/javascript">
			//创建函数进行照片的联动和样式设置
				function operInImg(img,src){
					//设置图片的样式
					img.style.border="solid 1px";
					//设置大图的img路径
						//获取大图对象
						var big=document.getElementById("big");
						//设置路径
						big.src="img/"+src;
					
					
				}
			function operOutImg(img){
				img.style.border="";
			}
		</script>
		<!--声明css代码域-->
		<style type="text/css">
		/*设置div的样式*/
			#showdiv{
				width: 370px;
				height: 400px;
				border: solid 1px;
				border-radius: 20px;
			}
		/*设置table的样式*/
			#ta{
				margin: auto;
				margin-top: 10px;	
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<table  width="349px" id="ta">
				<tr height="300px">
					<td colspan="5"><img src="img/show1_big.jpg" id="big"/></td>
				</tr>
				<tr height="60px">
					<td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td>
					<td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>

show1.jpg
在这里插入图片描述
show1_big.jpg

show2.jpg

show2_big.jpg

show3.jpg

show3_big.jpg

show4.jpg

show4_big.jpg

show5.jpg

show5_big.jpg

playboy-jordan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习之模拟淘宝案例

<html> <head> <title>模拟淘宝网</title> <meta charset="UTF-8"/>  <script type="text/javascript"> //创建函数进行照片的联动和样式设置 function operInImg(img,src){ //设置图片的样式 img.style.border="solid
复制链接

扫一扫