<!doctype html>
<html>
<head>
<meta charset="utf-8"> <title></title> <script> function imageRotation(name) { document.getElementById('image').className = name; } </script> <style> .rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .flip-horizontal { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1) } .flip-vertical { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1) } </style> </head> <body> <img src="images/1.png" width="500" contextmenu="demo-image" id="image" /> <menu id="demo-image" type="context"> <menu label="旋转图像"> <menuitem icon="images/icon1.png" οnclick="imageRotation('rotate-90')" >旋转90度</menuitem> <menuitem icon="images/icon2.png" οnclick="imageRotation('rotate-180')">旋转180度</menuitem> <menuitem icon="images/icon4.png" οnclick="imageRotation('flip-horizontal')">水平翻转</menuitem> <menuitem icon="images/icon3.png" οnclick="imageRotation('flip-vertical')">垂直翻转</menuitem> </menu> </menu> </body> </html>
采用contextmenu 定义元素上下文,用js 控制css
右键图片菜单选择指令
您可以打开链接查看: http://runjs.cn/detail/keced55f
转载于:https://www.cnblogs.com/wxhhts/p/8585218.html