图片跟随鼠标偏移

最新推荐文章于 2022-08-25 18:41:00 发布

hchu

最新推荐文章于 2022-08-25 18:41:00 发布

阅读量1.4k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78596085

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

图片跟随鼠标的移动而移动

1,鼠标移动到图片上,图片变大

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{border: 1px solid #1173DB;}
            img:hover{border: 1px solid #ADFF2F;}
            #img_big{position: absolute;display: none;}
        </style>

        <script type="text/javascript">
            onload = function(){

                var img = document.getElementsByTagName('img');

                //减1,是因为索引从0开始;
                for(var i = 0;i<img.length-1;i++){

                    img[i].index = (i+1);

                    //显示大图片
                    img[i].onmouseenter = function(){
                        img[img.length-1].style.display = 'block';


                        //跟随鼠标移动,获取大图的src,用索引改变大图
                        img[img.length-1].src = 'img/img/images2/shirt_'+this.index+'_big.jpg';
                    }

                    //隐藏大图片
                    img[i].onmouseleave = function(){
                        img[img.length-1].style.display = 'none';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <img src="img/img/images2/shirt_1.jpg"  />
            <img src="img/img/images2/shirt_2.jpg"  />
            <img src="img/img/images2/shirt_3.jpg" />
            <img src="img/img/images2/shirt_4.jpg" />
            <img src="img/img/images2/shirt_1_big.jpg" id="img_big"  />
        </div>
    </body>
</html>

2,图片跟随鼠标移动

这里有一个问题,就是图片跟随鼠标移动的时候,会一直闪烁

这是因为出现了坐标混乱的情况,解决方案是给坐标轴加1就行了,一般加5以下的数肯定够了

还有就是,加坐标的时候别忘了给大图标加定位

offset
offsetX 在本元素中的x偏移，坐标系原点在自己的左上角
offsetY … y….
offsetTop 本元素在父级元素中的顶部偏移，坐标系原点在父元素左上角
（如果没有使用position指定父元素，默认就是body）
offsetLeft

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{border: 1px solid #1173DB;}
            img:hover{border: 1px solid #ADFF2F;}

            #img_big{position: absolute;display: none;position: absolute;}
        </style>

        <script type="text/javascript">
            onload = function(){

                var img = document.getElementsByTagName('img');

                //减1,是因为索引从0开始;
                for(var i = 0;i<img.length-1;i++){

                    img[i].index = (i+1);

                    //显示大图片
                    img[i].onmouseenter = function(){
                        img[img.length-1].style.display = 'block';


                        //跟随鼠标移动,获取大图的src,用索引改变大图
                        img[img.length-1].src = 'img/img/images2/shirt_'+this.index+'_big.jpg';
                    };


                    //图片跟随鼠标移动
                    img[i].onmousemove = function(evevt){
                        var clientX = event.clientX;
                        var clientY = event.clientY;
                        img[img.length-1].style.left = clientX+1 + 'px';
                        img[img.length-1].style.top = clientY+1 + 'px';

                    }

                    //隐藏大图片
                    img[i].onmouseleave = function(){
                        img[img.length-1].style.display = 'none';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <img src="img/img/images2/shirt_1.jpg"  />
            <img src="img/img/images2/shirt_2.jpg"  />
            <img src="img/img/images2/shirt_3.jpg" />
            <img src="img/img/images2/shirt_4.jpg" />
            <img src="img/img/images2/shirt_1_big.jpg" id="img_big"  />
        </div>
    </body>
</html>