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 ...
随机推荐
- python中多线程
多线程 什么是多线程 开启线程的两种方式 进程和线程的区别 Thread对象的其他属性和方法 守护线程 死锁现象与递归锁 信号量.Event定时器 线程Queue 进程池和线程池 什么是多线程 在传统 ...
- python 保存文件时候, 去除名字中的非法字符
import re def validateTitle(title): rstr = r"[\/\\\:\*\?\"\<\>\|]" # '/ \ : * ? ...
- hasura graphql server (haskell)构建
安装 &&运行pg(docker) version: '3.6' services: postgres: image: postgres environment: - "PO ...
- 提高ASP.NET页面载入速度的方法
前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 目录 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流str ...
- flash exe to flv swf
一般婚纱视频的文件都是用adobe软件转化为exe文件,所以只能用adobe flash打开,想上传到网上供朋友欣赏,却发现格式不对,那么我们可以用以下的方法将exe格式的视频转化为swf和flv等视 ...
- java之 JVM 内存管理详解
一.JVM结构 根据<java虚拟机规范>规定,JVM的基本结构一般如下图所示: 从左图可知,JVM主要包括四个部分: 1.类加载器(ClassLoader):在JVM启动时或者在类运行时 ...
- github之本地上传
在打算上传到github之前需要在github上面首先创建一个项目(点击右上角“+”号,点击New repository):
- 获取刚刚插入表格的这条信息的自增ID
获取刚刚插入表格的这条信息的自增ID var conn=getConnection(); var msql="INSERT INTO " + table +" (&quo ...
- Python自然语言处理（1）：初识NLP
由于我们从美国回来就是想把医学数据和医学人工智能的事认真做起来,所以我们选择了比较扎实的解决方法,想快速出成果的请绕道.我们的一些解决方法是:1.整合公开的所有医学词典,尽可能包含更多的标准医学词汇: ...
- babun编译安装git(2.12.0)遇到的问题及解决办法
1. 下载git wget https://www.kernel.org/pub/software/scm/git/git-2.12.0.tar.xz 你或许需要加上选项: --no-check-ce ...