最新消息:

JQ应用第5款:jQuery鼠标移到色块儿上去色块儿消失

JQuery应用 杨红伟 1434浏览 0评论

一:描述

本身这一功能是一开始想的是非常简单的,但是在使用过程中,好几次想法都搞错了,以致于将近花了一天的时间去折腾它。

错误想法一:以为是图片向上滚动,其实是色块儿向上滑动以致于消失;

错误想法二:以为有绝对定位,固定图片位置。其实没有,想好结构,外层为图片,内部有黑色块。即中间没有任何用过绝对定位的功能。

二:使用教程

 

1、HTML代码

<div class="pic" style="background: url(tubebg.png);"><!--鼠标移上去的图片-->
	<div class="tube"></div><!--黑色试管-->
</div>

我们这里分为两个容器,一个是 图片pic ,一个是 试管tube。

实现方法:背景为图片,表面是一个黑色块儿。当鼠标移上去的时候,黑色块儿隐藏不显示了。当鼠标离开的时候,又显示了。

之前的错误想法是:以为是图片在动,色块不动。其实是错误的,是图片不动。色块儿在动。

另外,运用背景行内式css,即 background:url(tubebg),是为方便调用模板标签时而使用的。

2、CSS代码

/*图片*/
.pic{
	width: 120px;
	height: 540px;
	overflow: hidden;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius:60px;
}
/*黑色块试管*/
.tube{
	width: 120px;
	height: 540px;
	background: #000000;
}

3、JS代码

$(function() {
	//鼠标移到黑色块儿时,黑色块儿上滑隐藏,即显示出图片
	$(".tube").hover(function(){
		$(this).slideUp();
	});
	//鼠标移出去黑色块儿时,黑色块儿下滑显示
	$(".pic").mouseleave(function(){
		$(".tube").slideDown();
	})
});

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址