首页 > 代码库 > 全屏漂浮效果
全屏漂浮效果
自己写的一个满屏漂浮JS效果
很土的一个效果，在互联网上感觉消失了好久了，但是最近在做一个项目的时候，又要用到，临时找还找不到，就写了一个，记录于此以防后用
<script type="text/javascript"> $(function () { //浮动图片 var floatImg = $("#img1"); floatImg.css("position", "absolute"); var imgW = floatImg.width(); var imgH = floatImg.height(); var winH = $(window).height(); var winW = $(window).width(); var maxW = winW - imgW; var maxH = winH - imgH; if (maxW > 0 && maxH > 0) {//随机位置起始 var nowH = Math.floor(Math.random() * maxH); var nowW = Math.floor(Math.random() * maxW); var reverseH = 0; var reverseW = 0; setInterval(function () { if (nowH == 0) { reverseH = 0; nowH += 1; } else if (nowH > 0 && nowH < maxH) { if (reverseH == 0) { nowH += 1; } else { nowH -= 1; } } else if (nowH == maxH) { nowH -= 1; reverseH = 1; } if (nowW == 0) { reverseW = 0; nowW += 1; } else if (nowW > 0 && nowW < maxW) { if (reverseW == 0) { nowW += 1; } else { nowW -= 1; } } else if (nowW == maxW) { nowW -= 1; reverseW = 1; } floatImg.css("top", ($(window).scrollTop() + nowH) + "px").css("left", ($(window).scrollLeft() + nowW) + "px"); }, 30); } setTimeout(function () { if ($("#img1").length > 0) { $("#img1").remove(); } }, 15000); }); </script>
HTML就很简单
<div title="点击关闭" id="img1" style="z-index: 100; left: 2px; width: 393px; position: absolute; height: 297px; visibility: visible;"> 要漂浮的内容 </div>
demo下载地址http://www.wuyinweb.com/doc/53/107.aspx
全屏漂浮效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。