doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>animation
title
>
<
style
>
.mymove
.move
.moveclass
@keyframes moveturn
/*25%
50%75%
*/100%
} .middle
.center
style
>
head
>
<
body
>
<
div
class
="mymove"
>
<
div
onclick
="controllmove()"
>
點選我，讓下面的哥們不在轉
div>
<
div
class
="move"
id="move"
>
<
div
class
="middle"
>
<
div
class
="center"
>
div>
div>
div>
div>
body
>
<
script
src="js/jquery.min.js"
>
script
>
<
script
>
function
controllmove()
else
$(".move
").toggleclass(
"moveclass");
console.log(jiaodu);
$(".move
").css(
"transform
",jiaodu);
}script
>
html
>
剛開始是用點選事件的同時插入動畫class 暫停的時候則把動畫class移除。。。再次點選的時候再次新增此動畫class。
但是這邊有個bug，就是怎麼動態改變 @keyframes 內的值。網上搜尋了一下，唯一有個靠譜的是
var tt=document.stylesheets[0];tt.deleterule(6);//清除之前寫入的動畫樣式
console.log(tt);
tt.insertrule("@keyframes mymove 100%}",6);//寫入樣式
但是這個insertrule是xml的方法。而且本人並未實現
最後，久經波折。無意中發現乙個屬性
animation-play-state:paused;
這個屬性代表暫停動畫，並且繼續動畫的時候會從之前暫停的位置開始執行動畫
最後完整效果如下
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>animation
title
>
<
style
>
.mymove
.move
@keyframes moveturn
/*25%
50%75%
*/100%
} .middle
.center
style
>
head
>
<
body
>
<
div
class
="mymove"
>
<
div
onclick
="controllmove()"
>
點選我，讓下面的哥們不在轉
div>
<
div
class
="move"
id="move"
>
<
div
class
="middle"
>
<
div
class
="center"
>我叫人生不過百餘年
div>
div>
div>
div>
body
>
<
script
src="js/jquery.min.js"
>
script
>
<
script
>
varclicktime
=true
;
varmove
=document.getelementbyid(
"move");
function
controllmove()
else
}script
>
html
>
完美解決動畫暫停繼續的問題
hive如何將split切割後的結果轉成列輸出
首先建立乙個測試表 test 將需求表明。id name 1 yy,tl,dd 2 xy,dl,dz 想要得到的結果是 1 yy 1 tl 1 dd 2 xy 2 dl 2 dz思路 需要將name通過 進行切割 split 得到陣列結果集，就需要考慮如何將這個陣列和id如何輸出,此時就要借助exp...
如何將flash中的程式搬到ram中執行
4.f28335如何燒寫 到flash中並執行？首先使用新增c ti controlsuite device support f2833x v133 dsp2833x common cmd f28335.cmd。此檔案即為配置 到flash中的ti官方配置檔案。然後參考c ti controlsui...
如何將Panel裡的內容全部旋轉90度後列印？
system.runtime.interopservices.dllimportattribute gdi32.dll private static extern bool bitblt intptr hdcdest,handle to destination dc int nxdest,x coo...