鼠标悬浮给图片加边框,适合大型展示

为图片添加边框的HTML、JS与CSS教程

最新推荐文章于 2024-07-25 11:06:07 发布

原创最新推荐文章于 2024-07-25 11:06:07 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

js 同时被 2 个专栏收录

45 篇文章

订阅专栏

jquery

33 篇文章

订阅专栏

本文将指导您如何使用HTML、JS和CSS为网页上的图片添加动态边框效果，通过实例演示实现过程并提供相关代码。

鼠标悬浮给图片加边框

html代码

 <div class="T-s-l fl">
        <a href="" class="a1">
            <img src="images/11.jpg" width="234" height="368" />
        </a><a href="" class="a2">
            <img src="images/11.jpg" />
        </a><a href="" class="a3">
            <img src="images/11.jpg" />
        </a>
    </div>

js代码

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.insetborder.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
            //border
        $(".T-s-l a.a1").borderEffect();
        $(".a1").borderEffect();
        $(".T-s-l a.a2").borderEffect({ borderColor: '#e80484' });
        $(".T-s-l a.a3").borderEffect({ borderColor: '#7b7b7b', speed: 300, borderWidth: 10 });
     });
</script>

css代码

.T-s-l a{ background: url(images/download.png) no-repeat -10px 20px #fff; }
.T-s-l{ width: 952px; overflow: hidden; }
.T-s-l a{ float: left; width: 234px; height: 368px; margin: 0 19px 17px 0; font-size: 0; overflow: hidden;}