首页 » JavaScript » 正文

javascript制作点击切换时的小技巧

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2017-2-14 ·  4,061 views  ·  0 replies 

如上图所示,鼠标点击图片,则变成了另一张图,再次点击,就又变回了原始图片,这个小效果是怎么实现的呢?
在制作这个效果的时候,我们定义了一个onOff变量,值为布尔值true,然后用if判断,在程序里通过改变onOff的值来完成这个小效果
[php] <!DOCTYPE html>
<html>
<head>
<title>html属性</title>
<style>

</style>
<script>
window.onload = function (){
var oImg = document.getElementById(‘img1’);
var onOff = true; //开关:布尔值

oImg.onclick = function (){
if( onOff ){
oImg.src = "img/thumb1.jpg";
onOff = false;
}else{
oImg.src = "img/thumb2.jpg";
onOff = true;
}
}
}
</script>
</head>
<body>
<img id="img1" src="img/thumb1.jpg" />
</body>
</html>
[/php]

«上一篇: :下一篇»

0 thoughts on “javascript制作点击切换时的小技巧”

  1. 还没有任何评论,你来说两句吧

Leave a reply