浙江 杭州

纯js图片放大镜插件-Magnifier

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2015-06-11

人气10352

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


Magnifier是一款使用纯js制作的图片放大镜插件。Magnifier放大镜插件几乎兼容所有浏览器,它可以使用鼠标滚轮放大缩小图片,并且具有像幻灯片一样切换图片的功能。

Magnifier是一款实用纯js制作的图片放大镜插件。它有以下一些特定:

  • 可以使用鼠标滚轮放大缩小图片。
  • 可以通过js或data属性来设置选项。
  • 一次调用可以附加多张图片。
  • 用户可以自定义鼠标进入、离开、移动事件。
  • 加载大图片时可以显现等待文本。

浏览器支持

  • Chrome 24
  • Firefox 18
  • IE 7, 8, 9, 10
  • Safari for Windows 5.1.7

基本使用方法

首先引入css文件

<link rel="stylesheet" type="text/css" href="magnifier.css">
                
<div>
    <a class="magnifier-thumb-wrapper" href="big.jpg">
        <img id="thumb" src="thumb.jpg">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>
                

调用插件

引入js文件

<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="Magnifier.js"></script>
                
<script type="text/javascript">
  var evt = new Event(),
  m = new Magnifier(evt);
  m.attach({
    thumb: '#thumb',
    large: 'big.jpg',
    largeWrapper: 'preview'
});
</script>
                

可用参数

  • thumb(string):ID or class of the image element to magnify preceded by "#" or "."
  • large(string):large image URL
  • largeWrapper(string):ID of the element where large image will be appended
  • zoom(int):initial zoom level
  • zoomable(bool):enable zoom in / out using mouse wheel
  • onthumbenter(callback):function to call on thumbnail enter event
  • onthumbmove(callback):function to call on thumbnail move event
  • onthumbleave(callback):function to call on thumbnail leave event
  • onzoom(callback):function to call on zoom event

更多信息请参看:https://github.com/mark-rolich/Magnifier.js

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:11.78KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-986.html 非特殊说明,本文版权归原作者所有,转载请注明出处
纯js图片放大镜插件-Magnifier

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

    
标签 放大镜 

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)