zoukankan      html  css  js  c++  java
  • 23 淘宝预览商品模拟练习

    效果先看

    知识要点

    js事件关键字:onmouseover

    代码资源

    点击下载图片包

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>模拟淘宝</title>
    		<style type="text/css">
    			#showdiv{
    				 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{
    				 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>
    

      

     

  • 相关阅读:
    Nginx无缝升级
    ajax form提交的问题
    Ubuntu下pecl_http的安装
    提高PHP的运行效率的方法
    php.ini中文对照
    类似 TP中 eq 标签
    PHP身份证验证程序
    mysql在php中的应用
    如何添加JavaScript到Joomla模板中去
    USACO / Controlling Companies (类似BFS)
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12245551.html
Copyright © 2011-2022 走看看