1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 超简单漂浮广告代码 网页漂浮广告代码 jQuery漂浮广告 div漂浮层

超简单漂浮广告代码 网页漂浮广告代码 jQuery漂浮广告 div漂浮层

时间:2024-03-22 09:14:55

相关推荐

超简单漂浮广告代码 网页漂浮广告代码 jQuery漂浮广告 div漂浮层

简单的漂浮广告,在网页可视区域飘动

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="jquery-1.8.3.min.js"></script><style type="text/css">body{height: 10000px;width: 5000px;}#floatdivids{width: 200px;height: 200px;position: absolute;top: 0;left: 0;background-color: #ff8015;z-index: 1000;border: 1px solid #ccc;}</style><script type="text/javascript">var isinter;var millisec = 25;//定时器间隔执行时间/毫秒var xflo = 0; //漂浮层x坐标var yflo = 0; //漂浮层y坐标var yistop = false;var xisleft = true;function floatadfun(){kwidth = $(window).width();//可视区域宽度kheight = $(window).height();//可视区域高度divwidth = $('#floatdivids').width();//div漂浮层宽度divheight = $('#floatdivids').height();//div漂浮层高度hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离offwidth = (kwidth-divwidth);//div偏移的宽度offheight = (kheight-divheight);//div偏移的高度if (!yistop) {yflo++;if (yflo >= offheight) {yistop = true;}} else {yflo--;if (yflo <= 0) {yistop = false;}}if (xisleft) {xflo++;if (xflo >= offwidth) {xisleft = false;}} else {xflo--;if (xflo <= 0) {xisleft = true;}}$('#floatdivids').css({'top':yflo+hstop,'left':xflo+wsleft}); /* 如果使用固定定位,请把加上滚动条的距离去掉即可 */}$(function () {isinter = setInterval("floatadfun()",millisec);$('#floatdivids').mouseover(function () {clearInterval(isinter);}).mouseout(function () {isinter = setInterval("floatadfun()",millisec);});$('#ClickRemoveFlo').click(function () {$(this).parents("#floatdivids").slideUp(500,function(){clearInterval(isinter);$(this).remove();});});});</script></head><body><div id="floatdivids"><span id="ClickRemoveFlo" style="position: absolute;top: 0;right: 0;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 0 5px;cursor: pointer;">X</span>小鹿乱撞!!<br>弹弹弹!</div></body></html>

欢迎大家一起来学习!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。