JavaScript如何实现层（或层里面内容）的旋转？

作者&投稿：闽俘（若有异议请与网页底部的电邮联系）

three.js中一个物体绕另一个物体旋转要如何实现？~

Object3D.rotateOnAxis (axis, angle)
axis -- A normalized vector in object space.
angle -- The angle in radians.
Rotate an object along an axis in object space. The axis is assumed to be normalized.

效果如图

学生信息系统

var showInfo = new function () {
this.showLayer = function (e, id) {
var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
with (document.getElementById(id + "").style) {
display = "block";
left = p[0] + 10 + "px";
top = p[1] + 10 + "px";
}
if (window.event) {
window.event.cancelBubble = true;
} else {
if (e) {
e.preventDefault();
}
}
};
this.hideLayer = function (e, id) {
with (document.getElementById(id + "").style) {
display = "none";
}
if (window.event) {
window.event.cancelBubble = true;
} else {
if (e) {
e.preventDefault();
}
}
};
};

.helplay {
z-index: 3;
position: absolute;
border: 1px solid #FFC30E;
padding: 5px;
background-color: #FFFBB8;
text-align: left;
color: #9C7600;
width: 130px;
font-size: 15px;
font-family: arial, sans-serif;
}

学生信息系统

学号:222222
年龄:18
班级:2
专业:软开
学院:软件学院

姓名

<div id="C13" href="#"
onmouseover="return showInfo.showLayer(event,'C1320');"
onmouseout="return showInfo.hideLayer(event,'C1320');">
张三

待定

学号:1111
年龄:28
班级:1
专业:软开
学院:软件学院

姓名

<div id="C12" href="#"
onmouseover="return showInfo.showLayer(event,'C1220');"
onmouseout="return showInfo.hideLayer(event,'C1220');">
李四

待定

我想,jquery及其插件jQueryRotate.js能够完全满足你的需要,不但可以90度,任意度都行.还带动画效果.
=========
下面是演示代码.
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" ></meta>
<head>
<title>
demo
</title>

<script src="jquery.js" type="text/javascript"></script>
<script src="jQueryRotate.js" type="text/javascript"></script>
<script>
function demo_rotate(){

//$("#demo_r").rotate(90);
$('#demo_r').rotate({maxAngle:25,minAngle:-55,
bind:
[
{"mouseover":function(){$(this).rotateAnimation(85);}},
{"mouseout":function(){$(this).rotateAnimation(-35);}}
]
});

}

</script>
</head>
<body>
<div id="showTime">
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<img src="1.jpg" id="demo_r">
</td>
</tr>
<tr>
<td>
<input type="button" value="demo" onclick="demo_rotate();">

</td>
</tr>
</table>

</div>
</body>
</html>
你要找不到两个js文件,请联系我.给我留言.


<div>
<img style='filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand",FilterType="bilinear",Dx=0,Dy=0)' id=w src='d:\10.jpg' width="292" height="429"></div>
<button onclick='with(w.filters.item(0)){try{P==1}catch(e){P=0}P+=90;z=Math.PI*2/360*P;m12=-Math.sin(z);m21=Math.sin(z);m11=Math.cos(z);m22=Math.cos(z)}'>每点击一次，就旋转90度</button>

