拖拖拉拉准本了一个月,终于把网站做好了。也终于可以分享这两个插件了。这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件)。都适合在一些商城类、产品类的网页中使用。希望大家会喜欢。

Enlarge.js

Enlarge.js 是一个基于 jQuery 的插件,可以非常方便地实现图放大镜的效果,适用于大多数商品类网站,例如在线商城、电子商务、企业产品介绍等。

更多介绍及下载:http://www.abelcode.com/enlarge/

EnlargeTouch.js

EnlargeTouch.js 是 Enlarge 插件面向触摸屏使用的版本,它原生基于 JavaScript 实现,无需依赖第三方类库,可方便部署于移动版的网站或客户端,节省流量,同时为网站提升用户体验。

更多介绍及下载:http://www.abelcode.com/enlarge-touch/

一点截图:

[原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js的更多相关文章

  1. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  2. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  3. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  4. 图片放大镜插件 Cloud Zoom v3.1

    Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 猛击这里查看演示DEM ...

  5. jQuery Cloud Zoom:图片放大镜插件 破解插件

    /* Cloud Zoom 10 Site License (CZ01-10). Version 3.1 rev 1312051822 */ (function(e) { function s(a) ...

  6. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  7. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  8. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  9. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

随机推荐

  1. JS时间

    function checkStartTime(){ var d1 = new Date(); var endTime = document.getElementById("secCreat ...

  2. JavaScript高级 面向对象的程序设计 (一)《JavaScript高级程序设计(第三版)》

    创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...

  3. CentOS-6.4无线上网命令行配置

      参考:http://www.vfeelit.com/504.html 待连接的WIFI的ssid为“thm”,密码为12345678,认证方式为WPA2-PSK   1. 检查无线网卡驱动是否安装 ...

  4. Spring事务:传播行为与隔离级别

    文章主要来源:https://github.com/dengdaiyemanren/onetopiconeday/wiki/spring%E4%BA%8B%E5%8A%A1%E9%85%8D%E7%B ...

  5. 常规轮询请求,客户端用Ajax调webservice的方法

    服务端发布webservice,下图方框中的一定要有 客户端代码 <script type="text/javascript"> $(document).ready(f ...

  6. [leetcode]_Merge Sorted Array

    题目:合并两个有序数组A , B,将合并后的数组存到A中.假设A的空间足够装下A和B所有的元素. 思路:这道题考虑如果正向扫描两个数组,则每插入一个元素,则需移动A后的所有元素.换个角度想,既然元素个 ...

  7. php 购物车的例子

    网上搜到的,简单容易理解.cookie存购物车ID,db存购物车数据. //购物车session的产生代码   1 if(! $session && ! $scid) {    2 / ...

  8. 新浪微博登录界面上下拉伸图片--第三方开源--PullToZoomListViewEx(二)

    这是PullZoomView在ScrollView实现,Android PullZoomView在ScrollView的实现是:PullToZoomScrollViewEx 下载地址:https:// ...

  9. ajax 注意点

    1. 为了把数据发送到服务器,应该使用POST 方法,为了从服务器检索数据,应该使用GET 方法. 2.ajax 完整参数, url  发送的地址 http://localhost/default.a ...

  10. L2-015. 互评成绩

    学生互评作业的简单规则是这样定的:每个人的作业会被k个同学评审,得到k个成绩.系统需要去掉一个最高分和一个最低分,将剩下的分数取平均,就得到这个学生的最后成绩.本题就要求你编写这个互评系统的算分模块. ...