模拟淘宝

最新推荐文章于 2022-08-31 23:14:18 发布

liantaiyou

最新推荐文章于 2022-08-31 23:14:18 发布

阅读量318

点赞数 3

分类专栏： js 文章标签： js 点击小图大图也会出现 js案例 js简单案例简单练习

本文链接：https://blog.csdn.net/liantaiyou/article/details/103213739

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>模拟淘宝网 标题
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模拟淘宝网</title>
    <!-- 声明css代码区域 -->
    <link rel="stylesheet" href="css/public.css">
    <style>
    #showdiv{width:565px; height: 560px;border:1px solid #000;border-radius: 20px;}
    #ta{margin: auto;margin-top:5px;width: 560px;}
    #ta tr.first img{height: 300px;}
    #ta tr.second img{height: 60px;}
    
    </style>
</head>
<body>
    <div id="showdiv">
        <table id="ta">
    <tr class="first">
        <td colspan="5"><img src="images/1big.jpg" alt="" id="big"></td>
        
    </tr>
    <tr class="second">
            <td><img src="images/1.jpg" alt=""  onmouseover="operInImg(this,'1big.jpg')"onmouseout="operOutImg(this)"></td>
            <td><img src="images/2.jpg" alt=""  onmouseover="operInImg(this,'2big.jpg')" onmouseout="operOutImg(this,)"></td>
            <td><img src="images/3.jpg" alt=""  onmouseover="operInImg(this,'3big.jpg')"onmouseout="operOutImg(this,)"></td>
            <td><img src="images/4.jpg" alt=""  onmouseover="operInImg(this,'4big.jpg')"onmouseout="operOutImg(this,)"></td>
            <td><img src="images/5.jpg" alt=""  onmouseover="operInImg(this,'5big.jpg')"onmouseout="operOutImg(this,)"></td>
        
       
    </tr>
</table>
</div>


    
</body>
<!-- 声明js代码区域 -->
<script>
// 创建函数进行照片连动和样式设置
//1.鼠标移到下面的小图片时会有边框出现，移开后会没有
function operInImg(img,src){
// 获取图片对象,设置图片样式
img.style.border="solid 1px"
// 设置大图的img路径
// 获取大图对象
var big=document.getElementById("big")
// 设置路径
big.src="images/"+src;


}

function operOutImg(img){
    img.style.border=""
}

</script>
</html>