图片动态边框

最新推荐文章于 2022-05-09 18:42:42 发布

alon@wen

最新推荐文章于 2022-05-09 18:42:42 发布

阅读量17

点赞数

本文链接：https://blog.csdn.net/wenlianlong/article/details/133010505

版权

鼠标指向图片时，图片动态加载边框效果如下

效果：

页面源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>javascript指向加边框</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <style>
        .bdctrl ul li
        {
            position: relative;
            background-color: #ff4f00;
            width: 138px;
            display: inline;
            float: left;
            height: 82px;
        }
        .bdctrl ul li a
        {
            clip: rect(0px 138px 82px 0px);
            position: absolute;
            display: block;
        }
        .bdctrl ul li img
        {
            width: 138px;
            height: 82px;
            border: 0;
        }
    </style>
</head>
<body>
    <div id="bdctrl" class="bdctrl">
        <ul>
            <li><a>
                <img src="images/1.jpg"></a> </li>
        </ul>
    </div>
    <br />
    <div style="clear:both;"></div>
    <div id="Div1" class="bdctrl">
        <ul>
            <li><a>
                <img src="images/2.jpg"></a> </li>
        </ul>
    </div>
      <br />
    <div style="clear:both;"></div>
    <div id="Div2" class="bdctrl">
        <ul>
            <li><a>
                <img src="images/3.jpg"></a> </li>
        </ul>
    </div>

    <script type="text/javascript">       
          $(function(){
                $(".bdctrl").each(function(i){
                  loadname(133,77,this);
                });
            });
         function loadname(w,h,obj2) {
            var ul, li;
            var ulc = obj2.getElementsByTagName('ul');

            for (var n = 0, ulmax = ulc.length; n < ulmax; n++) {
                ul = obj2.getElementsByTagName('ul')[n];
                li = ul.getElementsByTagName('li');

                for (var i = 0, max = li.length; i < max; i++) {
                    li[i].a = li[i].getElementsByTagName('a')[0];
                    li[i].img = li[i].getElementsByTagName('img')[0];
                    li[i].no = 5;
                    li[i].timer = null;
                    if (li[i].a != null) {
                        li[i].onmouseover = function() { ani(this, true,w,h); }
                        li[i].onmouseout = function() { ani(this, false,w,h); }
                    }
                }
            }
            function ani(obj, f,w,h) {
                clearTimeout(obj.timer);
                function act() {
                    obj.a.style.clip = 'rect(' + (5 - obj.no) + 'px ' + (w + obj.no) + 'px ' + (h + obj.no) + 'px ' + (5 - obj.no) + 'px)';
                    if (f && obj.no > 0) {
                        obj.no--;
                        obj.timer = setTimeout(act, 20);
                    } else if (!f && obj.no < 5) {
                        obj.no++;
                        obj.timer = setTimeout(act, 20);
                    }
                }
                act();
            }
        }
    </script>

</body>
</html>

源文件下载地址

alon@wen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片动态边框

鼠标指向图片时，图片动态加载边框效果如下效果：.bdctrl ul li { position: relative; background-color: rgba(255, 79, 0, 1); width: 138px; display: inline; float: left; height: 82px }.bdctrl ul li a { clip: rect(0, 138px, 8...
复制链接

扫一扫