欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車

 更新時(shí)間：2022年02月24日 08:28:22   作者：wwwwnby  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

相信大家都對(duì)風(fēng)車這個(gè)東西感到不陌生，所以我們今天就要寫一個(gè)大風(fēng)車的案例.

這是一個(gè)動(dòng)態(tài)網(wǎng)頁，下面是css文件的代碼，廢話少說，上代碼：

<style>
? ? ? ? .fc{
? ? ? ? ? ? animation:wm 2s infinite linear;
? ? ? ? }
? ? ? ? @keyframes wm {
? ? ? ? ? ? from {
? ? ? ? ? ? ? ? transform:rotate(0deg);
? ? ? ? ? ? }
? ? ? ? ? ? to {
? ? ? ? ? ? ? ? transform:rotate(-360deg);
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? .rfc{
? ? ? ? ? ? animation:wm1 2s infinite linear;
? ? ? ? }
? ? ? ? @keyframes wm1 {
? ? ? ? ? ? from {
? ? ? ? ? ? ? ? transform:rotate(0deg);
? ? ? ? ? ? }
? ? ? ? ? ? to {
? ? ? ? ? ? ? ? transform:rotate(360deg);
? ? ? ? ? ? }
? ? ? ? }
</style>

接下來是js的文件

<body>
<div>
? ? <h3>我愛玩風(fēng)車</h3>
? ? <img src="../img/logo.png" class="" alt="" id="img1">
? ? <hr>
? ? <input type="button" value="開始" onclick="start1()">
? ? <input type="button" value="停止" onclick="stop1()">
? ? <input type="button" value="反轉(zhuǎn)" onclick="reverse()">
? ? <input type="button" value="轉(zhuǎn)1圈" onclick="circle(1)">
? ? 轉(zhuǎn)<input type="text" size="1" value="" onblur="circle(this.value)">圈

</div>
</body>
<script>
? ? function circle(n){
? ? ? ? //處于停止?fàn)顟B(tài)
? ? ? ? if(img1.className==''){
? ? ? ? ? ? start1()
? ? ? ? }
? ? ? ? //已經(jīng)在轉(zhuǎn)了
? ? ? ? setTimeout(stop1,2000*n)


? ? }

? ? //反轉(zhuǎn)
? ? function reverse(){
? ? ? ? img1.className='rfc'
? ? }

? ? //轉(zhuǎn)起來
? ? function start1() {
? ? ? ? img1.className='fc'
? ? }
? ? //停下來
? ? function stop1() {
? ? ? ? img1.className=''
? ? }

</script>

查看成品：

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論