本文主要是介绍javascript特效鼠标飘过弹出悬浮块，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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
这篇关于javascript特效鼠标飘过弹出悬浮块的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
