Jq实现浮动飘窗广告位

<!doctype html>
<html><head><meta charset="utf-8"><title>jquery漂浮广告代码</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style></style>
</head><body><div id="imgDiv" style="position:absolute;left:50px;top:60px;"><div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div><!-- <img src="01.jpg" border="0" /> --><div style="width:180px;height:180px;background:red;"></div></div><script>var xin = true, // true向右偏移,false向左偏移，首次为true，默认向右偏移yin = true; // true向下偏移,false向上偏移，首次为true，默认向下偏移var step = 1; // 每次移动偏移量var delay = 10; // 定时函数定时时间var $obj;$(function () {$obj = $("#imgDiv");var time = window.setInterval("move()", delay);$obj.mouseover(function () {clearInterval(time)});$obj.mouseout(function () {time = window.setInterval("move()", delay)});});function move() {var left = $obj.offset().left;var top = $obj.offset().top;var L = T = 0; //左边界和顶部边界var R = $(window).width() - $obj.width(); // 右边界var B = $(window).height() - $obj.height(); // 下边界//难点:怎样判断广告的4个边框有没有超出可视化范围!if (left < L) {xin = true; // 水平向右移动}if (left > R) {xin = false; // 水平向左移动}if (top < T) {yin = true; // 垂直向下移动}if (top > B) {yin = false; // 垂直向上移动}//根据有没有超出范围来确定广告的移动方向left += step * (xin == true ? 1 : -1);top += step * (yin == true ? 1 : -1);// 给div 元素重新定位$obj.offset({top: top,left: left})}//关闭$(function () {$("#a").click(function () {var b = $("#a").parent();$(b).remove();})})</script></body></html>

Jq实现浮动飘窗广告位相关推荐

爆款电商直播间如何打造？
2020双十一直播再创新高!有人说:"在风口,猪都能飞起来."但现在直播野蛮生长,消费者视线越来越难聚焦.而欢拓云直播又是如何通过直播间打造爆款直播,提高品牌辨识度?这篇文章我为您 ...
asp.net 网页做一个浮动层_你们要的HTML、CSS布局技巧：如何规范搭建网页架构？
白天有知友邀请回答"如何规范布局网页结构"的问题,知乎上这类问题还挺多,我认为单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! ...
css如何清除浮动（二）
2019独角兽企业重金招聘Python工程师标准>>> 在上篇介绍通过设置祖先元素的高度类清除浮动,但在实际的网站开发中,很少会设置元素的高度,那这是为什么呢? 是因为元素一般都能被 ...
html跳转过度,jq实现锚点跳转过度
jq实现锚点跳转过度 2020年10月29日 | 萬仟网IT编程 | 我要评论 jq实现锚点跳转过渡例子:当我们浏览页面想回到页面顶部时,点击按钮会回到想要去到的锚点.1.数据内容(html) 跳转 ...
用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...
jq 点击导航添加背景_jq入门（2）css选择符
今天继续分享jq入门基础. css选择符 jQuery支持CSS规范1到规范3中的几乎所有选择符,具体内容可以参考W3C网站.这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不 ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
设置元素浮动的几种方式
我们知道获取元素的浮动属性,各浏览器中使用的属性不同.大家都知道IE中使用styleFloat,标准浏览器使用cssFloat. <div>test</div> <scr ...
JQ实现王者荣耀手风琴效果
准备 htm+lcss布局和样式分析 HTMl是一个容器装着无序列表,li内装着俩图片,一个是小头像图片,另外一个是详情大图片 <div class="box">< ...

Jq实现浮动飘窗广告位

Jq实现浮动飘窗广告位相关推荐

最新文章

热门文章