JavaScript實(shí)現(xiàn)點(diǎn)擊改變圖片形狀(transform應(yīng)用)
更新時(shí)間：2021年04月29日 14:12:25 作者：知識(shí)進(jìn)腦的肖老千啊
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊改變圖片形狀，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
JavaScript之點(diǎn)擊改變圖片形狀（transform的應(yīng)用），供大家參考，具體內(nèi)容如下
附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform的運(yùn)用</title>
<style type="text/css">
#box{
width: 50px;
height: 50px;
background-color: red;
/*traslate 位移 rotate 旋轉(zhuǎn)幅度 scale 放大幅度 skew傾斜*/
/*transform: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
}
</style>
</head>
<body>
<button id="btn">形變</button>
<div id="box"></div>
<script>
window.onload = function (){
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var index = 0;
btn.onclick = function (){
index++;
box.style.transform = `translate(${index*100}px,${index*50}px) rotate(${index*10}deg) scale(${index*1.3})`;
}
}
</script>
</body>
</html>
實(shí)現(xiàn)效果圖：
默認(rèn)原始情況下：
點(diǎn)擊形變后：
再次點(diǎn)擊則會(huì)繼續(xù)發(fā)生變化。
下邊對(duì)transform的應(yīng)用進(jìn)行擴(kuò)展，運(yùn)用于時(shí)鐘的走動(dòng)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)字時(shí)鐘案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#clock{
width: 600px;
height: 600px;
background: url("img/clock.jpg") no-repeat;
position: relative;
}
#hour,#minute,#second{
position: absolute;
width: 30px;
height: 600px;
left: 50%;
margin-left: -15px;
}
#hour{
background: url("img/hour.png") no-repeat;
}
#minute{
background: url("img/minute.png") no-repeat;
}
#second{
background: url("img/second.png") no-repeat;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script type="text/javascript">
// 1.獲取標(biāo)簽
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
// 2.開啟定時(shí)器 獲取當(dāng)前時(shí)間
setInterval(function (){
// 2.1獲取當(dāng)前的時(shí)間戳
var now = new Date();
// 2.2獲取小時(shí) 分鐘 秒
var s = now.getSeconds();
var m = now.getMinutes() + s/60;
var h = now.getHours()%12 + m/60;
// 2.3旋轉(zhuǎn)
second.style.transform = `rotate(${s*6}deg)`;
minute.style.transform = `rotate(${m*6}deg)`;
hour.style.transform = `rotate(${h*30}deg)`;
},10)
</script>
</body>
</html>
附上效果圖（現(xiàn)在是八點(diǎn)零一）：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
每周一練 之 數(shù)據(jù)結(jié)構(gòu)與算法（Stack）
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法（Stack），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04 
js 獲取元素所有兄弟節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取元素所有兄弟節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09 
淺談laytpl 模板空值顯示null的解決方法及簡(jiǎn)單的js表達(dá)式
今天小編就為大家分享一篇淺談laytpl 模板空值顯示null的解決方法及簡(jiǎn)單的js表達(dá)式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09 
微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09 
javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04 
這篇文章主要介紹了五種JavaScript判斷是否為整數(shù)類型方式，需要的朋友可以參考下
2015-12-12 
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對(duì)象提供了許多方法和屬性,可以通過它們來進(jìn)行日期的格式化,需要的朋友可以參考下
2023-09-09 
談?wù)凧SON對(duì)象和字符串之間的相互轉(zhuǎn)換JSON.stringify(obj)和JSON.parse(string)
這篇文章主要介紹了談?wù)凧SON對(duì)象和字符串之間的相互轉(zhuǎn)換JSON.stringify(obj)和JSON.parse(string)以及JSON的parse()和stringfy()方法詳解，感興趣的朋友一起看看吧
2015-10-10 
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用，他可以返回請(qǐng)求的數(shù)據(jù)，然后利用客戶端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12