快速完成(图片旋转,查看原图)
时间:2022-04-24
本文章向大家介绍快速完成(图片旋转,查看原图),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图。
主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件,具体的用法我不多阐述,说多了我描述不精准,说少了大家认为我胡扯,直接把实现的步骤给各位总结一下{我的原则是以实现需求为主}。还有一个就是使用一个模板文件展示图片的大图。
各个文件的目录结构如下:
jsp代码如下:
1 <form action="" id="img_xuanzhuan">
2 <div id="imgs_div">
3 <a href="${zxz}/html/image.html?path=${zxz}/images/33.jpeg" target="_blank">
4 <img style="height: 300px; width: 400px;" src="${zxz}/images/33.jpeg">
5 </a>
6 <a href="${zxz}/html/image.html?path=${zxz}/images/33.jpeg" target="_blank">
7 <img style="height: 300px; width: 400px;" src="${zxz}/images/33.jpeg">
8 </a>
9 </div>
10 <div>
11 <input type="button" value="旋转" id="xuanzhuan">
12 </div>
13 </form>
用户点击"旋转"按钮实现图片的旋转功能(这段js代码需要单独提取成一个js文件,在jsp文件中引入即可):
1 /*
2 *点击旋转按钮,图片旋转。
3 */
4 var current = 0;
5 $("#img_xuanzhuan").delegate("#xuanzhuan","click",function(){
6 current = (current+90);
7 $('#imgs_div').find('img').css({
8 "transform" : "rotate("+current+"deg)",
9 "-o-transform" : "rotate("+current+"deg)",
10 "-ms-transform" : "rotate("+current+"deg)",
11 "-moz-transform" : "rotate("+current+"deg)",
12 "-webkit-transform" : "rotate("+current+"deg)"
13 })
14 });
由上面的jsp文件中可以看出img标签外面嵌套了一层超链接,点击即可查看大图,新建一个html文件,引入如下代码:
1 <script>
2 var url = window.location.search;
3 var path = url.substring(url.indexOf('=') + 1, url.length + 1);
4 document.write('<div style="text-align:center;font-size:0;"><img style="max-width:100%" src="'+path+'" /></div>');
5 </script>
这组前端功能直接可以当做工具来使用即可,好了帅不过三秒,可能要要被管理员踢出首页区了,如有缘分,下篇再续前缘,拜拜。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 47. Vue使用children属性实现路由嵌套
- RecyclerView的缓存机制和内存优化
- 使用Anchore Enine来完善DevSecOps工具链
- PyTorch版CenterNet训练自己的数据集
- SpringBoot2 整合FreeMarker模板,完成页面静态化处理
- PHP多文件上传格式化
- NDK开发案例 | C/C++调用java层代码
- 深入理解 SecurityConfigurer 【源码篇】
- Swift 属性
- Swift 类和结构体
- 使用深度学习和OpenCV的早期火灾检测系统
- 【时序预测】一文梳理时间序列预测——ARMA模型
- 三分钟Kubernetes-环境搭建篇
- Linux分区页框分配器之水位
- 使用GPU训练模型