您好,游客注册登录繁體
首页 >> jquery >> jQuery轻量级简单实用的图片放大镜特效

jQuery轻量级简单实用的图片放大镜特效

Tyna 2015-06-13 0
浏览次数885

 

摘要: zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件。这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大。鼠标进入和离开图片区域时都带有淡入淡出的效果。 ...

 


04a.jpg

 
  简要教程
 
  zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件。这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大。鼠标进入和离开图片区域时都带有淡入淡出的效果。该图片放大镜插件的浏览器兼容性非常好,可以兼容IE7+的IE浏览器。


  安装
 
  你可以使用bower来安装该图片放大镜插件。

 

  1. bower install zoomtoo

复制代码


  使用方法
 
  使用该图片放大镜需要引入jQuery和jquery.zoomtoo.js文件。
 

  1. <script src="jquery/2.1.4/jquery.min.js"></script>
  2. <script src="dist/jquery.zoomtoo.js"></script>

复制代码


  HTML结构
 
  该图片放大镜的HTML结构将一个图片包裹在一个容器中即可。包裹容器用于定位。
 

  1. <div id="#frame">
  2.     <img src="low_res.jpg" data-src="high_res.jpg" />
  3. </div>

复制代码


  初始化插件
 
  在页面加载完毕之后,可以通过下面的方法来初始化该放大镜插件。
 

  1. $("#frame").zoomtoo({
  2.     magnify: 1
  3. });

复制代码


  配置参数
 
  下面是该放大镜插件的默认配置参数。
 

  1. $("#demo").zoomToo({
  2. // 持续时间,单位毫秒
  3. showDuration: 500,
  4. moveDuration: 1200,
  5. // 初始化放大级别
  6. magnify: 1,
  7. // 镜头的宽度和高度
  8. lensWidth: 200,
  9. lensHeight: 200
  10. });

复制代码


  查看演示请点击    下载插件请点击04a.zip
 
  浏览器兼容
 
  Firefox 2+ (Win, Mac, Linux);
  IE7+ (Win);
  Chrome 6+ (Win, Mac, Linux, Android, iPhone);
  Safari 3.2+ (Win, Mac, iPhone);
  Opera 8+ (Win, Mac, Linux, Android, iPhone).

 
学习来源:http://www.html5cn.org/article-8218-1.html

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<