jQuery移动漂浮窗口 图片
HTML:
<div id="img_fpd"> <a href="#"><img src="a.png" alt=""></a> <div class="close" id="fpd_close">关闭</div> </div>
CSS:
#img_fpd{ position: fixed; z-index: 9999; left: 10px; top: 100px; } #img_fpd .close{ position: absolute; cursor: pointer; z-index: 10000; top: 0; right: 0; width: 36px; height: 20px; line-height: 20px; text-align: center; color: #fff; font-size: 12px; background-color: rgba(0,0,0,0.25); } #img_fpd .close:hover{ background-color: rgba(0,0,0,0.6); }
JS:
<script> $(function(){ var oLeft = 10; //初始左偏移量 var oTop = 100; //初始上偏移量 var time = 30; //漂浮时间,可能太慢,可以自己将时间改小调快点 var xon = true; //左右漂浮开关 var yon = true; //上下漂浮开关 var bodyW = $(window).width(); //浏览器可视宽度 var bodyH = $(window).height(); //浏览器可视高度 $(window).resize(function(){ bodyW = $(window).width(); //浏览器变化时,浏览器可视宽度 bodyH = $(window).height(); //浏览器变化时,浏览器可视高度 }); var imgW = $("#img_fpd").outerWidth(); //漂浮物体的宽度 var imgH = $("#img_fpd").outerHeight(); //漂浮物体的高度 $('#fpd_close').click(function(){ $('#img_fpd').remove(); }); function move(){ if(xon){ oLeft += 1; }else{ oLeft -= 1; } if(yon){ oTop += 1; }else{ oTop -= 1; } $("#img_fpd").css("left",oLeft); $("#img_fpd").css("top",oTop); if(oLeft<=0){ xon = true; } if(oLeft >= bodyW - imgW){ xon = false; } if(oTop<=0){ yon = true; } if(oTop >= bodyH - imgH){ yon = false; } } var timeMove = setInterval(move,time); //定时器 $("#img_fpd").hover(function(){ clearInterval(timeMove); },function(){ timeMove = setInterval(move,time); }) }) </script>