先用 CSS 定义一个 class
.deg90 {
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

点按钮的时候，给你的 div 加上这个 class，就行了。

给元素加 class 的函数：
function addClass(element, value) {
if (!element.className) {
element.className = value;
} else {
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}

例:
如果 HTML 代码是
<div id="rotate90"> ... </div>

按钮 onclick 的 JS 代码
addClass(document.getElementById('rotate90'), 'deg90');

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>YuGiOh</title>
<style type="text/css">
#div {
	position: absolute;
	top: 50px;
	left: 300px;
	width: 300px;
	height: 300px;
	line-height: 300px;
	text-align: center;
	border: 1px solid black;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	var rotateHTML5 = function (limit)
    {
	    var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
	    var wt = div.style['-webkit-transform'], wts = wt.match (reg);
	    var $2 = RegExp.$2;
	    console.log ($2);
	    div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4);
    }
    
    var rotateIE = function (obj)
    {
	    var d = !!obj.d ? obj.d : 1;
	    var r = d * Math.PI / 180;
	    costheta = Math.cos (r);
	    sintheta = Math.sin (r);
	    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
	    var item = obj.filters.item (0);
	    var width = obj.clientWidth;
	    var height = obj.clientHeight;
	    item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;
	    item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2;
	    item.M11 = costheta;
	    item.M12 = -sintheta;
	    item.M21 = sintheta;
	    item.M22 = costheta;
	    obj.timer = setTimeout (function ()
	    {
		    var dx = d + 1;
		    dx = dx > 360 ? 1 : dx;
		    obj.d = dx;
		    rotate (obj, dx);
	    }, 30);
    };
    
    var start = function ()
    {
	    if (!!div.interval)
	    {
		    clearInterval (div.interval);
		    delete div.interval;
	    }
	    else
	    {
		    div.interval = setInterval (function ()
		    {
			    /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);
		    }, 30);
	    }
    }
</script>
</head>
<body>
	<button onclick="start();">rotate</button>
	<div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);">ROTATE</div>
</body>
</html>

javascript什么意思
JavaScript简称js，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。JavaScript同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。特点 1、...

javascript是什么意思初学者必看的javascript入门指南?
JavaScript最初是由网景公司的Brendan Eich在1995年创建的，最初被称为LiveScript。后来，它被重命名为JavaScript，以更好地与Sun Microsystems的Java语言相匹配。JavaScript是一种开放标准语言，由ECMAScript规范定义，目前最新的版本是ECMAScript 2021。JavaScript最初是由网景公司的Brendan Eich在1995年创建的...

javascript是干什么的
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。javascript是一种解释类型的语言，跟...

JS全称是什么
js 的全称是javascript ，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

为什么JavaScript不可用?
如果 JavaScript 不可用，通常意味着您的浏览器或网络连接无法访问 JavaScript 引擎或库。以下是一些可能导致 JavaScript 不可用的常见原因和解决方法:浏览器阻止了 JavaScript 运行：某些浏览器可能通过安全设置阻止了 JavaScript 运行。您可以尝试禁用浏览器安全设置或更改浏览器设置以允许 JavaScript 运行。JavaS...

javascript是啥
JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。JavaScript在1995年由Netscape公司的...

javascript怎么开启
javascript功能可以给浏览器带来很多的帮助，是非常人性化的工具，不过刚接触的使用者几乎都不知道该怎么打开这个工具，下面就带来了教程，看看javascript怎么开启吧。javascript怎么开启：1、首先打开浏览器，然后点击右上角的设置。2、之后点击设置中的“Internet选项”。3、在任务选项栏点击“安全”。4、在...

什么是JS?
您好，非常荣幸能在此回答您的问题。以下是我对此问题的部分见解，若有错误，欢迎指出。展开全部 JavaScript是个脚本编程语言,支持Web应用程序的客户端和服务器端构件的开发.在客户端,它用於编写Web浏览器在Web页面上下文中执行的程序,在服务器端,它可用於编写用於处理Web浏览器提交的信息并相应地更新浏览...

启用javascript什么用启用javascript有什么用
启用javascript是什么意思？1。javascript是网页效果的脚本。如果不启用，有些效果会不可见，比如网页上的轮播、弹出对话框等。华丽的互动效果将是无形的。如果打开，可以正常访问网页。2.javascript是一种脚本语言，通常在浏览器中执行。手机有打开的选项，说明你的手机浏览器支持，所以能不能打开取决于你...

