商品列表——图片、文字点击/悬浮切换展示

电玩女神 2023-06-12 15:26 60阅读 0赞

## 商品列表——图片、文字点击/悬浮切换展示 ##

效果图如下：  
（该图为原创，请勿盗用！）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]  
整体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title>图片-展示</title>
    		<style type="text/css">
    			* { 
    				margin: 0;
    				padding: 0;
    				text-align: center;
    			}
    			body { 
    				
    			}
    			#bbox { 
    				width: 900px;
    				height: 400px;
    				border: 1px solid red;
    				margin: 100px auto;
    			}
    			img { 
    				width: 180px;
    				height: 60px;
    			}
    			#bbox #boxl { 
    				float: left;
    				width: 194px;
    				height: 100px;
    				margin: 150px 10px;
    				border: 1px solid red;
    			}
    			#boxl #boxl1 { 
    				text-align: center;
    				margin: 20px 0;
    			}
    			#bbox #boxr { 
    				float: left;
    				width: 650px;
    				height: 360px;
    				margin: 20px 0;
    				border: 1px solid red;
    			}
    			#boxr #box { 
    				float: left;
    				width: 194px;
    				height: 60px;
    				border: 1px solid red;
    				margin: 28px 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="bbox">
    			<div id="boxl">
    				<img src="img/1.png" id="boxl1" />
    			</div>
    			<div id="boxr">
    			<div id="box"><img src="img/1.png" alt="" id="box1" onmousemove="setqh(1)"/></div>
    			<div id="box"><img src="img/2.png" alt="" id="box2" onmousemove="setqh(2)"/></div>
    			<div id="box"><img src="img/3.png" alt="" id="box3" onclick="setqh(3)"/></div>
    			<div id="box"><img src="img/4.png" alt="" id="box4" onclick="setqh(4)"/></div>
    			<div id="box"><img src="img/5.png" alt="" id="box5" onclick="setqh(5)"/></div>
    			<div id="box"><img src="img/6.png" alt="" id="box6" onclick="setqh(6)"/></div>
    			<div id="box"><img src="img/7.png" alt="" id="box7" onmousemove="setqh(7)"/></div>
    			<div id="box"><img src="img/8.png" alt="" id="box8" onmousemove="setqh(8)"/></div>
    			<div id="box"><img src="img/9.png" alt="" id="box8" onmousemove="setqh(9)"/></div>
    			</div>
    		</div>
    		<script type="text/javascript">
    			function setqh(a) { 
    				var obj = document.getElementById("boxl1");
    				obj.src = "img/"+a+".png";
    			}
    		</script>
    	</body>
    </html>

说明：οnmοusemοve="setqh()"表示悬浮；οnclick="setqh()"表示点击  
技术代码十分简单：

原理：通过对展示区标签id的调用，在对应到相应的属性即可，该效果中既有悬浮触发事件，也有点击触发事件。

希望对新手有所帮助，谢谢！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113134647708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy,size_16,color_FFFFFF,t_70