最新消息:欢迎加入小松的QQ群一起讨论一起学习,多说即将关闭,感觉好可惜啊

jQuery图片放大镜插件Cloud Zoom

前端技术 1726浏览 0评论

先来看一个效果图

Cloud Zoom放大镜插件效果图1 Cloud Zoom放大镜插件效果图2
网站上产品要做个放大镜效果,于是是网站看到一个jQuery图片放大镜插件Cloud Zoom
,拿来用用
在百度里搜索Cloud Zoom没有找到官网,郁闷,然后在google里查找了一下
http://www.starplugins.com/cloudzoom/trial
上面的地址是Cloud Zoom官网的下载地址,如果不会下或者官网打不开,我已经放到百度云盘了
http://pan.baidu.com/s/1bnaZa7H
基本的使用方法

<!DOCTYPE html>
<html>

<head>
<title>Cloud Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Include jQuery. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<!-- Include Cloud Zoom CSS. -->
<link rel="stylesheet" type="text/css" href="cloudzoom.css" />

<!-- Include Cloud Zoom script. -->
<script type="text/javascript" src="cloudzoom.js"></script>

<!-- Call quick start function. -->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
</head>

<body>
<img class = "cloudzoom" src = "images/small/image1.jpg"
data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
</body>

</html>

下载下来的文件中有个index.htm,基础使用方法
具体的参数请查看这个
http://www.starplugins.com/cloudzoom/quickstart

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» jQuery图片放大镜插件Cloud Zoom
本文链接地址:https://www.phpsong.com/491.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (2)

加载中,请稍候...
  1. 真在找这个插件
    武汉2年前 (2015-03-15)回复
  2. 写前端必须搜藏 :grin:
    A5商学院2年前 (2015-03-19)回复