极客观点
项目管理
HarmonyOS
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标移上高亮插件</title>
<link href="../Static/style/ui.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
<ul class="fix">
<li><img src="images/1.jpg" alt="" title=""></li>
<li><img src="images/2.jpg" alt="" title=""></li>
<li><img src="images/3.jpg" alt="" title=""></li>
<li><img src="images/4.jpg" alt="" title=""></li>
<li><img src="images/5.jpg" alt="" title=""></li>
<li><img src="images/6.jpg" alt="" title=""></li>
<li><img src="images/7.jpg" alt="" title=""></li>
<li><img src="images/8.jpg" alt="" title=""></li></ul>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/hoverLight.js"></script>
<script>
$(function() {
$('.main').hoverLight({
divOpc:0.5,
});
});</script>
</html>
hoverLight插件代码
;
(function($,window,document,undefined){
var defaults={
items:'li'||'a',
divOpc:'0.4',//浮层透明度
};
$.fn.hoverLight=function(options){
var opts=$.extend(defaults,options,undefined);
this.each(function(){
//激活事件
var obj=$(this).find(opts.items);
//创建浮层
var w=obj.width();
var h=obj.height();
floatDiv='<div class="float-div-item" style="position:absolute; left:0; top:0; z-index:99; width:'+w+'px; height:'+h+'px; background-color:#000; opacity:0; filter:alpha(opacity=0); transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -moz-transition:all ease 0.3s; -o-transition:all ease 0.3s; cursor:pointer;"></div>';
obj.css('position','relative').append(floatDiv);
//添加事件
obj.each(function(){
var _this=$(this);
_this.on('mouseover',function(){
obj.children('div').css({'opacity':opts.divOpc,'filter':('alpha(opacity='+opts.divOpc*100+')')});
_this.children('div').css({'opacity':'0','filter':'alpha(opacity=0)'})
});
});
obj.each(function(){
var _this=$(this);
_this.on('mouseout',function(){
obj.children('div').css({'opacity':'0','filter':'alpha(opacity=0)'});
});
});
});
return this;
};
})(jQuery,window,document);