万企互联-专注高端网站建设
扫描关注万企互联微信公众账号

扫一扫微信二维码

jQuery实现漂浮效果,鼠标悬停时,图片停止漂浮!

特效源码2022/3/1 296

jQuery实现漂浮效果,漂浮效果js实现,当鼠标在图片上方时,图片停止漂浮,点击关闭按钮可隐藏图片。


<script src="jquery-1.9.1.min.js"></script>
<div id="imgDiv" style="position:absolute;left:50px;top:50px;z-index:999999; ">
    <div id="a" style="width:20px;height:20px;position:absolute;right:0px;background:salmon;text-align: center;">×</div>
    <div style="width:300px;height:200px;"><img src="images/no.png" width="300"></div>
</div>
<script>
var xin = true,
    yin = true;
var step = 1;
var delay = 10;
var $obj;
$(function() {
    $obj = $("#imgDiv");
    var time = window.setInterval("move()", delay);
    $obj.mouseover(function() {
        clearInterval(time)
    });
    $obj.mouseout(function() {
        time = window.setInterval("move()", delay)
    });
});
function move() {
    var left = $obj.offset().left;
    var top = $obj.offset().top;
    var L = T = 0; //左边界和顶部边界
    var R = $(window).width() - $obj.width(); // 右边界
    var B = $(window).height() - $obj.height(); //下边界
    if (left < L) {
        xin = true; // 水平向右移动
    }
    if (left > R) {
        xin = false;
    }
    if (top < T) {
        yin = true;
    }
    if (top > B) {
        yin = false;
    }
    left = left + step * (xin == true ? 1 : -1);
    top = top + step * (yin == true ? 1 : -1);
    // 给div 元素重新定位
    $obj.offset({
        top: top,
        left: left
    })
}
$(function() {
    $("#a").click(function() {
        var b = $("#a").parent();
        $(b).remove();
    })
})
$("#imgDiv").draggable();
</script> 
jquery-1.9.1.min.rar
文章关键词
漂浮
jQuery
js
品控技术网 TOP图标库 万企互联 咸阳网站建设 域名转发系统 IP地址查询 万企工具 超越彼岸BEYOND 六佰号 秦川云 IDC主机测评 三秦人才网 陕西锦新橡塑制品有限公司