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 相关文章推荐
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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读取txt文本文件并分页显示的方法
2015/03/11 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
js转换对象为xml
2017/02/17 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python 文件操作删除某行的实例
2017/09/04 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
《老王》教学反思
2014/02/23 职场文书
《搭石》教学反思
2014/04/07 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
撤诉申请怎么写
2015/05/19 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS