飘窗 - 代码天地

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>飘窗</title>

<style type="text/css">

	.floatDiv{
		width:300px;
		height:225px;
		position: absolute;
		z-index: 2;
	}
	.floatDiv img{
		width:300px;
		height:225px;
	}
	.closeFloatDiv{
		position:absolute;
		width:16px;
		height:16px;
		right:0px;
		color:#fff;
		font:14px/16px "微软雅黑";
		text-align:center;
		cursor:pointer;
	}
</style>
 <script src="https://files.cnblogs.com/files/lansetuerqi/jquery-1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript">  
    $(function(){ 
        $(".closeFloatDiv").click(function(){
        	$(".floatDiv").remove();
        });
    })
</script>

</head>
<body>
	<!-- 飘窗 -->
   	<div class="floatDiv up left" id="floatDiv" style="left: 655px; top: 468px;">
   		<div class="closeFloatDiv">x</div>
   		<a target="_blank">
   			<img src="./飘窗/yl_pc.png">
   		</a>
   	</div>
<script type="text/javascript">
    //飘窗动起来
    $(function(){
    	//可视高度
  	    var heightMax = $(window).height()-$(".floatDiv").css("height").replace("px","");
    	//可视宽度
		var widthMax = $(window).width()-$(".floatDiv").css("width").replace("px","");
		//飘窗
    	var i = 0;
		var j = 0;
    	var funl = function leftactive(){
    		if($(".floatDiv").css("left").replace("px","")<=0){
				$(".floatDiv").removeClass("left").addClass("right");
			}
			if($(".floatDiv").css("right").replace("px","")>=widthMax){
				$(".floatDiv").removeClass("right").addClass("left");
			}
			if($(".floatDiv").hasClass("right")){
				i++;
				$(".floatDiv").css("left",i+"px");
			}
			if($(".floatDiv").hasClass("left")){
				i--;
				$(".floatDiv").css("left",i+"px");
			}
    	}
    	var funt = function topactive(){
    		if($(".floatDiv").css("top").replace("px","")<=$(window).scrollTop()){
				$(".floatDiv").removeClass("up").addClass("down");
			}
			if($(".floatDiv").css("top").replace("px","")>=$(window).scrollTop()+heightMax){
				$(".floatDiv").removeClass("down").addClass("up");
			}
			if($(".floatDiv").hasClass("down")){
				j++;
				$(".floatDiv").css("top",j+"px");
			}
			if($(".floatDiv").hasClass("up")){
				j--;
				$(".floatDiv").css("top",j+"px");
			}
    	}
		var leftfun = setInterval(funl, 10);
		var topfun = setInterval(funt, 10);
		$(".floatDiv").mouseover(function() {
        	clearInterval(leftfun);
        	clearInterval(topfun);
        });
        $(".floatDiv").mouseout(function() {
        　　leftfun = setInterval(funl, 10);
	　　topfun = setInterval(funt, 10);
        });
    });
</script>
</body></html>
飘窗

猜你喜欢
