js改变宽高字体大小透明度多物体模块运动

来源：互联网发布：mac rar解压软件下载编辑：程序博客网时间：2024/05/01 01:13

js改变宽高字体大小透明度多物体模块运动

分类：改变宽高字体大小透明度

（84）（0）举报收藏

   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变宽高字体大小透明度</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
margin: 10px;
filter:alpha(opactiy=30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div1 = document.getElementsByTagName("div");
for(var i = 0; i < div1.length; i++) {
div1[i].timer = null;
div1[i].onmouseover = function() {
startMove(this, 'opacity', 100);
}
div1[i].onmouseout = function() {
startMove(this, 'opacity', 30);
}
}
}
function startMove(obj, attr, itargart) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur = 0;
if(attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (itargart - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(itargart == cur) 
{
clearInterval(obj.timer);
} 
else 
{
if(attr == 'opacity') 
{
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
} 
else 
{
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
function getStyle(obj, name) 
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
} 
else
{
return getComputedStyle(obj, false)[name];
}
}
</script>
</head>
<body>
<h4>纯js实现多物体同时运动，可填写物体的宽高字体大小及透明度</h4>
<div id="div1"></div>
<div id="div1"></div>
<div id="div1"></div>
</body>
</html>

来自CODE的代码片
改变宽高字体大小透明度.html

阅读全文

0 0

js改变宽高字体大小透明度多物体模块运动

js改变宽高字体大小透明度多物体模块运动

来自CODE的代码片改变宽高字体大小透明度.html

来自CODE的代码片
改变宽高字体大小透明度.html