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 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
理解JavaScript中的事件
2006/09/23 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
基于python历史天气采集的分析
2019/02/14 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
详解Python3 pickle模块用法
2019/09/16 Python
通过实例解析Python return运行原理
2020/03/04 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
思想政治自我鉴定
2013/10/06 职场文书
小学毕业感言150字
2014/02/05 职场文书
高中校园广播稿
2014/10/21 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Python 键盘事件详解
2021/11/11 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
python 离散点图画法的实现
2022/04/01 Python
vue router 动态路由清除方式
2022/05/25 Vue.js