JS动画效果_技术笔记

little慕慕 2019-08-09

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: pink;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
</style>
</head>
<body>
<script>
window.onload = function() {
// var aLi = document.getElementsByTagName("li");
// for(var i=0;i<aLi.length;i++){
// aLi[i].timer = null;
// aLi[i].onmouseover = function() {
// startMove(this, 400);
// };
// aLi[i].onmouseout = function() {
// startMove(this, 200);
// }
// }
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
li1.onmouseover=function(){
startMove(this,'width',400);
}
li1.onmouseout=function(){
startMove(this,'width',200);
}
li2.onmouseover=function(){
startMove(this,'height',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr, liTa) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
clearInterval(obj.timer);
}
else {
obj.style[attr] = icur+speed+'px';
}
},30)
}
</script>
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>

0赞 · 0采集
慕粉0815224883 2019-01-04

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
<style type='text/css'>
*{
margin:0px;
padding:0px;
}
li{
width:200px;
height:100px;
margin:20px;
list-style:none;
background-color:yellow;
}
</style>
<script type='text/javascript'>
window.onload=function(){
var Li1=document.getElementById('li1');
var Li2=document.getElementById('li2');
Li1.onmouseover=function(){
startMove(this,'width',400);
}
Li1.onmouseout=function(){
startMove(this,'width',200);
}
Li2.onmouseover=function(){
startMove(this,'height',400);
}
Li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed=(target-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==target){
clearInterval(obj.timer);
}
else{
obj.style[attr]=icur+speed+'px';
}
},30)
}
</script>
</head>
<body>
<ul>
<li id='li1'></li>
<li id='li2'></li>
</ul>
</body>
</html>

0赞 · 0采集
ParseDark 2018-08-26

抽象，是形成组件的重要思想。让你的函数尽量干净。保持DTY原则。

0赞 · 0采集
慕粉2308425049 2018-07-17

在有边框的时候offset会出现很多问题
框架思想，当框架差不多但是有一点区别的时候，可以将区别变为参数

0赞 · 0采集
慕仙5237505 2017-11-01

后边改：attr方便传值

截图
0赞 · 0采集
慕仙5237505 2017-11-01

前段1：

截图
0赞 · 0采集
慕仙5237505 2017-11-01

物体移入时变宽，或者变高，移出时恢复原来高、宽 ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; } window.onload=function(){ var li1=document.getElementById("li1"); var li2=document.getElementById("li2"); li1.onmousemove=function(){ move(this,400); } li1.onmouseout=function(){ move(this,200); } } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } //huofu } function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=parseInt(getstyle(obj,"height")) var speed=(target-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==target){ clearInterval(obj.timer); }else{ obj.style['height']=curr+speed+"px"; } },30) }

截图
0赞 · 0采集
慕仙5237505 2017-11-01

改前部分：ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px; border:2px solid #0f0; } window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].timer=null //自定义定时器分给每个li元素 li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var curr=parseInt(getstyle(obj,"width")) var speed=(target-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==target){ clearInterval(obj.timer); }else{ obj.style.width=curr+speed+"px"; } },30) }

截图
0赞 · 0采集
qq_与陌Dance_0 2017-08-17

<script> window.onload = function() { var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); var li3 = document.getElementById('li3'); li1.onmouseover = function() { startMove(this, 'height', 400); } li1.onmouseout = function() { startMove(this, 'height', 100); } li2.onmouseover = function() { startMove(this, 'width', 400); } li2.onmouseout = function() { startMove(this, 'width', 200); } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var icur = parseInt(getStyle(obj, attr)); var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == icur) clearInterval(obj.timer); else obj.style[attr] = icur + speed + "px"; }, 30) } </script>

0赞 · 0采集
qq_与陌Dance_0 2017-08-17

offsetxxx属性值包含：元素长或宽+边框+内间距等等当属性增多时offset就会出现问题，为了解决这些问题就用getStyle函数来代替offset

0赞 · 0采集
yaya_ling 2017-06-07

offsetxxx属性值包含：元素长或宽+边框+内间距等等当属性增多时offset就会出现问题，为了解决这些问题就用getStyle函数来代替offset

0赞 · 0采集
元气满满来学习 2017-04-15

