Jquery鼠标放上去图片放大

最新推荐文章于 2022-05-20 18:05:50 发布

我心V飞翔

最新推荐文章于 2022-05-20 18:05:50 发布

阅读量2.5k

点赞数 1

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/ful1021/article/details/38562827

版权

web前端专栏收录该内容

40 篇文章

订阅专栏

效果图：

存放图片及上传参考

点击新页面打开： http://blog.youkuaiyun.com/ful1021/article/details/38555915

HTML代码

<a href="/Upload/Jaeyi/308_20140722102828.JPG" class="tooltip">
   <img src="/Upload/Jaeyi/Small/308_20140722102828.JPG" height="40px" alt="输液单" />
</a>

JS代码

    <script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function (e) {
                this.myTitle = this.title;
                this.title = "";
                var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
                var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
                $("body").append(tooltip); //把它追加到文档中
                $("#tooltip")
			.css({
			    "top": (e.pageY + y) + "px",
			    "left": (e.pageX + x) + "px"
			}).show("fast");   //设置x坐标和y坐标，并且显示
            }).mouseout(function () {
                this.title = this.myTitle;
                $("#tooltip").remove();  //移除
            }).mousemove(function (e) {
                $("#tooltip")
			.css({
			    "top": (e.pageY + y) + "px",
			    "left": (e.pageX + x) + "px"
			});
            });
        })
    </script>