js 模拟淘宝商品展示

た入场券 2021-07-24 11:00 483阅读 0赞

<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>