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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
封装属于自己的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 地区分类排序算法
2013/07/01 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python中reader的next用法
2018/07/24 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
仓管岗位职责范本
2014/02/08 职场文书
优秀经理获奖感言
2014/03/04 职场文书
小学生操行评语
2014/04/22 职场文书
班级团队活动方案
2014/08/14 职场文书
道歉的话语大全
2015/05/12 职场文书
环保主题班会教案
2015/08/13 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
创业计划书之家政服务
2019/09/18 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python