Jquery 制作网页飘窗

先上效果图，有图有真相才能赢天下

整个运动路径就是这样

代码整理

HTML

<div id="floadAD" class="floadAd"><a class="close" href="javascript:void();" style="color: red">×关闭</a><a class="item" title='郑州中小企业担保有限公司' href="http://www.zzdb.net/comnews/742.html" target="_blank"><img src="http://www.zzdb.net/template/default/index/img/piaochuang.jpg" alt="郑州中小企业担保有限公司" /></a>
</div>

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

JS实现代码

//调用
FloatAd("#floadAD");//广告漂浮窗口
function FloatAd(selector) {var obj = $(selector);//如果没有内容，不执行if (obj.find(".item").length == 0) return; //浏览器高度var windowHeight = $(window).height(); //浏览器宽度var windowWidth = $(window).width(); //每次水平漂浮方向及距离(单位：px)，正数向右，负数向左，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果var dirX = -1.5; //每次垂直漂浮方向及距离(单位：px)，正数向下，负数向上，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果var dirY = -1; //定期执行的时间间隔，单位毫秒 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() { //获取当前位置，这是JQuery的函数，具体见：[http://hemin.cn/jq/position.html](http://hemin.cn/jq/position.html)var currentPos = obj.position(); //下一个水平位置var 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 制作网页飘窗相关推荐

网页设计HTML如何制作选项卡,jQuery制作网页版选项卡
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. ◦引入所需库 ◦选项卡原理 ◦业务核心 ◦完整小 ...
html5图片平铺的代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码调用JS文件调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
使用jQuery 快速高效制作网页特效
使用jQuery 快速高效制作网页特效第一章:JavaScript基础 DOM:document object model 文档对 ...
html网页背景图片平铺代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码调用JS文件调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
php产品效果图,jQuery_基于JQuery制作的产品广告效果，效果图.如下：动画效果介绍 - phpStudy...
基于JQuery制作的产品广告效果效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看 ...
使用jquery制作计算器_如何使用jQuery对计算器进行编程
使用jquery制作计算器 Previously, I showed you how to use CSS border-radius property to create the following ...

Jquery 制作网页飘窗

Jquery 制作网页飘窗

整个运动路径就是这样

Jquery 制作网页飘窗相关推荐

最新文章

热门文章