javascript特效鼠标飘过弹出悬浮块_js 鼠标虚浮弹出窗-CSDN博客

本文链接：https://blog.csdn.net/bolg_hero/article/details/16343163

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>javascript特效鼠标飘过弹出悬浮块</title>	
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>  
	<script type="text/javascript">
		var float_frame,icon;
		$(document).ready(function(){
			float_frame=$("#float_frame").clone(false);
		    icon=$("#icon");		   
		    float_frame.show();
			//鼠标悬浮时
			icon.mouseover(function(){	
				icon.after(float_frame);				
			});
			//鼠标悬浮离开时
			icon.mouseout(function(){
				float_frame.remove();
			});
		});
	</script>
    <style type="text/css" >   
    	#img_icon{
			width: 64px;
			height: 64px;			
    	}
    	#float_frame{
    		width: 300px;
    	}
    	strong{
    		color:#35a5e5;
    	}
        /*  
            圆角矩形             
        */  
        .circle {                 
            -moz-border-radius: 10px;  
            -webkit-border-radius: 10px;  
            border-radius: 10px;  
        } 

        /*
			虚线边框
        */
        .dashed-border{
			border:#35a5e5 1px dashed;   
            overflow: auto;              
        }
         /**  
            发光特效，在IE8以下无效  
        */  
        .shine{   
            transition: all 0.30s ease-in-out;  
            -webkit-transition: all 0.30s ease-in-out;   
            -moz-transition: all 0.30s ease-in-out;  
            border: #35a5e5 1px solid;   
            border-radius: 4px;  
            outline: none;
        }  
        .shine:focus {   
            border:#35a5e5 1px solid;  
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);  
            -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);  
            -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);   
         } 
         /*
			悬浮特效
         */
         .float_effect{
			position:absolute;
         	z-index: 9999;
         }
    </style>
</head>
<body>
	<span id="icon" ><img id="img_icon" src="images/holdon_b.png" class="circle dashed-border" /></span>
	<span>请把鼠标放到图片上来</span>
	<div style="display:none;" id="float_frame" class="dashed-border circle float_effect">
<strong>持之以恒</strong>
<div>授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里，不积小流无以成江海，程序人生的精彩需要坚持不懈地积累！</div>
</div>
</body>
</html>

截图如下：

下载地址如下：http://download.csdn.net/detail/yx511500623/6558329