课程中心 问答&分享 读书 注册、登录 关闭菜单
hcZoom - 图片缩放插件、图片放大镜特效教程
课程介绍:
HcZoom 是一款免费的、开源的图片缩放jQuery插件。具有使用简单、完美兼容 (ie 6 及以上、火狐、谷歌等各类浏览器)、配置方灵活等特点。
发布时间 : 2015-05-26  浏览 : 3192 次
教程内容

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


相关教程
CopyRight © 2011 - 2016 Hcoder.net 陕ICP备14004669号-2
客服QQ : 1265928288
mui的App开发实战教程《有道词典》已发布!
总计10节:
1、入口页面布局子页面布局
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式,腾讯课堂:
https://ke.qq.com/course/194834

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!