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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
前端jquery部分很精彩
May 03 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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
什么是MVC,好东西啊
2007/05/03 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript常用本地对象小结
2016/03/28 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
Python实现简单登录验证
2016/04/13 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
详解Django CAS 解决方案
2019/10/30 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python简单实现插入排序实例代码
2020/12/16 Python
super关键字的用法
2012/04/10 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
公务员年总结的自我评价
2013/10/25 职场文书
创新型城市实施方案
2014/03/06 职场文书
企业安全生产承诺书
2014/05/22 职场文书
销售提升方案
2014/06/07 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