快速完成(图片旋转,查看原图)

一个小小的前端需求送给大家,使用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>

这组前端功能直接可以当做工具来使用即可,好了帅不过三秒,可能要要被管理员踢出首页区了,如有缘分,下篇再续前缘,拜拜。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Fiori里花瓣的动画效果实现原理

Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。

26890
来自专栏Youngxj

给你的博客文章加入”展开/收缩功能‘’

30320
来自专栏数据小魔方

单元格格式/条件格式的妙用

今天跟大家分享一种常用的技巧——利用单元格格式/条件格式按颜色划分不同数据等级。 ▽▼▽ 这个技巧在绩效管理、成绩考评以及其他设计考核的工作中都会经常用到。首...

66070
来自专栏ytkah

通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片...

28330
来自专栏DannyHoo的专栏

iOS中将图片保存到自定义相册中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

29120
来自专栏DannyHoo的专栏

xib适配

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

14920
来自专栏python爬虫实战之路

博客园自动发帖--图像处理极验验证码

为了写这篇文章,先写了两篇爬虫cookies详解和selenium+requests进行cookies保存读取操作,感兴趣的朋友可以看看前两篇文章。

10410
来自专栏大数据互联网思维

如何利用迅捷画图绘制工作流程图

迅捷画图可以绘制流程图,思维导图并且能制作的很精美出来,那怎样利用迅捷画图绘制工作流程图呢?下面是小编辑总结的操作方法,可以参考步骤进行操作使用。

27740
来自专栏练小习的专栏

几种SVG图像的fallbacks

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。 一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比...

20250
来自专栏娱乐心理测试

关于jQuery的浅谈学习

14540

扫码关注云+社区

领取腾讯云代金券