原标题：网站飘窗广告的实现方法

效果：

代码：

以上，在background: url里设置飘窗广告图片的外链地址，其他参数也可以自己调整，像width、height。

以上，在a href里设置需要跳转的页面。

< language="java" type="text/java">/** jQuery Plugins imgFloat v1011* 使用说明：* speed //元素移动速度* xPos //元素一开始左距离* yPos //元素一开始上距离* $('#div1').imgFloat({speed:30,xPos:10,yPos:10});* $('#div2').imgFloat(); //不给参数默认(speed:15,xPos:0,yPos:0) */ (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); > < language="java" type="text/java"> //$("#img").imgFloat(); //不给参数默认(speed:10,xPos:0,yPos:0) $("#img").imgFloat({ speed : 15, xPos : 10, yPos : 10 }); $(".reset").click(function() { $("#img").css("display", "none"); }); >

以上js代码不需要看懂，大家复制粘贴好了。

放置区域：

这三段代码我都放到了welcome/index里，如果想要所有页面都出现飘窗，可以放在application.html里。

一切为了让生活更加美好！返回搜狐，查看更多

责任编辑：