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>