jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714 -

xjwolaile

浏览: 341995 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714

博客分类：

学习
jQuery
前端技术

bind mouseover attr stop animate

1、效果及功能说明

鼠标悬停到图片时，浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示

2、实现原理

先定义好给图片加透明层的效果但后先去掉，当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里，从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置，随着鼠标移动到那张图片而移动

主要的方法

$('.box').bind('mouseover',function()
//隐藏掉鼠标的上的改变背景颜色的效果

$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
当鼠标触及到图片后开始显示这个效果

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#eee;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.demo{width:490px;margin:30px auto;}
.box{float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:10px;position:relative;display:inline;}
.box a{display:block;width:100px;height:100px;overflow:hidden;position:absolute;left:0;top:0;z-index:9;}
.boxBor{
	position:absolute;left:0;top:0;display:none;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));
	background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div class="boxBor"></div>

<div class="demo">
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div style="clear:both;"></div>
</div>


<script type="text/javascript">
$(function(){
	$('.box').bind('mouseover',function(){
	//定义一个隐藏方法鼠标移动到上面改变背景颜色的方法
		var oPosition=$(this).position();
		//定义参数
		var oThis=$(this);	
		//定义参数	
		$('.boxBor').queue('fnHide');	
		//定义方法显示或操作在匹配元素上执行	
		if($(".boxBor").attr('deta-switch')!=='true'){
		//定义改变图像的 width 属性方法
			$(".boxBor").attr('deta-switch','true');
			//定义改变图像的 width 属性方法
			$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
			//通过jquery 来修改 css 修改的有长度 高度 距左和距上 透明度 和是否隐藏
		}
		$(".boxBor").stop(false,false).animate({
		//定义停止当前正在运行的动画方法
			opacity:0.8,
			//让透明度为0.8
			left:oPosition.left+10,
			//距左为oPosition参数的距左再加10
			top:oPosition.top+10,
			//距上oPosition参数的距左再加10
			width:oThis.width(),
			//长度oThis参数长度
			height:oThis.height()
			//长度oThis参数宽度
		},250)
		//全部完成时间0.25秒
	});
})
</script>


</body>
</html>

images.rar (20.6 KB)
下载次数: 9

查看图片附件

分享到：

jQuery hover事件鼠标滑过图片半透明标题文 ... | jQuery checkbox 选中取消-20130713

2013-07-14 22:59
浏览 2510
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>