jQuery实现可以控制图片旋转角度效果(附demo源码下载)


Posted in Javascript onJanuary 27, 2016

本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现可以控制图片旋转角度效果(附demo源码下载)

点击此处查看在线演示效果。

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <style type="text/css" >
    img { margin-top:100px; margin-left:400px; width:300px; border:3px solid #F2F2F2; height:300px; box-shadow:4px 4px 4px #DDDDDD;}
    input { margin-top:10px; margin-left:480px; }
  </style>
  <script type="text/javascript" >
    window.onload = function () {
      document.getElementById('range').onchange = function () {
        var value = this.value;
        $("img").css({ "transform": "skewX(" + value + "deg)", "-webkit-transform": "skewX(" + value + "deg)", "-moz-transform": "skewX(" + value + "deg)" });
      }
    }
  </script>
</head>
<body>
  <img src="3.jpg" alt=""/>
  <br /><br />
  <input type="range" id="range" value="0" />
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
基于vue.js实现分页查询功能
Dec 29 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
封装属于自己的JS组件
Jan 27 #Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 #Javascript
Bootstrap树形控件使用方法详解
Jan 27 #Javascript
window.onerror()的用法与实例分析
Jan 27 #Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 #Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 #Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 #Javascript
You might like
php入门小知识
2008/03/24 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php 可变函数使用小结
2018/06/12 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python+opencv实现动态物体识别
2018/01/09 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python实现合并两个排序的链表
2019/03/03 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
高三自我鉴定
2013/10/23 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
家长对老师的感言
2014/03/11 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL