-
- weixin_精慕门4485437 2020-08-22
- q123
-
截图0赞 · 0采集
-
- Ocio 2020-07-30
math.round四舍五入
- 0赞 · 0采集
-
- qq_慕雪6274093 2020-07-05
<html> <head> <style> div{ width:200px; height;200px background-color:red; opacity:.3; } </style> </head> <body> <div> </div> <script> var adiv=document.querSelector("div"); adiv.onmouseover=function(){ startMove(100); } adiv.onmouseout=function(){ startMove(30); } var time=null; var opacitys=30; function startMove(Itarge){ clearServeteval(time); var adiv=document.querSeletor('div'); time=setInterval(function(){ var seep=0; if( opacitys>Itarget) seep=-10; else seep=10; if(opacitys==Itarge){ clearSetInterval(time); } else{ opacitys+=seep; adiv.style.opacity=opactys/100; } },100) } </script> </body> </html>- 0赞 · 0采集
-
- VictoryLang 2020-07-05
并没有出现老师的小数闪烁情况，但是出现了多小数形式的current值，所以为了完善，避免复现BUG，还是使用了Math.round函数
- 0赞 · 0采集
-
- 一只小马甲甲 2020-07-01
JS设置css值 XXX.style.xxx 获取css值 XXX.offsetxxx
比如 oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
-
截图0赞 · 0采集
-
- weixin_慕后端6529359 2020-05-26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height:200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
starmove(100);
}
oDiv.onmouseout = function() {
starmove(30);
}
}
var timer = null;
var alpha = 30;
function move(iTarget) {
var alpha = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha < iTarget) {
speed = 10;
}
else {
speed = -10;
}
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>- 0赞 · 0采集
-
- 林疏雪正是在下 2019-11-07
获取任意值属性封装函数，敲在本地运行记录验证
- 0赞 · 0采集
-
- 林疏雪正是在下 2019-11-07
未实现运动效果，后续再次尝试验证
- 0赞 · 0采集
-
- 喵叽 2019-09-01
运动框架实现思路
1、速度（改变值left、right、width、height、opacity）
2、缓冲运动
3、多物体运动
4、任意值变换
5、链式运动
6、同时运动
- 0赞 · 1采集
-
- xiaowan321 2019-08-20
var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
缓冲动画
-
截图0赞 · 0采集
-
- xiaowan321 2019-08-20
Math.floor() 向下取整；
Math.ceil() 向上取整；
-
截图0赞 · 0采集
-
- xiaowan321 2019-08-19
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}
-
截图0赞 · 0采集
-
- little慕慕 2019-08-10
<!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: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script src="same.js"></script>
<script>
window.onload = function() {
var li1=document.getElementById("li1");
li1.onmouseover=function(){
startMove(li1,{width:201,height:200,opacity:100});
}
li1.onmouseout=function(){
startMove(li1,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn) {//添加一个回调函数fn
var flag=true;//假设,标志所有运动是否到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr]-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur != json[attr]) {
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
- 0赞 · 0采集
-
- little慕慕 2019-08-10
<!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: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
#li3 {
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<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");
var li3=document.getElementById("li3");
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);
}
li3.onmouseover=function(){
startMove(this,'opacity',100);
}
li3.onmouseout=function(){
startMove(this,'opacity',30);
}
}
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=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
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 {
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr] = icur+speed+'px';
}
}
},30)
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
</body>
</html>
- 0赞 · 0采集
-
- 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采集
-
- little慕慕 2019-08-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = (dis - oDiv.offsetLeft)/20;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
- 0赞 · 0采集
-
- little慕慕 2019-08-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background: red;
/* filter:alpha(opacity=30); */
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(100);
}
oDiv.onmouseout = function() {
move(30);
}
}
var timer = null;
var opa = 30;
function move(target) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(opa < target) {
speed = 10;
}
else {
speed = -10;
}
if(opa == target){
clearInterval(timer);
}
else{
opa += speed;
// oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = opa/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>
- 0赞 · 0采集
-
- little慕慕 2019-08-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft > dis){
speed = -10;
}
else {
speed = 10;
}
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
- 1赞 · 7采集
-
- qq_心安有个你_0 2019-07-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
filter: alpha(opcity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(100);
}
oDiv.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(alpha>iTarget){
speed=-10;
}
else{
speed=10;
}
if(alpha==iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter='alpha(opactiy:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
});
}
</script>
</html>- 0赞 · 0采集
-
- qq_心安有个你_0 2019-07-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top:75px;
}
</style>
</head>
<body>
<div id="div1">
<span id="share">xc</span>
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=function(){
startMove1(10,-200);
}
}
var timer=null;
function startMove(sleep,taiger){
clearInterval(timer)
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft==taiger){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+sleep+'px';
}
},30);
}
function startMove1(sleep,taiger){
clearInterval(timer)
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
if(oDiv.offsetLeft<= taiger){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft-sleep+'px';
}
},30);
}
</script>
</html>- 2赞 · 0采集
-
- qq_心安有个你_0 2019-07-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}
var timer = null;
function starMove(target){
clearInterval(timer);
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){
var speed =(target - oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft==target){
clearIntral(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>
- 0赞 · 0采集
-
- qs九点九分 2019-06-21
111111
-
截图0赞 · 0采集
-
- 甜橙可爱多 2019-04-23
当加了一个定时器后，为什么不清除定时器，动画也能停止？
注意：在缓冲运动中，一定是在缓冲运动中，speed的值为0后动画停止了，此时定时器实际上还在运行中。
- 0赞 · 0采集
-
- 甜橙可爱多 2019-04-22
Math.floor(num)向下取整
Math.ceil(num)向上取整
0.5向上取整为1，向下取整为0
-0.5向上取整为0，向下取整为-1
- 0赞 · 0采集
-
- howevert 2019-04-05
getStyle,上面针对IE浏览器，下面针对火狐浏览器。获取css样式的值
-
截图0赞 · 0采集
-
- 慕粉0815224883 2019-04-01
<!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; opacity:0.3; } </style> <script type='text/javascript'> window.onload=function(){ var oLi=document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ oLi[i].onmouseover=function(){ var that=this; startMove(this,{width:400,height:200},function(){ startMove(that,{opacity:100}); }); } oLi[i].onmouseout=function(){ var that=this; startMove(this,{height:100,width:200},function(){ startMove(that,{opacity:30}) }); } } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var flag = true; var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]){ flag = false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed); obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if(fn) { fn(); } } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>- 2赞 · 1采集
-
- 慕粉0815224883 2019-04-01
<!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; opacity: 0.3; filter: alpha(opacity:30); } </style> <script type='text/javascript'> window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } 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=null; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ 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{ if(attr == 'opacity'){ obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/100; } 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采集
-
- Sandaydi 2019-03-16
move.js 框架
function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, iTarget, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //1、取当前的值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ icur = parseInt(getStyle(obj, attr)); } //2、算速度 var speed = (iTarget - icur) / 8; speed = speed>0?Math.ceil(speed):Math.floor(speed); //3、检测停止 if(icur == iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + (icur+speed) + ')'; obj.style.opacity = (icur + speed)/100; }else{ obj.style[attr] = icur + speed + 'px'; } } },30) }JavaScript
鼠标移入先变宽，再变高，然后变透明度
鼠标移出先变透明度，再变高，最后变宽
window.onload = function(){ var Li = document.getElementById('li1'); Li.onmouseover = function(){ startMove(Li, 'width', 400, function(){ startMove(Li, 'height', 200, function(){ startMove(Li, 'opacity', 100); }); }); } Li.onmouseout = function(){ startMove(Li, 'opacity', 30, function(){ startMove(Li, 'height', 100, function(){ startMove(Li, 'width', 200); }); }); } }- 1赞 · 0采集
-
- Sandaydi 2019-03-12
运动框架实现思路
-
截图0赞 · 0采集
-
- weixin_慕函数6093326 2019-01-17
- fliter标签
-
截图0赞 · 0采集
