在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

图片内部放大和移动jQuery

轮子 发表于 6 天前 | 栏目:网页特效
网站特效
效果: 图片 
脚本: jQuery特效 
201607111519.jpg


简要教程
zoomove是一款可以在鼠标滑过图片时在图片内部放大图片并移动的jQuery插件。zoomove使用简单,可以通过配置参数来控制图片的放大倍数和是否跟随鼠标移动等。
安装
可以通过bower或npm来安装在zoomove图片放大插件。
$ npm install zoomove --save
$ bower install zoomove --save                  
使用方法
在页面中引入zoomove.min.css和jquery、zoomove.min.js文件。
<link rel="stylesheet" href="zoomove.min.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="zoomove.min.js" type="text/javascript"></script>                  
HTML结构

可以使用<figure >或<img >元素来作为图片的容器。
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>      
初始化插件

在页面DOM元素加载完毕之后,可以通过ZooMove()方法来初始化该图片放大插件。
$('.zoo-item').ZooMove();               
配置参数
参数        默认值        描述
zoo-image        --        要进行放大的图片的URL地址。
zoo-scale        1.5 (150%)        设置图片放大的倍数。
zoo-move        true        图片在鼠标移动时是否跟随移动。
zoo-over        false        设置图片放大后是否超出原图片的范围。
zoo-cursor        false        设置鼠标样式是pointer还是default。
可以在HTML中通过属性来使用这些配置参数。
<!-- HTML Element -->
<figure
  class="zoo-item"
  zoo-image="[value]"
  zoo-scale="[value]"
  zoo-move="[value]"
  zoo-over="[value]"
  zoo-cursor="[value]"
  >
</figure>                  
也可以使用js来进行初始化。
<!-- JavaScript -->
<script>
   $('.zoo-item').ZooMove({
       image: '[value]',
       scale: '[value]',
       move: '[value]',
       over: '[value]',
       cursor: '[value]'
   });
</script>                  
应用举例
在demo中的3种图片放大效果的HTML代码分别如下:
图片1:
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>                  
图片2:
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>                  
图片3:
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>      
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。