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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue中nextTick用法实例
Sep 11 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Bootstrap实现翻页效果
2017/11/27 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python 3.8 新功能全解
2019/07/25 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
详细分析Python垃圾回收机制
2020/07/01 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
小区门卫管理制度
2014/01/29 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
升学宴学生答谢词
2015/01/05 职场文书
土地租赁协议书
2015/01/29 职场文书
民事辩护词范文
2015/05/21 职场文书
红色经典观后感
2015/06/18 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
关于使用Redisson订阅数问题
2022/01/18 Redis