jquery实现鼠标滑过中心放大遮罩层

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-23 15:11:10　-　阅:　-　评:0　-　积分:0

之前网站中运用了大量的css3特效，这也就意味着在ie浏览器下将无用武之地。后来自己想了想，国内的ie用户还是蛮多的，于是毅然放弃了部分css3，开始用jq来代替，当然代码是要自己来实现的了。之前来过洒家网站的读者在浏览图片时可能会看到一种特效，是什么样的特效呢？就是：鼠标滑过时，遮罩层中心缩放。也许你已经猜到了接下来是什么内容了，恭喜客官答对了，今天就来为您分享下洒家用jq做的中心缩放。放张效果图：

上源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq实现鼠标滑过中心放大遮罩层--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="jq特效,中心缩放,遮罩层,鼠标滑过特效,兼容ie6">
<meta name="description" content="jq特效,中心缩放,遮罩层,鼠标滑过特效,兼容ie6">
<script type="text/javascript" src="/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
　$(function(){
　　var ie6_g=$('.wrap a').height();
　　$('.wrap a').hover(function(){
　　    $('.sp_sc').stop().animate({"width":"100%","height":ie6_g+"px","top":"0","left":"0"},500);
　　},function(){
　　    $('.sp_sc').stop().animate({"width":"0","height":"0","top":"50%","left":"50%"},500);
　　});
　})
</script>
<style type="text/css">
*{margin:0;padding:0;}
a img{border:none;}
.wrap{width:240px;height:240px;margin:50px auto;}
.wrap a,.sp_sc{display:inline-block;overflow:hidden;position:relative;}
.wrap a img{width:240px;height:240px;}
.sp_sc{background:#000;font-size:0;line-height:0;position:absolute;top:50%;left:50%;width:0;padding:0;filter:alpha(opacity=20);opacity:.2;}
</style>
</head>
<body>
<div class="wrap">
　<a href="/"><img src="/skin/yilingsj/image/logo.jpg" title=""艺灵设计logo /><span class="sp_sc"></span></a>
</div>
</body>
</html>

洒家个人感觉这个方法还是蛮简单的，至于思路什么的洒家就不多说了哈，我相信不同的客官会有不同的方法。就这样吧，欢迎暂时还不会实现的客官收藏此文章哦！^︿_v^︿

点此下载→→【代码】jq实现鼠标滑过中心放大遮罩层.zip　　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-10-23/102.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！