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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现可以控制图片旋转角度效果(附demo源码下载)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1198字，纯文字阅读大概需要2分钟。

内容图文

本文实例讲述了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特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》。

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

内容总结

以上是互联网集市为您收集整理的jQuery实现可以控制图片旋转角度效果(附demo源码下载)全部内容，希望文章能够帮你解决jQuery实现可以控制图片旋转角度效果(附demo源码下载)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/354164.html

来源：【匿名】