咳咳，来吧这么久了，也没发一个教程帖，说来也惭愧啊！看吧里面的大神，一篇，二篇，n篇的发；也有发网站的；再看看本屌丝，一个水帖，两个水帖，十个水贴，n个水贴......于是，本屌丝毅然决定发一篇处女作教程帖出来，也算是对本吧的一点小贡献吧。教程是自己写的，思路与实现的方法可能还有不完善的地方，大神们喷时还请手下留情。
刚说到本屌丝要发表处女作教程了，那是什么教程呢？看标题就已经八九不离十了。效果就是：鼠标滑过遮罩层中心放大，移到时遮罩层中心缩小。可能会有吧友说这个是css3里面的scale(),但我要明确有指出这个是jq实现的，你没有听错，是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实现鼠标滑过中心放大遮罩层</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<script type="text/javascript" src="http://www.yilingsj.com/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="http://www.yilingsj.com/"><img src="logo.jpg" /><span class="sp_sc"></span></a>
</div>
</body>
</html>
源码效果图一张：
复制源码进行保存预览即可看到效果。
提示：自己更换图片的链接即可，发现自己上的图片链接被反译成图片了，郁闷...
原文章地址：http://www.yilingsj.com/jquery/2013-10-23/102.html
刚说到本屌丝要发表处女作教程了，那是什么教程呢？看标题就已经八九不离十了。效果就是：鼠标滑过遮罩层中心放大，移到时遮罩层中心缩小。可能会有吧友说这个是css3里面的scale(),但我要明确有指出这个是jq实现的，你没有听错，是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实现鼠标滑过中心放大遮罩层</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<script type="text/javascript" src="http://www.yilingsj.com/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="http://www.yilingsj.com/"><img src="logo.jpg" /><span class="sp_sc"></span></a>
</div>
</body>
</html>
源码效果图一张：
复制源码进行保存预览即可看到效果。
提示：自己更换图片的链接即可，发现自己上的图片链接被反译成图片了，郁闷...
原文章地址：http://www.yilingsj.com/jquery/2013-10-23/102.html
