js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图。
主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件,具体的用法我不多阐述,说多了我描述不精准,说少了大家认为我胡扯,直接把实现的步骤给各位总结一下{我的原则是以实现需求为主}。还有一个就是使用一个模板文件展示图片的大图。
各个文件的目录结构如下:
jsp代码如下:
<form action="" id="img_xuanzhuan">
<div id="imgs_div">
<a href="${zxz}/html/image.html?path=${zxz}/images/33.jpeg" target="_blank">
<img style="height: 300px; width: 400px;" src="${zxz}/images/33.jpeg">
</a>
<a href="${zxz}/html/image.html?path=${zxz}/images/33.jpeg" target="_blank">
<img style="height: 300px; width: 400px;" src="${zxz}/images/33.jpeg">
</a>
</div>
<div>
<input type="button" value="旋转" id="xuanzhuan">
</div>
</form>
用户点击"旋转"按钮实现图片的旋转功能(这段js代码需要单独提取成一个js文件,在jsp文件中引入即可):
/*
*点击旋转按钮,图片旋转。
*/
var current = 0;
$("#img_xuanzhuan").delegate("#xuanzhuan","click",function(){
current = (current+90);
$('#imgs_div').find('img').css({
"transform" : "rotate("+current+"deg)",
"-o-transform" : "rotate("+current+"deg)",
"-ms-transform" : "rotate("+current+"deg)",
"-moz-transform" : "rotate("+current+"deg)",
"-webkit-transform" : "rotate("+current+"deg)"
})
});
由上面的jsp文件中可以看出img标签外面嵌套了一层超链接,点击即可查看大图,新建一个html文件,引入如下代码:
<script>
var url = window.location.search;
var path = url.substring(url.indexOf('=') + 1, url.length + 1);
document.write('<div style="text-align:center;font-size:0;"><img style="max-width:100%" src="'+path+'" /></div>');
</script>
这组前端功能直接可以当做工具来使用即可,好了帅不过三秒,可能要要被管理员踢出首页区了,如有缘分,下篇再续前缘,拜拜。
js实现图片旋转、模板文件查看图片大图之记录篇[二]的更多相关文章
- Java给图片和PDF文件添加水印(图片水印和文字水印)
有时候我们看到的图片或者PDF文件会自动加上水印.分为文字水印和图片水印. ----------------------------图片水印---------------------------- 1 ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
- 关于markdown文件插入图片遇到的小问题和解决办法
今天用md文件时候发现需要插入图片,以前没做过,所以写下来分享下. 1.先在自己的github上建一个仓库,里面新建个img文件夹存放图片,怎么建仓库可以上网找资料,这里就不详细说明了.建好的仓库如下 ...
- ubuntu 终端查看图片(eog)
远程登陆服务器的话,是没有办法直接查看图片的,这时我们需要进入图片所在目录,然后通过终端命令查看图片. 想要查看图片,需要通过ssh -X登陆,然后在终端输入命令: eog 图片名
- discuz模板文件列表
template/default/common模板公共文件夹,全局相关 |--block_forumtree.htm 树形论坛版块分支js文件 |--block_thread.htm特 ...
- discuz默认模板文件结构详解-模板文件夹介绍
| — template — default 系统内置风格模板(默认风格)| — template — default – discuz_style_default.xml 风格安装文件,可用 ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
- Django配置静态文件(CSS\js)及Django调用JS、CSS、图片等静态文件
1 新建一项目: root@python:django-admin.py startproject csstest root@python:cd csstest root@python:ls csst ...
随机推荐
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- java基础之位运算
java中常见的位运算符:&(逻辑与) |(逻辑或) ~(取反) ^(逻辑异或) >>(右移) <<(左移) >>>(无符号右移) &(逻辑与 ...
- phpcms通过URL传参
在PHPCMS中都会遇到通过URL传参数的问题,但是默认的只能取到$catid.$page等这类的值,特别是伪静态之后,想获得其他参数根本不可能,有的人用$_GET["参数"]这种 ...
- [Leetcode] Binary search, Divide and conquer--240. Search a 2D Matrix II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Python爬虫-爬小说
用途 用来爬小说网站的小说默认是这本御天邪神,虽然我并没有看小说,但是丝毫不妨碍我用爬虫来爬小说啊. 如果下载不到txt,那不如自己把txt爬下来好了. 功能 将小说取回,去除HTML标签 记录已爬过 ...
- 快速上手 Kotlin 的 11 招
本文转载自 Kotlin 公众号(KotlinX) 作者:bennyhuo 最近经常会收到一些 "用 Kotlin 怎么写" 的问题,作为有经验的程序员,我们已经掌握了一门或者多门 ...
- FastReport.NET 中使用二维码
FastReport.net 是一个比较好用的报表控件,在编辑器中编辑以后 可以直接在vs 中引用. 最近在研究fastreport 现在讲解一下 如何使用它的二维码. fastreport 没有单独 ...
- 导入网页数据到 Google Sheet
数据没有用,我们需要的是数据所反映出来的东西.增长率,排名,占比等.而这些结果是通过分析数据得到的. 从网上搜集到数据后,导入到表格程序中便可以进行方便地分析处理了.下面介绍将网页中的表格数据导入到 ...
- Python----Windows环境下安装Flask
Flask是Python中web开发的一个轻框架,掌握起来比较简单,想体验一下,先从安装Flask开始. 我是在Widows环境下安装的Flask,在Linux环境下也一样,无非就是安装几个依赖和开发 ...
- websocket多线程问题
title: websocket多线程问题 date: 2017-06-28 11:21:24 categories: websocket tags: [websocket] --- 开发框架 spr ...