基于JQuery网页漂浮广告窗口Js详解

先上效果图，箭头是大概的运行轨迹

首先说一下思路

1.漂浮的窗口肯定是position:absolute脱离文档流的

2.在浏览器可视范围内飘动

3.飘动过程可分解为垂直（上、下）和水平（左、右）方向，同一时间内会同时向垂直和水平两个方向同时移动，可能的情况会有上左、上右、下左、下右

基本的思路是创建一个函数，函数的作用是使元素移动，然后定时执行这个函数，以让元素持续移动，形成漂浮效果。基本上这些持续的元素移动都是基于 setInterval(func,delay) 函数，例如：setInterval(move,30)，第一个参数是要定时执行的函数，第二个参数是时间间隔，单位是毫秒。如果不懂setInterval的请见：setInterval 介绍

首先这是基于JQuery写的，调用都是一些基础的接口，应该任何版本的JQuery都可以，我用的是1.9的。

接下来，上代码

浮窗Css样式

<style>.floadAd { position: absolute;z-index: 999900; display: none; }.floadAd .item { display: block; }.floadAd .item img { vertical-align: bottom; }/* a img 的组合浏览器默认下边会有几个像素的空白，这里可以消除空白*/
</style>

Html 标记，里面的内容是可以按自己的需要来写的

<div id="floadAD" class="floadAd"><a class="close" href="javascript:void();" style="color: red">×关闭</a><a class="item" title='首届党建文化节' href="http://unsun.net" target="_blank"><img src="App_UpLoad/image/20160405/20160405172215_2907.png" alt="首届党建文化节" /></a>
</div>

Js代码，我没有把它封装到JQuery的插件里面，有需要可以自己去封装

FloatAd("#floadAD");//调用//广告漂浮窗口
function FloatAd(selector) {var obj = $(selector);if (obj.find(".item").length == 0) return;//如果没有内容，不执行var windowHeight = $(window).height();//浏览器高度var windowWidth = $(window).width();//浏览器宽度var dirX = -1.5;//每次水平漂浮方向及距离(单位：px)，正数向右，负数向左，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果var dirY = -1;//每次垂直漂浮方向及距离(单位：px)，正数向下，负数向上，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果var delay = 30;//定期执行的时间间隔，单位毫秒obj.css({ left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" });//把元素设置成在页面中间obj.show();//元素默认是隐藏的，避免上一句代码改变位置视觉突兀，改变位置后再显示出来var handler = setInterval(move, delay);//定期执行，返回一个值，这个值可以用来取消定期执行obj.hover(function() {//鼠标经过时暂停，离开时继续clearInterval(handler);//取消定期执行}, function() {handler = setInterval(move, delay);});obj.find(".close").click(function() {//绑定关闭按钮事件close();});$(window).resize(function() {//当改变窗口大小时，重新获取浏览器大小，以保证不会过界（飘出浏览器可视范围）或漂的范围小于新的大小windowHeight = $(window).height();//浏览器高度windowWidth = $(window).width();//浏览器宽度});function move() {//定期执行的函数，使元素移动var currentPos = obj.position();//获取当前位置，这是JQuery的函数，具体见：http://hemin.cn/jq/position.htmlvar nextPosX = currentPos.left + dirX;//下一个水平位置var nextPosY = currentPos.top + dirY;//下一个垂直位置if (nextPosX >= windowWidth - obj.width()) {//这一段是本站特有的需求，当漂浮到右边时关闭漂浮窗口，如不需要可删除close();}if (nextPosX <= 0 || nextPosX >= windowWidth - obj.width()) {//如果达到左边，或者达到右边，则改变为相反方向dirX = dirX * -1;//改变方向nextPosX = currentPos.left + dirX;//为了不过界，重新获取下一个位置}if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) {//如果达到上边，或者达到下边，则改变为相反方向。            dirY = dirY * -1;//改变方向nextPosY = currentPos.top + dirY;//为了不过界，重新获取下一个位置}obj.css({ left: nextPosX + "px", top: nextPosY + "px" });//移动到下一个位置}function close() {//停止漂浮，并销毁漂浮窗口clearInterval(handler);obj.remove();}
}

我已经把注释写的很清楚，这里就不再做多解释了，如果有有问题欢迎提出交流，一起进步。

第一次写博客，写的不好欢迎提出来让我改进

基于JQuery网页漂浮广告窗口Js详解相关推荐

html网页漂浮广告原理js,js实现广告漂浮效果的小例子
div{ position:absolute; } /* 利用window对象,实现浮动效果 1.有一个div,就是我们要控制的,它的起始点坐标(0,0) 2.设定横向和纵向的速度 3.控制div移动 ...
html漂浮图片代码关闭,js带关闭按钮的网页漂浮广告代码
html head -="-Type"=";=GBK" 带关闭按钮的网页漂浮广告代码 body divid="img"style=" ...
php中的网页漂浮代码,JavaScript_Javascript实现带关闭按钮的网页漂浮广告代码，复制代码代码如下: html - phpStudy...
Javascript实现带关闭按钮的网页漂浮广告代码带关闭按钮的网页漂浮广告代码 X ff.js代码 var xPos = 20; var yPos = document.body.clientHe ...
css广告跟随,jQuery网页右侧广告跟随滚动代码分享
jQuery广告跟随滚动的两种方法都分享给大家,希望对大家的学习有所启发. 方法一: 方法二: /*页面智能层浮动*/ jQuery(document).ready(function($){ var ...
网页设计：Meta标签详解
网页设计:Meta标签详解很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
cs6导航栏代码html,总算认识网页设计教程|Dreamweaver-CS6工具栏详解
总算认识网页设计教程|Dreamweaver-CS6工具栏详解日期:2019-08-31 16:18:59 浏览:194 核心提示:网页设计教程|DreamweaverCS6工具栏详解.为了更好地使 ...
Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
python模拟手写笔迹_Python实现基于KNN算法的笔迹识别功能详解
本文实例讲述了Python实现基于KNN算法的笔迹识别功能.分享给大家供大家参考,具体如下: 需要用到: Numpy库 Pandas库手写识别数据点击此处本站下载. 数据说明: 数据共有785列, ...
ajax then fail done,Jquery $when done then的用法详解
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下 ...
mysql 点赞数据库设计_基于redis实现的点赞功能设计思路详解
点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...

基于JQuery网页漂浮广告窗口Js详解

基于JQuery网页漂浮广告窗口Js详解相关推荐

最新文章

热门文章