所有offset属性的值都会包括边框值和padding，需要用getstyle属性来实现。 obj.currentStyle[attr];//针对IE浏览器 obj.getComputerStyle(obj,false)[attr];//针对FireFox浏览器

0赞 · 1采集
无赖7 2017-04-03

所有offset属性的值都会包括边框值和padding，需要用getstyle属性来实现。 obj.currentStyle[attr];//针对IE浏览器 obj.getComputerStyle(obj,false)[attr];//针对FireFox浏览器

0赞 · 0采集
精慕门3383071 2017-03-30

offset遇到一些style设置的时候会有bug，所以这里改用getStyle去实现运动效果

截图
0赞 · 0采集
精慕门3383071 2017-03-30

将要改变的元素属性也作为参数传递

截图
0赞 · 0采集
慕粉1719051094 2017-03-22

所有offset属性的值都会包括边框值和padding，需要用getstyle属性来实现

0赞 · 0采集
夜莺z 2017-03-16

parseInt(getStyle(obj,'width'))

1赞 · 0采集
夜莺z 2017-03-16

function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle; } else { return getComputedStyle(obj,'false')[attr]; } } 定义getStyle函数，兼容IE和其他浏览器

0赞 · 0采集
白小九 2017-03-07

offsetXXX系列属性都会有一些bug（比如有border属性时，offsetWidth和offsetHeight取值异常），所以读取样式一般使用currentStyle（限IE，相当于style+runtimeStyle）或getComputedStyle（FF返回原始值，webkit返回最终值）。

截图
0赞 · 1采集
l柳条妹妹 2017-01-11

动画函数参数：多一个表示要“改变的元素的属性”

截图
0赞 · 0采集
创心 2017-01-01

offset 属性有bug , 加了边框或其他样式后会导致出问题，要用 getStyle函数

截图
0赞 · 1采集
霉响郝 2016-12-08

currentStyle getComputeStyle

0赞 · 0采集
懒癌患者L 2016-11-28

window.onload=function(){ var aLi=document.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null; aLi[0].onmouseover=function(){ startMove(this,"height",400); } aLi[0].onmouseout=function(){ startMove(this,"height",100); } } aLi[1].onmouseover=function(){ startMove(this,"width",400); } aLi[1].onmouseout=function(){ startMove(this,"width",200); } } //var timer=null; function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer); } else{ obj.style[attr]=icur+speed+"px"; } },30); }

0赞 · 1采集
懒癌患者L 2016-11-28

如果页面不仅仅有宽和高，而是有好多别的样式，比如边界，为了避免出现误差，可以用getStyle来封装一个函数获取相应的值，注意浏览器兼容问题，IE用currentStyle，火狐用getComputedStyle。 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle; } else{ return getComputedStyle(obj,false)[attr]; } }

0赞 · 0采集
qq_君莫笑_27 2016-11-06

在面板中，只涉及宽和高属性，可以使用offsetWidth和offsetHeight; 但是加入边框后再获取该属性会出现bug; 此时需要考虑使用获取样式：getStyle(){}

0赞 · 0采集
mwm喵 2016-11-05

获取外联样式表和内部样式表: function getStyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; }

0赞 · 0采集
慕函数9735861 2016-10-21

使用offsetWidth和offsetHeight时考虑边框问题 function getStyle(obj,attr) { if(obj.currentStyle) {return obj.currentStyle[attr]} else {return getComputedStyle(obj,false)[attr];} }

0赞 · 0采集
Aishah_MK 2016-10-21

//封装获取属性的函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//IE }else{ return getComputedStyle(obj,false)[attr];//火狐 } }

0赞 · 0采集
clj猎的 2016-10-19

获取样式的封装函数getStyle()可以解决加边框后，offsetWidth运动时的一些bug

0赞 · 0采集
GoingForward 2016-10-15

【getStyle】如果页面不仅仅有宽和高，而是有好多别的样式，那么前面学的offsetLeft之类的都应该换成getStyle function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 使用方法为parseInt(getStyle(oDiv,"width")) 【封装函数】有的需要改变宽，有的需要改变高obj.style.width也可以写成obj.style['width'] function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,attr)); var speed = (iTarget-icur)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = icur + speed + "px"; } },30) } 调用方式如startMove(this,"height",400);

截图
0赞 · 0采集

数据加载中...