素材网 素材网

jQuery鼠标悬停滑动弹出遮罩层特效

下载资源()次

阅读次数()次

发布时间:2014-03-08

jQuery鼠标悬停滑动弹出遮罩层特效
分享到:

用法简介:

来源:xw素材网

jQuery鼠标悬停滑动弹出遮罩层特效。
文件引用:

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript">
var memberShow = function(val){
var mem_div = $("."+val);
var memli = mem_div.find("li.memLI");
var mem_len = memli.length;
var pop_info = mem_div.find(".popInfo");
var layer_Mode = mem_div.find(".layerMode");
var thumb1 = [];//缓存数组
var thumb2 = [];//缓存数组
var init_left,init_top;
var hovertime;
memli.bind({
mouseover : function(){
	THIS = $(this);
	hovertime = setTimeout(function(){
		pop_info.css({"display":"block"});
		var addinfo = THIS.find(".addInfo").html();
		pop_info.html(addinfo);
		var position = THIS.position();
		var new_left,new_top;
		var cssShadow;
		var _margin;
		if(position.left <= mem_div.width() - pop_info.width()){
			new_left = position.left;
			cssShadow = "imgShadow1";
			_margin = "left";
			pop_info.find("img").css("float","left");
			pop_info.find("p").css({"float":"left","margin-left":"-50px"});
		}
		if(position.left > mem_div.width() - pop_info.width()){
			new_left = position.left - THIS.width()*1-64;
			cssShadow = "imgShadow2";
			_margin = "right";
			pop_info.find("img").css("float","right");
			pop_info.find("p").css({"float":"right","margin-right":"-50px","text-align":"right"});
		}
		if(position.top <= mem_div.height() - pop_info.height()){
			new_top = position.top;
		}
		if(position.top > mem_div.height() - pop_info.height()){
			new_top = position.top - THIS.height()*2 - 4;	
		}
		pop_info.css({"top":new_top,"left":new_left});
		pop_info.find("img").addClass(cssShadow);
		if(_margin == "left"){
			pop_info.find("p").animate({			   
				marginLeft: "0px"					   
			},
			300
			);	
		}
		else if(_margin == "right"){
			pop_info.find("p").animate({			   
				marginRight: "0px"
			},
			300
			);		
		}
		layer_Mode.fadeTo("fast", 0.6);
	},300);
},
mouseout: function(){
	clearTimeout(hovertime);
}
})
pop_info.bind('mouseout',function(){
layer_Mode.css({"display":"none"});
pop_info.css({"display":"none","top":0,"left":0});
pop_info.html("");
})
}
$(document).ready(function(){
memberShow("memberShow");
})
</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。