jquery 鼠标移到图片弹出浮动层显示大图片例子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动轮播 Jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
 /* 图片放大tooltip */
 #tooltip{
	position:absolute;
	border:1px solid #eeeeee;
	background:#eeeeee;
	padding:1px 1px 1px 1px;
	display:none;
}
.main {
    display: flex;
    justify-content: space-between;
    width: 600px;
    height: 500px;
    margin: 0 auto;
    margin-top:10%;
    border: 1px solid pink;
}
.main div {
    margin-top: 100px;
}      
</style>
</head>
<body>

 
<div class="main">
    <div class="left">
    <a href="img/1.jpg" class="tooltip big-circle" target="_blank" id="">
        <img src="img/1.jpg"  style="max-width:57px; max-height:53px;"/>
    </a>
        <a href="img/1.jpg" target="_blank">查看原图1</a>
    </div>
    <div class="right" style="float: right">
    <a href="img/2.jpg" class="tooltip big-circle" target="_blank" id="">
        <img src="img/2.jpg"  style="max-width:57px; max-height:53px;"/>
    </a>
        <a href="img/2.jpg" target="_blank">查看原图2</a>
    </div>
</div>
<script>
    $(document).ready(function () {
        var x = 0;
        var y = 20;
        $(".big-circle").mouseover(function (e) {
            var tooTip = "<div id='tooTip'><img style='max-width:170px; max-height:330px;margin: 0 auto;' src='" + this.href + "'></img><div>";
            $("body").append(tooTip);
            $("#tooTip").css({ position: "absolute", width: "200px", height: "200px",
                'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
            }).show("fast");
        }).mouseout(function () {
            $("#tooTip").remove();
        }).mousemove(function (e) {
            $("#tooTip").css({ position: "absolute", 'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"});
        });   
    });
</script>
</body>
</html>

 

 

如果对您有帮助记得点赞和收藏喔,这样能让更多的人能被看到喔。

https://www.jb51.net/article/161242.htm

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值