鼠标悬浮文字动画方式弹出信息提示层

快乐打工仔 分类:实例代码

这早已经是非常频繁使用的效果,下面就分享一段能够实现此功能的代码实例,并给出实现的详细过程。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.contact{
  width:100px;
  height:15px;
  margin:20px 0 0 50px;
  background-color:#CCCCCC;
  text-align:center;
  font-size:12px;
}
.us{
  display:none;
  width:300px;
  height:40px;
  padding:10px;
  position:relative;
  top:0px;
  left:50px;
  background-color:#0099FF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".contact").mouseover(function(){
    $(".us").show("slow");
    $(".contact").mouseout(function(){
      $(".us").hide("slow");
    });
  });
})
</script>
</head>
<body>
<div class="contact">鼠标悬浮查看效果</div>
<div class="us">pipipi.net是犀牛前端部落的地址</div>
</body>
</html>

上面的代码效果依然是比较简陋的,不过实际应用中可以进行美化,这里只是讲解实现原理。

一.实现原理:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$(".contact").mouseover(function(){}),为class属性值为contact的元素注册mouseover事件处理函数。

(3).$(".us").show("slow"),当鼠标悬浮的时候提示层显示。

(4).$(".contact").mouseout(function(){

  $(".us").hide("slow");

}),注册mouseout事件处理函数。

当鼠标离开的时候提示层隐藏。

二.相关阅读:

(1).mouseover事件可以参阅jQuery mouseover事件一章节。

(2).mouseout事件可以参阅jQuery mouseout事件一章节。

(3).show()可以参阅jQuery show()一章节。

(4).hide()可以参阅jQuery hide()一章节。

回复

我来回复
  • 暂无回复内容