亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

源碼在何方？

老師的源碼放哪了？怎么找不到?

正在回答

4 回答

鏈式運動代碼

????1.Html代碼

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?#li1{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background: red;
?? ??? ??? ??? ?border: 2px solid deepskyblue;
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?filter: alpha(opacity:30);/*IE*/
?? ??? ??? ??? ?opacity: 0.3;?? ?
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script src="鏈式動畫.js"></script>
?? ??? ?<script>
?? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ?var Li = document.getElementById("li1");
?? ??? ??? ??? ??? ?Li.onmouseover = function(){
?? ??? ??? ??? ??? ??? ?startMove(Li,'width',400,function(){
?? ??? ??? ??? ??? ??? ??? ?startMove(Li,'height',100,function(){
?? ??? ??? ??? ??? ??? ??? ??? ?startMove(Li,"opacity",100);
?? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?Li.onmouseout = function(){
?? ??? ??? ??? ??? ??? ?startMove(Li,'height',50,function(){
?? ??? ??? ??? ??? ??? ??? ?startMove(Li,'width',200);?? ??? ?
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li id="li1"></li>
?? ??? ?</ul>
?? ?</body>
</html>

???? 2.JS代碼

??? function getStyle(obj,attr){
?? ??? ?if(obj.currentStyle){
?? ??? ??? ?return obj.currentStyle[attr];
?? ??? ??? ?}else{
?? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ?}
?? ??? ??? ?}
?? ?function startMove(obj,style1,value,fn){ ?
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ?obj.timer = setInterval(function(){
?? ??? ??? ??? ?//1.取當前值
?? ??? ??? ??? ?var icur = 0;
?? ??? ??? ??? ?if(style1 == "opacity"){
?? ??? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,style1))*100);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?icur =Math.round(parseInt(getStyle(obj,style1)));
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//2.算速度
?? ??? ??? ??? ?var speed =(value-icur)/8;
?? ??? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?//3.檢測停止
?? ??? ??? ??? ??? ?if(icur == value){
?? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ?if(fn){
?? ??? ??? ??? ??? ??? ?fn();
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?if(style1 =="opacity"){
?? ??? ??? ??? ??? ??? ?obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
?? ??? ??? ??? ??? ??? ?obj.style.opacity = (icur+speed)/100;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?obj.style[style1] = icur+speed+"px";
?? ??? ??? ??? ??? ??? ?obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px"; ??? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},30)
?? ??? ??? ?}?

????

????

0 回復 有任何疑惑可以回復我~
#1

雪域沉銷 提問者

非常感謝！
2016-10-09 回復 有任何疑惑可以回復我~
#2

慕粉4077240

非常感謝！
2017-01-09 回復 有任何疑惑可以回復我~

同時運動動畫代碼

????1.Html代碼

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>同時運動動畫</title>
?? ??? ?<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?#li1{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background: red;
?? ??? ??? ??? ?border: 2px solid deepskyblue;
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?filter: alpha(opacity:30);/*IE*/
?? ??? ??? ??? ?opacity: 0.3;?? ?
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script src="同時運動動畫.js"></script>
?? ??? ?<script>
?? ??? ??? ?window.onload = function(){
?? ??? ??? ?var Li = document.getElementById("li1");
?? ??? ??? ??? ?Li.onmouseover = function(){
?? ??? ??? ??? ?startMove(Li,{width:400,height:100,opacity:100});
?? ??? ??? ??? ?}
?? ??? ??? ??? ?Li.onmouseout = function(){
?? ??? ??? ??? ?startMove(Li,{width:200,height:50,opacity:30});
?? ??? ??? ??? ?}?? ?
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li id="li1"></li>
?? ??? ?</ul>
?? ?</body>
</html>

???? 2.JS代碼

?????? function getStyle(obj,attr){
?? ??? ?if(obj.currentStyle){
?? ??? ??? ?return obj.currentStyle[attr];
?? ??? ??? ?}else{
?? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ?}
?? ??? ??? ?}
?? ?//?? ??? ?startMove(obj,{style1:value1,style2:value2},fn)
?? ?function startMove(obj,json,fn){ ?
?? ??? ??? ??? ?var flag = true;
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ?obj.timer = setInterval(function(){
?? ??? ??? ??? ??? ?for(var style1 in json)
?? ??? ??? ??? ?{
?? ??? ??? ??? ?//1.取當前值
?? ??? ??? ??? ?var icur = 0;
?? ??? ??? ??? ?if(style1 == "opacity"){
?? ??? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,style1))*100);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?icur =Math.round(parseInt(getStyle(obj,style1)));
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//2.算速度
?? ??? ??? ??? ?var speed =(json[style1]-icur)/8;
?? ??? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?//3.檢測停止
?? ??? ??? ??? ??? ?if(icur != json[style1]){
?? ??? ??? ??? ??? ??? ?flag = false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(style1 =="opacity"){
?? ??? ??? ??? ??? ??? ?obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
?? ??? ??? ??? ??? ??? ?obj.style.opacity = (icur+speed)/100;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?obj.style[style1] = icur+speed+"px";
?? ??? ??? ??? ??? ??? ?obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px"; ??? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(flag){
?? ??? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ??? ?if(fn){
?? ??? ??? ??? ??? ??? ??? ?fn();
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},30)
?? ??? ??? ?}?


0 回復 有任何疑惑可以回復我~

多物體運動代碼

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>多物體運動</title>
?? ??? ?<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ?}
?? ??? ??? ?ul,li{
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?}
?? ??? ??? ?ul>li:nth-of-type(1){
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background: yellow;
?? ??? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ??? ?border: 20px solid red;
?? ??? ??? ??? ?font-size:10px;?? ?
?? ??? ??? ?}
?? ??? ??? ?ul>li:nth-of-type(2){
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background: yellow;
?? ??? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ??? ?border: 20px solid red;
?? ??? ??? ??? ?font-size:10px;
?? ??? ??? ??? ?filter: alpha(opacity:30);/*IE*/
?? ??? ??? ??? ?opacity: 0.3;?? ??? ??? ?? /*火狐*/?? ?
?? ??? ??? ?}
?? ??? ??? ?ul>li:nth-of-type(3){
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background: yellow;
?? ??? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ??? ?border: 20px solid red;
?? ??? ??? ??? ?font-size:10px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script>
?? ??? ??? ?window.onload=function(){
?? ??? ??? ??? ?var div1 = document.getElementById("div1");
?? ??? ??? ??? ?var div2 = document.getElementById("div2");
?? ??? ??? ??? ?var div3 = document.getElementById("div3");
?? ??? ??? ??? ??? ?div1.onmousemove = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'width',400);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?div1.onmouseout = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'width',200);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?div2.onmousemove = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'opacity',100);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?div2.onmouseout = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'opacity',30);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?div3.onmousemove = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'height',200);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?div3.onmouseout = function(){
?? ??? ??? ??? ??? ??? ?startMove(this,'height',100);
?? ??? ??? ??? ??? ?}??? ?
?? ??? ??? ?}? ?
?? ??? ??? ?var alpha = 30;
?? ??? ??? ?function getStyle(obj,attr){
?? ??? ??? ??? ?if(obj.currentStyle){
?? ??? ??? ??? ??? ?return obj.currentStyle[attr];
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?function startMove(obj,style1,value){ ?
?? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ?obj.timer = setInterval(function(){
?? ??? ??? ??? ??? ?var icur = 0;
?? ??? ??? ??? ??? ?if(style1 == "opacity"){
?? ??? ??? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,style1))*100);
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?icur =Math.round(parseInt(getStyle(obj,style1)));
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?var speed =(value-icur)/8;
?? ??? ??? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ??? ??? ?if(icur == value){
?? ??? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?if(style1 =="opacity"){
?? ??? ??? ??? ??? ??? ??? ?obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
?? ??? ??? ??? ??? ??? ??? ?obj.style.opacity = (icur+speed)/100;
?? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?obj.style[style1] = icur+speed+"px";
?? ??? ??? ??? ??? ??? ??? ?obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px"; ??? ?
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?},30)
?? ??? ??? ?} ?
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li id="div1">1</li>
?? ??? ??? ?<li id="div2">2</li>
?? ??? ??? ?<li id="div3">3</li>
?? ??? ?</ul>
?? ?</body>
</html>

????????照抄的，請勿噴我。。。

0 回復 有任何疑惑可以回復我~

你好 這個老師沒有上傳源碼

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
JS動畫效果
  • 參與學習       113918    人
  • 解答問題       1502    個

通過本課程JS動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝

進入課程

源碼在何方？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號