此飘窗效果不会受页面高度影响，页面多高就移动多大范围

可设置的参数有

图片地址

跳转页面地址

跳转页面打开方式

漂浮速度

共四项

主要JS代码如下所示(function($){

$.fn.floatAd = function(options){

var defaults = {

imgSrc : 'http://www.cnsbq.com.cn/static/upload/image/20191110/Pb14.png', // 图片地址

url:'http://www.cnsbq.com.cn', // 跳转页面地址

openStyle : 1, // 跳转页打开方式 1为新页面打开  0为当前页打开

speed : 10 // 漂浮速度 单位毫秒

};

var options = $.extend(defaults,options);

var _target = options.openStyle == 1 ?  "target='_blank'" : '' ;

var html = "

";

$('body').append(html);

function init(){

var x = 0,y = 0

var xin = true, yin = true

var step = 1

var delay = 10

var obj=$("#float_ad")

obj.find('img.float_ad_img').load(function(){

var float = function(){

var L = T = 0;

var OW = obj.width();//当前广告的宽

var OH = obj.height();//高

var DW = $(document).width(); //浏览器窗口的宽

var DH = $(document).height();

x = x + step *( xin ? 1 : -1 );

if (x

xin = true; x = L

}

if (x > DW-OW-1){//-1为了ie

xin = false; x = DW-OW-1

}

y = y + step * ( yin ? 1 : -1 );

if (y > DH-OH-1) {

yin = false; y = DH-OH-1 ;

}

if (y

yin = true; y = T

}

var left = x ;

var top = y;

obj.css({'top':top,'left':left});

}

var itl = setInterval(float,options.speed);

$('#float_ad').mouseover(function(){clearInterval(itl)});

$('#float_ad').mouseout(function(){itl=setInterval(float, options.speed)} )

});

// 点击关闭

$('#close_float_ad').click(function(){

$('#float_ad').hide();

});

}

init();

}; //floatAd

})(jQuery);

通过页面的js进行调用

引用window.js文件然后通过页面调用设置相应链接

$(function(){

//调用漂浮插件

$("body").floatAd({

imgSrc : 'http://www.cnsbq.com/static/upload/image/20191110/Pb14.png',

url:'http://www.cnsbq.com.cn',

});

})

最后再添加上相应样式即可，可下载附件或者查看demo

#float_ad {

width: 450px;

}

.float_ad_img {

width: 410px;

}

#close_float_ad {

font-size: 18px;

background: #fff;

width: 30px;

height: 30px;

line-height: 28px;

border-radius: 50%;

display: inline-block;

text-align: center;

}

@media (max-width: 768px) {

#float_ad {

width: 300px;

}

.float_ad_img {

width: 260px;

}

}

继续浏览有关

js飘窗

飘窗效果

的文章