javascript怎么开启
javascript开启的方法就是在Chrome浏览器的地址栏中输入网址，并按下Enter键即可。JavaScript是一种广泛使用的客户端脚本语言，可用于增强网页中的交互性和功能性。无论您是一个新手还是一个有经验的开发者，都需要知道如何开启JavaScript，才能使用它的许多功能。JavaScript可以在用户的浏览器上运行，用来增强...

德宏傣族景颇族自治州17884645602： 请问弹出层怎么用js写呢? - ？
高豪派维： 弹出层实质上是一个position属性为fixed的DOM元素,实现弹出层的原理就是:1、在页面中创建一个DOM,用DIV或其他标签均可;2、将此DOM的position设置为fixed,并设置其left、top、width、height属性;3、设置此DOM元素的z-index为...

德宏傣族景颇族自治州17884645602： 如何实现query或者javascript层与层之间的参数传递 - ？
高豪派维： 可以在条件选择结束的确定里面来处理,将选中的条件保存到变量里或者某个隐藏域里.传参嘛,因为是一个页面里的层,这些都是可以共享的,直接取就行了.格式复杂的话可以考虑用json格式来保存数据

德宏傣族景颇族自治州17884645602： JavaScript语句实现层隐藏语句 - ？
高豪派维： -你和jq写混了. get(0) 是木有的..可以直接通过[0]来访问第0个元素. 而且getElementsByName 在ie中只能取input ...htmlCode<div id=＂imageLayer＂ ></div> JavaScriptCode document.getElementById('imageLayer').style.display='none';

德宏傣族景颇族自治州17884645602： js如何实现层在指定区域内拖拽 - ？
高豪派维： <!DOCTYPE html> <html> <head> <meta charset=＂UTF-8＂> <title>拖拽</title> <style type=＂text/css＂> *{ margin: 0; padding: 0; } #box{ width: 500px; height: 500px; border: 1px solid black; } #block{ width: 50px; height: 50px; background: red; ...

德宏傣族景颇族自治州17884645602： JS弹出层效果并传递值代码 - ？
高豪派维： 这只是一个粗略的效果,但基本功能已经实现了 <BODY> <div id=＂showDiv＂ style=＂position:absolute;border:red 1px solid;top:50%;left:50%;display:none＂ onclick=＂this.style.display='none'＂></div><img src=＂<a href=＂ http:...

德宏傣族景颇族自治州17884645602： js怎么实现点一个按钮弹出一个层? - ？
高豪派维： 给按钮添加一个点击事件,填出一个层,宽高都为100%; <body> <input type=＂button＂ value=＂xxx＂ id=＂btn＂ /> <div id=＂div1＂ style=＂display:none;＂></div></body><script> var oBtn = document.getElementById('btn'); var oDiv = ...

德宏傣族景颇族自治州17884645602： js怎么实现点击一个按钮出现一个层然后点击层以外的地方这个层就消失了？
高豪派维： <script type=＂text/javascript＂> var divObj ={ obj : document.getElementById('div_temp'), show:function(){ this.obj.style.display=''; }, hidden :function(){ this.obj.style.display='none'; } } </script> <div id='div_temp' style='display:none;' >...

德宏傣族景颇族自治州17884645602： 如何使用一段JavaScript代码来隐藏一个层?？
高豪派维： <script type=＂text/javascript＂> function disp(iNum){ var oObject=document.getElementById(＂m＂+iNum); if(oObject.style.display==＂none＂){ oObject.style.display=＂block＂; } else{ oObject.style.display=＂none＂; } } </script>

德宏傣族景颇族自治州17884645602： 如何用css+js实现点击按钮弹出div层 - ？
高豪派维： 设置点击事件,div层默认让它隐藏,等到点击的时候,让div层显示出来就行了,hide和show的问题

德宏傣族景颇族自治州17884645602： js遮罩窗体怎么做 - ？
高豪派维： 1、实现原理 * 实际上弹出层、遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上; * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2、代码实...

你可能想看的相关专题

jquerymobile日本

javascript appendchild

星空见康网

JavaScript如何实现层（或层里面内容）的旋转？

你可能想看的相关专题