码迷,mamicode.com
首页 > Web开发 > 详细

js和css3怎么旋转缩放

时间:2017-04-05 15:31:56      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:注意   time   定时   charset   var   旋转   else   ota   全局变量   

js和css3结合做缩放,效果直接复制下面代码运行看把,注意导jq包咯::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="css/index.css" />
</head>

<body>
<div class="divs">
555
</div>
</body>
<script>
var times = setInterval(‘runs()‘, 100); //定时器 运行时间是100
var nums = 0; // 旋转角度的全局变量
var sf = 1; // 缩放的全局变量

function runs() {
nums += 100; // 100是旋转的角度
sf -= 0.1; // 0.1是缩放的大小
if (sf <= 0) {
clearInterval(times); //清除定时器
$(‘.divs‘).fadeOut(); //让div谈出
} else {
$(‘.divs‘).css({
// CSS3的transform属性的旋转和缩放
‘transform‘: ‘rotate(‘ + nums + ‘deg) scale(‘ + sf + ‘,‘ + sf + ‘)‘,
})
}
}
</script>

</html>

js和css3怎么旋转缩放

标签:注意   time   定时   charset   var   旋转   else   ota   全局变量   

原文地址:http://www.cnblogs.com/yangjiansong/p/6668877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!