Welcome, Old Sport!

超简单图片缩放插件 CSS & jQuery

by ilikecss ON 2011/01/24 5306

网上找到的一个不错的插件叫Zoomy是一个非常容易实现的jQuery插件,它可以实现图像放大的功能。除了缩略图以外还需要一张原始尺寸的图片。这边焦点部分使用了CSS3技术,如果是IE用户可能看到焦点形状不是圆形,另外图片还有个加载效果。

Step1. 创建HTML

<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" /></a></p>

Step2. 创建CSS

#zoomy { 
	width: 500px; 
	margin: 0 auto;
	border: 1px solid #2d353f;
	padding: 5px;
}
.zoomy{
    position: absolute;
    display: none;
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000;
    -moz-box-shadow: 3px 3px 10px #000;
    border: 0;
    cursor: url(../images/blank.gif), move;
    line-height: 100px;
    text-align: center;
    background-image: url(../images/loading.gif);
    background-position: center;
    background-color: #fff;
    z-index: 1000;
}
.zoomy span{
    display: block;
    margin: 10px auto;
    background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
    background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);
}
.zoomy img{
    opacity: 0;
    filter: alpha(opacity=0);
}
.zoomy a{
    color: #333;
    text-decoration: none;
}
.broke a{
    display: block;
    height: 100%;
    width: 100%;
}
#brokeZoomy{
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0px;
    left: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background: #fff url(../images/broke.gif) center no-repeat;
}

Step3. 插入jQuery和脚本包

脚本:

$(function(){    
        $('.zoom').zoomy();
});

脚本包和插件:

<script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zoomy0.5.min.js"></script>
目前还没有评论



TOP