artZoom 图片可放大旋转
<link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
<div id="demo" class="text-center">
<a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>
</div>
<style type="text/css">
.artZoom {
padding: 3px;
background: #FFF;
border: 1px solid #EBEBEB;
} body {
font-size: 75%;
font-family: '微软雅黑';
padding-bottom: 200px;
} img {
border: 0 none;
} #demo {
width: 540px;
padding: 5px;
background: #FBFCFD;
}
</style>
<script type="text/javascript">
jQuery(function ($) {
$('.artZoom').artZoom({
path: './images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果 // 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>artZoom</title>
<link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.artZoom').artZoom({
path: './images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果 // 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
});
</script>
<style type="text/css">
.artZoom {
padding: 3px;
background: #FFF;
border: 1px solid #EBEBEB;
} body {
font-size: 75%;
font-family: '微软雅黑';
padding-bottom: 200px;
} img {
border: 0 none;
} #demo {
width: 540px;
padding: 5px;
background: #FBFCFD;
}
</style>
</head>
<body>
<div id="demo" class="text-center">
<a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>
</div>
</body>
</html>
完！
artZoom 图片可放大旋转的更多相关文章
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）
惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...
- Android------实现图片双击放大，缩小，左右滑动的多种方式
项目中常常有图片浏览功能.像微信朋友圈图片浏览,QQ空间照片浏览 的功能. 实现图片双击放大,缩小,左右滑动等效果. 来看看我的效果图,希望能满足你的要求 前三个button按钮是参考网上的多种实 ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- canvas 图片拖拽旋转之一——坐标转换translate
引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...
- Android 本地/网路下载图片实现放大缩小
Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...
- Android 图片的放大缩小拖拉
package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...
- JS中图片的放大缩小没反应
这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...
随机推荐
- 用halcon提取衣服徽章
收到一封email,有个学员求助去除衣服上纹理的干扰,然后提取衣服上徽章的边缘的方法. 我想他肯定是个很努力上进的boy,在求助以前也许已经试过各种方法,通过二值化不断的调试阈值, 寻找各种边 ...
- jQuery的无new创建方法
一般我们去写一个框架,会采用什么样的设计呢?比如设计一个jQuery框架,一般我们会创建一个函数对象 function jQuery(params){ //构造函数 }jQuery.prototype ...
- CentOS6.5系统服务
服务名称 功能 默认 建议 备注说明 NetworkManager 用于自动连接网络,常用在Laptop上 开启 关闭 对服务器无用 abrt-ccpp 开启 自定 对服务器无用 abrt-oop ...
- 谈一谈手机WebApp的fixed属性（手机上的固定栏）【转】
1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...
- Winform创建解决方案
Winform的开发工具可以使用VS2005---VS2013,版本在不断升级,VS的功能也越来越强大.本系列文章采用VS2012(以后全称VS)演示. 窗体是winform开发的基础,需要掌握窗体的 ...
- I.MX6 CAAM
/********************************************************************************* * I.MX6 CAAM * 说明 ...
- Java其他API介绍
有一些类虽然不像集合.多线程.网络编程中的类那样属于Java中的核心类,但是它们在开发过程中给我们带来很多便利,这里就对它们做下简要的介绍和演示. 一.System类 System类中的构造方法是私有 ...
- SD卡驱动学习
https://blog.csdn.net/zqixiao_09/article/category/6163492 sd 协议解析: https://blog.csdn.net/g_salamande ...
- 国内yum源的安装(163，阿里云，epel)
----阿里云镜像源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的 ...
- nginx禁止非sever_name指定域名访问
禁止非sever_name指定域名访问,将其访问指向默认站点: 设置非server_name指定域名访问,将该访问重写到test.1comserver { listen 80 default; rew ...