23 淘宝预览商品模拟练习

Posted scorpicat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了23 淘宝预览商品模拟练习相关的知识,希望对你有一定的参考价值。

效果先看

 

技术图片

知识要点

js事件关键字:onmouseover

代码资源

点击下载图片包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟淘宝</title>
		<style type="text/css">
			#showdiv{
				width: 400px;
				height: 480px;
			}
			/*设置table的样式*/
			#ta{
				margin: auto;
			}
			table tr td{
				text-align: center;
				border: 2px solid transparent;
			}
			table tr:nth-child(2) td:hover{
				border: red 2px solid;
			}
			table tr:first-child td img{
				width: 400px;
				height: 400px;
			}
		</style>
		<script type="text/javascript">
			//切换大图
		function doChange(str){
			var bigImg = document.getElementById("big");
			bigImg.src="imgs/taobao/"+str;
		}	
		</script>
	</head>
	<body>
		<div id="showdiv">
			<table border="1px" width="400px" height="480px" id="ta">
				<tr height="300px">
					<td colspan="5"><img src="imgs/taobao/01-big.png" id="big"></td>
				</tr>
				<tr height="60px">
					<td onmouseover="doChange(‘01-big.png‘)"><img src="imgs/taobao/01-small.webp" ></td>
					<td onmouseover="doChange(‘02-big.png‘)"><img src="imgs/taobao/02-small.webp" ></td>
					<td onmouseover="doChange(‘03-big.png‘)"><img src="imgs/taobao/03-small.webp" ></td>
					<td onmouseover="doChange(‘04-big.png‘)"><img src="imgs/taobao/04-small.webp" ></td>
					<td onmouseover="doChange(‘05-big.png‘)"><img src="imgs/taobao/05-small.webp" ></td>
				</tr>
			</table>
		</div>
	</body>
</html>

  

 

以上是关于23 淘宝预览商品模拟练习的主要内容,如果未能解决你的问题,请参考以下文章

python -- 使用selenium模拟登录淘宝,爬取商品信息

jquery模拟淘宝购物车

使用Selenium模拟浏览器抓取淘宝商品美食信息

爬虫实战三:爬淘宝商品信息

使用Selenium模拟浏览器抓取淘宝商品美食信息

爬虫实战--使用Selenium模拟浏览器抓取淘宝商品美食信息