Zoomio-jQuery图片内部放大插件

当前位置:主页 > jQuery库 > 图片效果 > Zoomio-jQuery图片内部放大插件
Zoomio-jQuery图片内部放大插件
分享:

    插件介绍

    Zoomio是一款简单实用的图片内部放大jQuery插件。通过zoomio插件可以轻松的制作图片内部放大效果,它兼容IE8浏览器,也可以用它来制作带图片放大效果的图片画廊。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-03
    阅读:
麦子学院
简要教程

Zoomio是一款简单实用的图片内部放大jQuery插件。通过zoomio插件可以轻松的制作图片内部放大效果,它兼容IE8浏览器,也可以用它来制作带图片放大效果的图片画廊。

使用方法

在页面中引入zoomio.css和jquery和zoomio.js文件。

<link rel="stylesheet" href="css/zoomio.css">
<script src="js/jquery.min.js"></script>
<script src="js/zoomio.js"></script>             
                
HTML结构

在页面中添加一张图片。

<img class="sampleimage" src="img/1.jpg" />    
                
CSS样式

将图片设置的比原图小一些。

.sampleimage{
  width: 300px;
  height: auto;
}                 
                
初始化插件

在页面DOM元素加载完毕之后,通过zoomio方法来初始化该图片放大插件。

$(function(){
  $(".sampleimage").zoomio();
})
                

配置参数

zoomio图片放大插件的可用配置参数有:

参数 描述
fadeduration 淡入淡出效果的持续时间,单位毫秒。
w 缩放区域的宽度,雷子为字符串,例如:'300px','80%'
h 缩放区域的高度,雷子为字符串,例如:'300px','80%'

Zoomio图片放大插件的官方网址为http://www.dynamicdrive.com/dynamicindex4/zoomio.htm

网友评论