鼠标悬浮图片出现透明层效果

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

本章节分享一段代码实例,它实现了鼠标悬浮在图片上出现透明图层效果。

并且图层的出现方位和鼠标移入的方位有关联,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
a, img {
  border: 0;
}
ul, li {
  list-style: none;
}
body {
  background: #eee;
}
.jq22 {
  width: 490px;
  margin: 30px auto;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  background: #EEE;
  margin: 10px;
  position: relative;
  display: inline;
}
.boxBor {
  position: absolute;
  border: 1px solid white;
  z-index: 4;
  background: #fff;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.77));
  width: 100px; 
  height: 100px; 
  left:0px; 
  top:0px; 
  opacity: 0; 
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $('.box').bind('mouseover', function () {
    var oPosition = $(this).position();
    $(".boxBor").stop(false, false).animate({
      opacity: 0.8,
      left: oPosition.left + 10,
      top: oPosition.top + 10,
    }, 1000)
  });
})
</script>
</head>
<body>
  <div class="boxBor" deta-switch="true"></div>
  <div class="jq22">
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/6.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/7.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/1.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/2.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/3.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/4.jpg" alt=""></div>
    <div class="box"><img width="100" height="100" src="demo/jQuery/ant/5.jpg" alt=""></div>
  </div>
</body>
</html>

上面的代码实现了我们的要求,下面就介绍一下它的实现过程。

一.代码注释:

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

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

(3).var oPosition = $(this).position(),获取当前元素的坐标。

(4).$(".boxBor").stop(false, false).animate({  opacity: 0.8,

  left: oPosition.left + 10,

  top: oPosition.top + 10,

}, 250),动画效果。

left: oPosition.left + 10和top: oPosition.top + 10为了实现半透明层覆盖于图片之上,加10是因为box元素有10px的外边距。

二.相关阅读:

(1).position()可以参阅jquery position()一章节。

(2).stop()可以参阅jQuery stop()一章节。

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

回复

我来回复
  • 暂无回复内容