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 淘宝预览商品模拟练习的主要内容，如果未能解决你的问题，请参考以下文章