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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
React 组件间的通信示例
Jun 14 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
npm的lock机制解析
Jun 20 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
封装属于自己的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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php统计文章排行示例
2014/03/04 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python获得图片base64编码示例
2014/01/16 Python
python正则表达式之作业计算器
2016/03/18 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python yield 使用方法浅析
2017/05/20 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python实现烟花小程序
2019/01/30 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
销售经理竞聘书
2014/03/31 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
信仰观后感
2015/06/03 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记