一款jQuery鼠标悬停方向感知的特效,鼠标在任意的方块内移动时,自动感知鼠标的方向并出现一个黑色的矩形沿着鼠标对应的放滑入,鼠标离开矩形时黑色的矩形则滑出,可以感知鼠标移动的任意方向。
页面的head部分,简单设置页面样式,并引入jQuery库,代码如下:
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
接着设置好鼠标悬停的事件响应,给感知的黑色方块定义一下属性样式等,部分代码如下:
$.fn.wear=function(options){
//判断参数是否合法
if(!isValid(options)){
alert('参数不合法,请重新设置!');
return this;
}
var opts = $.extend({},defaults,options)//覆盖默认参数
, Num = opts.colNum*opts.rowNum, Tag = opts.tag, Sty = opts.style,tagSty = opts.tagStyle,boxWidth = this.width(),boxHeight=this.height();
//返回对象 链式操作
return this.each(function(index,ele){
var _this = $(this);
for(var i=0;i<Num;i++){
var obj = $(Tag);//定义内部块标签
//自定义标签内容
var makeup = obj.html();
makeup = $.fn.wear.format(makeup);
Sty.border=Sty.border||'1px solid #fff';
var borderW = Sty.border.match(/\d+px/g)[0].match(/\d+/g)[0];
obj.html(makeup).css({
'border':Sty.border,
'width':boxWidth/opts.colNum-2*Sty.margin-2*Sty.padding-2*borderW,
'height':boxHeight/opts.rowNum-2*Sty.margin-2*Sty.padding-2*borderW,
'background':Sty.background,
'overflow':'hidden',
'float':'left',
'position':'relative',
'margin':Sty.margin,
'padding':Sty.padding,
'opacity':Sty.opacity,
'border-radius':Sty.radius
});
var mask_tag = $('<i>');//定义穿墙层
mask_tag.addClass('mask');
var makeup2 = mask_tag.html();
makeup2 = $.fn.wear.formatMask(makeup2);
mask_tag.html(makeup2).css({
'font-style':'normal',
'width':obj.outerWidth(),
'height':obj.outerHeight(),
'background':tagSty.background,
'position':'absolute',
'left':-borderW-obj.outerWidth(),
'top':-borderW,
'opacity':tagSty.opacity,
'border-radius':Sty.radius
});
obj.append(mask_tag);
_this.append(obj);
}
_this.children().each(function(){
__this = $(this);
hoverGo(__this.get(0),{w:obj.outerWidth(),h:obj.outerHeight(),time:opts.time});
})
});
};
//设置默认参数
var defaults={
style:{
margin:0,
padding:0,
border:'',
radius:0,
opacity:1,
background:'#ccc'
},
colNum:4,
rowNum:4,
tag:'<div>',
tagStyle:{
opacity:0.6,
background:'#000'
},
time:700
};
//公共的格式化方法
$.fn.wear.format = function(str){
return str;
}
$.fn.wear.formatMask = function(str){
return str;
}
//公共方法
function isValid(options){
return !options||(options&&typeof options ==='object')?true:false;
}
页面的body部分,设置一个div容器用来展示效果,代码如下:
<div id="wear" style="width:600px;height:600px;margin:0px auto;"></div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791