我生待明日,万事成蹉跎

JS小特效-点击图片消失及再现

这个JS小特效实现的效果:点击任意一张图片后,图片会加上蓝色边框及显示一个删除按钮,若再次点击图片,图片的蓝色边框会消失,与此同时,如果页面上没有任何图片显示出蓝色边框,删除按钮也会消失。当然,这个JS小特效只是对付图片少的权宜之计,若图片很多,应该用到数组和循环(太简单,就不写注释了,一时不理解的初学者朋友就自己仔细揣摩下)

<!DOCTYPE html>
<html>
<head>
<meta content=”text/html” charset=”utf-8″/>
<title></title>
<script type=”text/javascript” src=”jquery-1.8.2.js”></script>
</head>
<body style=”margin: 0px;padding: 0px;”>
<div id=”thediv” style=”margin: 0 auto;width: 800px;height: 500px;”>
<img id=”img1″ src=”school.jpg” onclick=”change1()” style=”border: 0px;”>
<img id=”img2″ src=”school.jpg” onclick=”change2()” style=”border: 0px;”>
<img id=”img3″ src=”school.jpg” onclick=”change3()” style=”border: 0px;”>
<input id=”thedelete” type=”button” value=”删除” style=”display: none;”/>
</div>
</body>
<script>
//第一张图片
function change1(){
if($(“#img1”).get(0).style.border==parseInt(“0″)+”px”){
$(“#img1”).css(“border”,”5px blue solid”);
$(“#thedelete”).css(“display”,”block”);
}else{
$(“#img1”).css(“border”,”0″);
if($(“#img2”).get(0).style.border==parseInt(“0”)+”px”&&$(“#img3”).get(0).style.border==parseInt(“0″)+”px”){
$(“#thedelete”).css(“display”,”none”);
}
}
}
function change2(){//第二张图片
if($(“#img2”).get(0).style.border==parseInt(“0″)+”px”){
$(“#img2”).css(“border”,”5px blue solid”);
$(“#thedelete”).css(“display”,”block”);
}else{
$(“#img2”).css(“border”,”0″);
if($(“#img1”).get(0).style.border==parseInt(“0”)+”px”&&$(“#img3”).get(0).style.border==parseInt(“0″)+”px”){
$(“#thedelete”).css(“display”,”none”);
}
}
}
function change3(){//第三张图片
if($(“#img3”).get(0).style.border==parseInt(“0″)+”px”){
$(“#img3”).css(“border”,”5px blue solid”);
$(“#thedelete”).css(“display”,”block”);
}else{
$(“#img3”).css(“border”,”0″);
if($(“#img1”).get(0).style.border==parseInt(“0”)+”px”&&$(“#img2”).get(0).style.border==parseInt(“0″)+”px”){
$(“#thedelete”).css(“display”,”none”);
}
}
}
</script>
</html>

未经允许不得转载:徐宏涛博客 » JS小特效-点击图片消失及再现

分享到:更多 ()

评论 抢沙发

评论前必须登录!