hcZoom - 图片缩放插件、图片放大镜特效教程
发布时间 : 2015-05-26  浏览 : 3450 次

HcZoom 是一款免费的、开源的图片缩放jQuery插件。具有以下特点:

1. 使用简单,只需简单的2行代码即可完成特效的编写。
2. 兼容 ie (6 及以上版本)、火狐、谷歌等各类浏览器。ietester 下i6有透明bug,在真实ie浏览器中无问题!
3. 核心属性可以通过hc_zoom 属性进行配置,方便、灵活。

演示地址: http://www.hcoder.net/zoom/

html代码:

<div class="small_img" style="width:358px; height:400px; float:left; border:10px solid #FFFFFF;"> 
<img src="images/small.jpg" />
<img src="images/large.jpg" style="display:none;" />
</div>

js代码

<script src="hc_zoom.js"></script>
<script>
//请保证引用了jQuery.js
$(function()
{
$('.small_img').hc_zoom();
});
</script>

hc_zoom属性设置规则:

您可以通过设置大图的 hc_zoom 属性来设置缩放效果的相关属性,语法
<img src="images/large.jpg" style="display:none;" hc_zoom="属性:'取值'" />
注意取值需要用单引号引起来!!!
属性名称、作用、取值示例或范围介绍: 
position : 设置大图的展示位置,默认右侧展示,可以设置为 'left', 'right'。
margin : 设置大图的展示位置距小图的间距,可以设置为一个数字。
border : 放大镜的边框设置,可以设置的值: '5px solid #888888',一个完整的边框样式。
bg_color : 遮罩背景的颜色,默认 '#FFFFFF',可以设置成一个颜色编码 '#.....'。
opacity : 遮罩背景的透明度,默认 0.3,可以设置为 0.1 ~ 1 直接的数值。
large_border : 设置大图的边框,可以设置的值: '5px solid #888888',一个完整的边框样式。
auto_change : 是否开启鼠标滑轮滚动 默认 true,可设置的值 true false


课程介绍:
HcZoom 是一款免费的、开源的图片缩放jQuery插件。具有使用简单、完美兼容 (ie 6 及以上、火狐、谷歌等各类浏览器)、配置方灵活等特点。
课程章节
教程更新
More...