JS实现图片平面旋转的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了JS实现图片平面旋转的方法。分享给大家供大家参考,具体如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片旋转</title>
<style type="text/css" >
#div1{ position:relative;height:800px; border:1px solid red;}
#div1 img{ position:absolute;}
</style>
</head>
<body >
<div id="div1"  >
 <img src="https://3water.com/images/logo.gif"  />
 <img src="https://3water.com/images/logo.gif"  />
 <img src="https://3water.com/images/logo.gif"  />
 <img src="https://3water.com/images/logo.gif"  />
 <img src="https://3water.com/images/logo.gif"  />
 <img src="https://3water.com/images/logo.gif"  />
</div>
<script type="text/javascript" >
  var centerx = 400; //圆心X
  var centery = 300; //圆心Y
  var r = 300; //半径
  var oimages = document.getElementById("div1").getElementsByTagName("IMG"); //图片集合
  var cnt = oimages.length; //图片数
  var da = 360 / cnt; //图片间隔角度
  var a0 = 0; //已旋转角度
  var timer;
  for (var i = 0; i < cnt; i++) {
    oimages[i].onmouseover = stop;
    oimages[i].onmouseout = start;
  }
  function posimgs() {
    for (var i = 0; i < cnt; i++) {
      oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
      oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
    }
  }
  // posimgs();
  function start() {
    timer = window.setInterval("posimgs();a0++;", 100);
  }
  function stop() {
    window.clearInterval(timer);
  }
  start();
</script>
</body>
</html>

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

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 #Javascript
JavaScript Date对象详解
Mar 01 #Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 #Javascript
jQuery增加与删除table列的方法
Mar 01 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
python访问sqlserver示例
2014/02/10 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
对python中各个response的使用说明
2020/03/28 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
sort命令的作用和用法
2012/11/04 面试题
广告语设计及教案
2014/03/21 职场文书
出租车拒载检讨书
2015/01/28 职场文书
刑事辩护词范文
2015/05/21 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016消防宣传标语口号
2015/12/26 职场文书