猿问

想要实现的是一个留言墙的简单功,但是在便签旋转上卡住了,该怎么办?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>智能表单</title>
<style type="text/css">
*{margin:0;padding:0;}
#wall{ //设置墙纸
width:900px;
height:600px;
border:1px solid black;
position:relative;
}
.page{ //设置留言便签
font-size:11px;
width:150px;
height:150px;
position:absolute;
background-color:yellow;
box-shadow:5px 5px 8px #ccc;
transform:rotate(18deg);
}
.page p{
padding:10px;
}
.page span{
text-size:4px;
line-height:15px;
width:18px;
height:18px;
text-align:center;
position:absolute;
top:5px;
right:5px;
border-radius:9px;
background-color:white;
}
.page h3{
font-size:12px;
font-weight:normal;
position:absolute;
bottom:0px;
right:3px;
}
.page span:hover{
cursor:pointer;
box-shadow:0 0 5px black;
}
</style>
</head>
在javascript中有
var deg = Math.round(Math.random()*70);
var rad = deg *Math.PI/180;
div.style.webkitTransform = "rotate()";
我想实现的是一个留言墙的简单功能。现在在便签旋转上卡住了。在javascript中rotate代入的角度无法是变量,代入deg和rad均无效果。只能是固定的数值比如 39deg 才能成功旋转。请问要怎么解决这个问题。 

开心每一天1111
浏览 160回答 2
2回答

呼唤远方

var deg = Math.round(Math.random()*70);var rad = deg * 180 / Math.PI;div.style.webkitTransform = "rotate("+rad+"deg)"; 试试这样 你设置还是没错的 就是角度转弧度公式好像错了角度=弧度*180/Math.PI;弧度=角度/180*Math.PI;其实完全可以取一个随机数带入给角度就行了var deg = Math.round(Math.random()*70);div.style.webkitTransform = "rotate("+deg +"deg)"; //这样就是随机的了

明月笑刀无情

写一个方法,每次赋予div.style.webkitTransform不同的值(递增或递减)然后定时循环调用。请把代码贴全。
随时随地看视频慕课网APP

相关分类

CSS3
Html5
我要回答