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 ...
随机推荐
- Javascript实现重力弹跳拖拽运动效果
声明: By:GenialX 个人主页:胡旭博客 - www.ihuxu.com QQ:2252065614 演示地址: http://www.ihuxu.com/project/gcdmove/ 调 ...
- vue.js 源代码学习笔记 ----- codegen.js
/* @flow */ import { genHandlers } from './events' import { baseWarn, pluckModuleFunction } from '.. ...
- 第一个openGL程序
一.工具的安装 因为要写C++程序,为了便捷,这里我安装的Visual Studio: 免费使用90天!安装好了之后,我们要为我们的开发安装相应的工具集: 因为我是要在windows上跑的,所以选择如 ...
- 40道Java基础常见面试题及详细答案
最近看到网上流传着各种面试经验及面试题,往往都是一大堆技术题目贴上去,但是没有答案. 为此我业余时间整理了40道Java基础常见的面试题及详细答案,望各路大牛发现不对的地方不吝赐教,留言即可. 八种基 ...
- It is the courage
It is the reality that a society which becomes lower and becomes weak.Believe it or not,I think it i ...
- threejs通过射线Ray获取指定的点
例:获取cube方向上的面的中点坐标(该cube默认方向为(0,1,0)) (中心点向cube quaternion 方向上发射射线,与正前方的面相交的点即为目标点; 由于ray只支持box和face ...
- python3.5 安装 numpy1.14.4
AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) WIN32 import pip print(pi ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
- C#多线程应用：子线程更新主窗体控件的值（一）
我记得以前写过一次关于多线程的调用及更新的文章,由于时间比较久了,现在一时没找到.在做项目的时候,用到了多线程,还是有很多的同事在问多线程更新主窗体的事情,现在就这个事情做个记录. 说起多线程之间的更 ...
- java内存上堆和栈的一些理解
多线程上的基本类型:https://blog.csdn.net/championhengyi/article/details/76857401