基于JQ实现图片提示

最新推荐文章于 2018-09-09 15:48:00 发布

hgx2014

最新推荐文章于 2018-09-09 15:48:00 发布

阅读量498

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页前台-JQ 文章标签： jq

本文链接：https://blog.youkuaiyun.com/hgx2014/article/details/52091939

网页前台-JQ 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的网页特效，当鼠标悬停在图片上时，会显示一个小预览图，并跟随鼠标移动。该效果通过修改图片标题属性并在页面中动态插入带有绝对定位的小图片来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上图这是效果图实现你点击哪个图片下方就会有相应的小图片或者大图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jqku/jquery-2.0.0.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            var x=10,y=20;
            $('img').mouseover(function(e){
                alert(this.alt)
                this.newTitle=this.title
                this.title=''
                //创建div加入进去
                var newdiv="<img id='newdiv1' src='"+this.alt+"' style='width:50px;height:50px;background-color: #5893B7;position: absolute'>"
                $('body').append(newdiv)
                $('#newdiv1').css({
                    'top':(e.pageY+x)+"px",
                    'left':(e.pageX+y)+'px'
                }).show('fast')
            }).mouseout(function(){
                this.title=this.newTitle
                $('#newdiv1').remove()
            }).mousemove(function (e) {
                $('#newdiv1').css({
                    'top':(e.pageY+x)+"px",
                    'left':(e.pageX+y)+'px'
                })
            })
        })
    </script>
    <style>
        p img{float: left;
            margin-left: 10px;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<p><img src="img/apple_1_bigger.jpg" alt="img/apple_1.jpg"></p>
<p><img src="img/apple_2_bigger.jpg" alt="img/apple_2.jpg"></p>
<p><img src="img/apple_3_bigger.jpg" alt="img/apple_3.jpg"></p>
<p><img src="img/apple_4_bigger.jpg" alt="img/apple_4.jpg"></p>
</body>
</html>