JavaScript实现点击改变图片形状(transform应用)
更新时间：2021年04月29日 14:12:25 作者：知识进脑的肖老千啊
这篇文章主要为大家详细介绍了JavaScript实现点击改变图片形状，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript之点击改变图片形状（transform的应用），供大家参考，具体内容如下
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform的运用</title>
<style type="text/css">
#box{
width: 50px;
height: 50px;
background-color: red;
/*traslate 位移 rotate 旋转幅度 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>
实现效果图：
默认原始情况下：
点击形变后：
再次点击则会继续发生变化。
下边对transform的应用进行扩展，运用于时钟的走动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字时钟案例</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.获取标签
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
// 2.开启定时器 获取当前时间
setInterval(function (){
// 2.1获取当前的时间戳
var now = new Date();
// 2.2获取小时 分钟 秒
var s = now.getSeconds();
var m = now.getMinutes() + s/60;
var h = now.getHours()%12 + m/60;
// 2.3旋转
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>
附上效果图（现在是八点零一）：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
这篇文章主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，这篇文章主要介绍了微信小程序view与scroll-view组件的使用2022-10-10
这篇文章主要介绍了小程序关于请求同步的总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要教大家如何简单实现js上传文件功能，代码简单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……2009-05-05
这篇文章主要介绍了JavaScript实现按Ctrl键打开新页面的例子,本文方法适用HTML5环境中,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了解决javascript 全局变量失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2016-04-04
本文主要介绍了JavaScript如何用面向对象的方式封装拖拽对象，通过3种方式来实现，帮助读者更好的理解其原理2021-06-06
这篇文章主要介绍了js怎么判断浏览器类型，当类型为ie6时如何不执行,需要的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了javascript设计模式之装饰者模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论