Jquery之张一山、周冬雨图片缩放

最新推荐文章于 2022-03-12 10:05:00 发布

亓勝

最新推荐文章于 2022-03-12 10:05:00 发布

阅读量388

点赞数

分类专栏： WEB 文章标签： JQuery 张一山周冬雨图片缩放属性attr

本文链接：https://blog.csdn.net/love_moon821/article/details/77414630

版权

WEB 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery之张一山、周冬雨图片缩放</title>

<style type="text/css">
    *{padding:0; margin:0; list-style:none; text-decoration:none;}
    .content{ width: 834px; height: 500px; margin: 0 auto; }
    .bigImg img{ width: 834px; height: 450px;}
    .bigImg p{ width: 834px;  line-height: 50px; text-align:center; vertical-align:middle; font-size: 30px;}
    .bigImg p em{ color: red;}
    .smallImg a img{ width: 100px; height: 100px;}
    .smallImg a:hover{ cursor: pointer;}
    </style>
<script type="text/javascript" src=".../jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script>
    $(document).ready(function(e) {
        $("#smallImg a").click(
            function(){
                //获取a标签的href属性值，也可以直接设置属性
                var bigSrc = $(this).attr("href");
                //获取a标签的title属性值
                var bigAlt = $(this).attr("title");
                //把获取的属性设置值给$("#bigImg img")
                $("#bigImg img").attr({
                    src:bigSrc,
                    alt:bigAlt
                });
                //点击a标签后em的文本值相应替换掉
                $("#bigImg p em").html("("+bigAlt+")");
                //return false的作用，防止点击鼠标后图片跳转，大家可以去掉   return false试试效果
                return false;
            }
        );
    });
</script>
</head>

<body>
    <div id="content" class="content">
        <div id="bigImg" class="bigImg">
            <p>张一山、周冬雨图片写真缩放-<em>张一山写真1</em></p>
            <img src="1.png" alt="1.png" />
        </div>
        <div id="smallImg" class="smallImg">
            <a href="1.png" title="张一山写真1" ><img src="1.png" alt="张一山写真1" /></a>
            <a href="2.png" title="张一山写真2" ><img src="2.png" alt="张一山写真2" /></a>
            <a href="3.png" title="张一山写真3" ><img src="3.png" alt="张一山写真3" /></a>
            <a href="4.png" title="张一山写真4" ><img src="4.png" alt="张一山写真4" /></a>
            <a href="5.png" title="张一山写真5" ><img src="5.png" alt="张一山写真5" /></a>
            <a href="6.png" title="周冬雨写真1" ><img src="6.png" alt="周冬雨写真1" /></a>
            <a href="7.png" title="周冬雨写真2" ><img src="7.png" alt="周冬雨写真2" /></a>
            <a href="8.png" title="周冬雨写真3" ><img src="8.png" alt="周冬雨写真3" /></a>
        </div>
    </div>
    
</body>

</html>

亓勝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery之张一山、周冬雨图片缩放

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