中文字幕无线观看不卡网站,99er热精品视频

首頁免費(fèi)課 JS動(dòng)畫效果筆記

JS動(dòng)畫效果

            
                vivian
            
            Web前端工程師
                    
                難度初級(jí)
            
                時(shí)長(zhǎng) 2小時(shí) 8分
            
                學(xué)習(xí)人數(shù)
            
綜合評(píng)分9.60
                            537人評(píng)價(jià)
                        查看評(píng)價(jià)
                                9.8
                                內(nèi)容實(shí)用
                            
                                9.6
                                簡(jiǎn)潔易懂
                            
                                9.4
                                邏輯清晰

最熱最新

林疏雪正是在下

獲取任意值屬性封裝函數(shù)，敲在本地運(yùn)行記錄驗(yàn)證

查看全部

0 采集收起來源：任意屬性值（二）
2019-11-07
林疏雪正是在下

未實(shí)現(xiàn)運(yùn)動(dòng)效果，后續(xù)再次嘗試驗(yàn)證

查看全部

0 采集收起來源：獲取樣式
2019-11-07
喵嘰

運(yùn)動(dòng)框架實(shí)現(xiàn)思路
1、速度（改變值left、right、width、height、opacity）
2、緩沖運(yùn)動(dòng)
3、多物體運(yùn)動(dòng)
4、任意值變換
5、鏈?zhǔn)竭\(yùn)動(dòng)
6、同時(shí)運(yùn)動(dòng)

查看全部

0 采集收起來源：JS動(dòng)畫效果課程介紹
2019-09-01
xiaowan321 08:43

var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
緩沖動(dòng)畫

查看全部

0 采集收起來源：JS緩沖動(dòng)畫
2019-08-20
xiaowan321 07:21

Math.floor()? ? 向下取整；
Math.ceil()? ? ?向上取整；

查看全部

0 采集收起來源：JS緩沖動(dòng)畫
2019-08-20
xiaowan321 07:21

if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}

查看全部

0 采集收起來源：JS透明度動(dòng)畫
2019-08-19
little慕慕

<!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);/*針對(duì)IE設(shè)置透明度*/
opacity: 0.3;/*針對(duì)火狐/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) {//添加一個(gè)回調(diào)函數(shù)fn
var flag=true;//假設(shè),標(biāo)志所有運(yùn)動(dòng)是否到達(dá)目標(biāo)值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取當(dāng)前的值
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.檢測(cè)停止
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 采集收起來源：完美運(yùn)動(dòng)框架
2019-08-10
little慕慕

<!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);/*針對(duì)IE設(shè)置透明度*/
opacity: 0.3;/*針對(duì)火狐/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 采集收起來源：任意屬性值（二）
2019-08-10
little慕慕

<!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 采集收起來源：任意屬性值（一）
2019-08-09
little慕慕

<!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 采集收起來源：JS緩沖動(dòng)畫
2019-08-08
little慕慕

<!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 采集收起來源：JS透明度動(dòng)畫
2019-08-08
little慕慕
<!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 采集收起來源：JS速度動(dòng)畫
2019-08-08

首頁上一頁 1 2 3 4 5 6 7 下一頁尾頁

舉報(bào)

0/150

提交

取消

開始學(xué)習(xí)

課程須知: 1.您至少已經(jīng)具備JavaSript的知識(shí)。2.您已經(jīng)具備一些開發(fā)經(jīng)驗(yàn)。

老師告訴你能學(xué)到什么？: 1.使用定時(shí)器實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫。2.如何一步步封裝庫。2.培養(yǎng)編程的思想。

微信掃碼，參與3人拼團(tuán)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

JS動(dòng)畫效果