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 ...
随机推荐
- reg文件中文乱码
用reg文件方式修改注册表很方便,但是如果字段中有中文的话,执行reg文件后,注册表中的中文出现乱码. 解决办法:将文件保存文Unicode编码方式即可.(保存文UTF8编码也是不行的) 附一个添加\ ...
- Struts2基本使用（一）--在项目中引入Struts2
Struts2基本使用 在MVC开发模式中,Struts2充当控制器(Controller)的角色.其主要功能就是处理用户请求,生成响应,是连接视图层(View)和模型层(Model)的桥梁.在处理用 ...
- js设计模式整理
单例模式 恶汉式单例 实例化时 懒汉式单例 调用时构造函数模式 1.实现一 function Car(model, year, miles) { this.model = model; this.ye ...
- 史上最全的maven的pom.xml文件详解（转载）
此文出处:史上最全的maven的pom.xml文件详解——阿豪聊干货 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...
- ConfigurationManager 引用
即使在代码中添加了using System.Configuration 也不会自动出来ConfigurationManager, 需要到项目的Reference手动引用Configuration的dl ...
- 为Python编写一个简单的C语言扩展模块
最近在看pytorh方面的东西,不得不承认现在这个东西比较火,有些小好奇,下载了代码发现其中计算部分基本都是C++写的,这真是要我对这个所谓Python语音编写的框架或者说是库感觉到一丢丢的小失落,细 ...
- [UOJ300][CTSC2017]吉夫特
uoj bzoj luogu sol 根据\(Lucas\)定理,\(\binom nm \mod 2=\binom{n\%2}{m\%2}\times\binom{n/2}{m/2}\mod 2\) ...
- C#拦截系统消息
首先我们看下有哪几种拦截系统消息的方法: //一.截取系统消息//方法一://添加监视消息private void Form_Load(object sender, System.EventArgs ...
- 东芝笔记本Satellite M40-A
1. 问题:开机F2/Fn+F2进入不了BIOS 原因:当安装了Windows10/Windows8并且开启了快速启动,开机F2会进入不了BIOS或者F12进入不了U盘启动选择 解决方法:进入 开始- ...
- php7新特性一览
1.太空船操作符 用于比较2个表达式,例如当\(a小于,等于或大于\)b时,分别返回-1,0,1 php echo 1 <=> 1; //0 echo PHP_EOL; echo 1 &l ...