简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:1280 次  日期:2016-08-04 15:24:09

温馨提示:易贤网小编为您整理了“JS实现图片平面旋转的方法”,方便广大网友查阅!

本文实例讲述了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="http://www.jb51.net/images/logo.gif"  />

 <img src="http://www.jb51.net/images/logo.gif"  />

 <img src="http://www.jb51.net/images/logo.gif"  />

 <img src="http://www.jb51.net/images/logo.gif"  />

 <img src="http://www.jb51.net/images/logo.gif"  />

 <img src="http://www.jb51.net/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程序设计有所帮助。

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:用NODE.JS中的流编写工具是要注意的事项
下一篇:JS显示日历和天气的方法
易贤网手机网站地址:JS实现图片平面旋转的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!