$('#id').autoMove({angle:-Math.PI/4, speed: 200});
<script>
(function($) {
/**
* Description: jquery飘窗插件,可自适应浏览器宽高的变化
* param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125}
* 参数说明: startL飘窗初始时距离左边的距离, startT飘窗初始化距离顶部的距离, angle飘窗初始运动方向, speed运动速度(px/s)
*/
$.fn.autoMove = function(args) {
// 工具函数判断边距
function isTop(pos, w_w, w_h, d_w, d_h) { // 飘窗到达上边距
return (pos.top <= 0);
}
function isBottom(pos, w_w, w_h, d_w, d_h) { // 飘窗到达下边距
return (pos.top >= (w_h - d_h));
}
function isLeft(pos, w_w, w_h, d_w, d_h) { // 飘窗到达左边距
return (pos.left <= 0);
}
function isRight(pos, w_w, w_h, d_w, d_h) { // 飘窗到达右边距
return (pos.left >= (w_w - d_w));
}
return this.each(function() {
var w_w = parseInt($('body').width()),
w_h = parseInt($(window).height()),
d_w = parseInt($(this).width()),
d_h = parseInt($(this).height()),
d_l = (w_w - d_w) / 2,
d_t = (w_h - d_h) / 2,
max_l = w_w - d_w,
max_t = w_h - d_h;
// 位置及参数的初始化
var setobj = $.extend({startL: d_l, startT: d_t, angle: Math.PI / 4, speed: 100}, args);
$(this).css({position: 'fixed', left: setobj['startL'] + 'px', top: setobj['startT'] + 'px'});
var position = {left: setobj['startL'], top: setobj['startT']}; // 飘窗位置对象
var that = $(this);
var angle = setobj.angle;
var time = 10; // 控制飘窗运动效果,值越小越细腻
var step = setobj.speed * (time / 1000); // 计算运动步长
var decoration = {x: step * Math.cos(angle), y: step * Math.sin(angle)}; // 计算二维上的运动增量
var mvtid;
var animationRunning = true; // 添加标志变量
$(window).on('resize', function() { // 窗口大小变动时重新设置运动相关参数
w_w = parseInt($(window).width());
w_h = parseInt($(window).height());
max_l = w_w - d_w;
max_t = w_h - d_h;
});
function move() {
if (!animationRunning) return; // 如果暂停则返回
position.left += decoration.x;
position.top += decoration.y;
if (isLeft(position, w_w, w_h, d_w, d_h) || isRight(position, w_w, w_h, d_w, d_h)) {
decoration.x = -1 * decoration.x;
}
if (isTop(position, w_w, w_h, d_w, d_h) || isBottom(position, w_w, w_h, d_w, d_h)) {
decoration.y = -1 * decoration.y;
}
that.animate({left: position.left, top: position.top}, time, function() {
mvtid = setTimeout(move, time); // 在回调中递归调用move以确保连续运动
});
}
move(); // 触发动作
that.on('mouseenter', function() {
animationRunning = false; // 设置为暂停
clearTimeout(mvtid); // 清除定时器
that.stop(true, true); // 立即停止所有动画
}).on('mouseleave', function() {
animationRunning = true; // 恢复运行
move(); // 重新开始动画
});
});
}; // end plugin definition
})(jQuery);
</script>
jquery飘窗插件,可自适应浏览器宽高的变化
于 2025-03-04 14:11:37 首次发布