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 相关文章推荐
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js分页代码分享
Apr 28 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 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在线解压ZIP文件的方法
2014/12/30 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python实现ID3决策树算法
2018/08/29 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
中职应届生会计求职信
2013/10/23 职场文书
建筑工地标语
2014/06/18 职场文书
汽车转让协议书
2015/01/29 职场文书
工程款催款函
2015/06/24 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python