编程 Javascript

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

Posted in Javascript onJanuary 27, 2016

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

运行效果截图如下：

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

具体代码如下：

<!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程序设计有所帮助。

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

- Author -

m1870164

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

限制文本字节数js代码

Mar 06 Javascript

让任务管理器中的CPU跳舞的js代码

Nov 01 Javascript

基于jQuery.Validate验证库知识点的详解

Apr 26 Javascript

javascript仿php的print_r函数输出json数据

Sep 13 Javascript

JavaScript操作DOM元素的childNodes和children区别

Apr 01 Javascript

jQuery实现的在线答题功能

Apr 12 Javascript

require.js的用法详解

Oct 20 Javascript

jquery横向纵向鼠标滚轮全屏切换

Feb 27 Javascript

详解AngularJS 路由 resolve用法

Apr 24 Javascript

微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能

Aug 16 Javascript

简单了解JavaScript作用域

Jul 31 Javascript

vue-cli3访问public文件夹静态资源报错的解决方式

Sep 02 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