封一个js元素页面飘动的方法

最新推荐文章于 2021-06-04 06:38:00 发布

weixin_strponit

最新推荐文章于 2021-06-04 06:38:00 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：元素飘动

本文链接：https://blog.youkuaiyun.com/weixin_42727360/article/details/94304905

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用jQuery实现页面元素自动飘动效果的方法，通过设置元素的初始位置、移动速度，使元素在页面中左右上下随机移动，同时提供了hover效果暂停移动的功能。

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

封一个js元素页面飘动的方法
这是代码
/*

speed //元素移动速度
xPos //元素一开始左距离
yPos //元素一开始上距离
*/

(function($) {

jQuery.fn.imgFloat = function(options) {
    var own = this;
    var xD = 0;
    var yD = 0;
    var i = 1;
    var settings = {
        speed: 15,
        xPos: 0,
        yPos: 0
    };
    jQuery.extend(settings, options);
    var ownTop = settings.xPos;
    var ownLeft = settings.yPos;
    own.css({
        position: "absolute",
        cursor: "pointer"
    });

    function imgPosition() {
        var winWidth = $(window).width() - own.width();
        var winHeight = $(window).height() - own.height();
        if (xD == 0) {
            ownLeft += i;
            own.css({
                left: ownLeft
            });
            if (ownLeft >= winWidth) {
                ownLeft = winWidth;
                xD = 1;
            }
        }
        if (xD == 1) {
            ownLeft -= i;
            own.css({
                left: ownLeft
            });
            if (ownLeft <= 0) xD = 0;
        }
        if (yD == 0) {
            ownTop += i;
            own.css({
                top: ownTop
            });
            if (ownTop >= winHeight) {
                ownTop = winHeight;
                yD = 1;
            }
        }
        if (yD == 1) {
            ownTop -= i;
            own.css({
                top: ownTop
            });
            if (ownTop <= 0) yD = 0;
        }
    }
    var imgHover = setInterval(imgPosition, settings.speed);
    own.hover(function() {
            clearInterval(imgHover);
        },
        function() {
            imgHover = setInterval(imgPosition, settings.speed);
        });
}

})(jQuery);

//$("#div1").imgFloat(); //不给参数默认（speed:10,xPos:0,yPos:0）
$("#div1").imgFloat({
speed: 30,
xPos: 10,
yPos: 10
});