首页 > Web开发 > 详细

jQuery浮窗图片到页面中间的代码

时间:2019-07-04 11:25:08      阅读:193      评论:0      收藏:0      [点我收藏+]

jQuery浮窗图片到页面中间的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery漂浮广告代码-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="imgDiv" style="position:absolute;left:50px;top:60px;">
    <div id="a" style="width:40px;height:40px;position:absolute;left:460px;background:salmon;text-align: center;"><font size="+3">×</font></div>
    
    <div style="width:700px;height:500px;"><img style="width:700px;height:500px;" src="./1.png"></div>
</div>

<script>
var xin = true,
    yin = true;
var step = 1;
var delay = 10;
var $obj;
$(function() {
    $obj = $("#imgDiv");
    var time = window.setInterval("move(imgDiv)", delay);
    $obj.mouseover(function() {
        clearInterval(time)
    });
    $obj.mouseout(function() {
        time = window.setInterval("move(imgDiv)", delay)
    });
});

 function move(divName){   
        var top = ($(window).height() - $(divName).height())/2;   
        var left = ($(window).width() - $(divName).width())/2;   
        var scrollTop = $(document).scrollTop();   
        var scrollLeft = $(document).scrollLeft();   
        $(divName).css( { position : absolute, top : top + scrollTop, left : left + scrollLeft } ).show();  
    } 

 
$(function() {
    $("#a").click(function() {
        var b = $("#a").parent();
        $(b).remove();
    })
})
$("#imgDiv").draggable();
</script>

</body>
</html>

技术分享图片

jQuery浮窗图片到页面中间的代码

原文:https://www.cnblogs.com/baker95935/p/11131254.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!