网页制作中怎么做出点击按钮更换图片的效果

更改图片有两个办法

第一个是将所有图片加载，但是只显示一张图片，其余的隐藏，每点击一次，将当前的隐藏，下一个显示。

<div><!-- 这个div用了放置所有的img图片 -->

<img class="img" src="1.jpg" />

<img class="img" src="2.jpg" style="display:none" />

<img class="img" src="3.jpg" style="display:none" />

…………

<div> /*jq 代码 button click事件*/ 

if(!num){                                                   

    num = 0//初始化计数

}

$(".img").hide()

$(".img").eq(num).show()

num++

第二个是添加一个img，每次点击时候，更改img的src，即图片路径。

<div><!-- 这个div放置img图片 -->

<img class="img" src="1.jpg" />

<div> /*jq 代码 button click事件*/ 

if(!num){                                                   

    num = 0//初始化计数

}

$(".img").attr("src",num+".jpg")

num++

<style> 

.black{color:blackfont-weight:bold}

a{color:blue}

</style>

<script type="text/javascript" src="jquery.min.js"></script>//载入JQ库 

<script>  

$("a").click(function(){

$("a").attr("href","#").removeClass("black")

$(this).removeAttr("href").addClass("black")

})</script>  

<a class="black">新闻</a> <a href="#" class="">网页</a> <a href="#" class="">知道</a> <a href="#" class="">百科</a>

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。

---