基于jQuery果冻式按钮切换特效

基于jQuery果冻式按钮切换特效

一款基于jQuery+CSS3实现的图片切换代码。鼠标滑过下方的焦点图可实现对应大图的切换显示效果,且焦点图切换过度效果平滑自然,兼容各类主流浏览器。

使用方法
引入相关CSS样式

1
<link rel="stylesheet" href="css/chinaz.css" />

JS代码

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/chinaz.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<br>
<div class="index_slide">
    <div class="wrap_1005 slide">
        <ul class="slide_con clearfix">
            <li><img src="images/index_slide_con01.png" alt="51前端"><a href="http://www.51qianduan.com//" class="slide_con_a" target="_blank">投放申请</a></li>
            <li><img src="images/index_slide_con02.png" alt="51前端"><a href="http://www.51qianduan.com//" class="slide_con_a" target="_blank">投放申请</a></li>
            <li style="display: block;"><img src="images/index_slide_con03.png" alt="51前端"><a href="http://www.51qianduan.com//" class="slide_con_a" target="_blank">投放申请</a></li>
            <li><img src="images/index_slide_con04.png" alt="51前端"><a href="http://www.51qianduan.com//" class="slide_con_a" target="_blank">投放申请</a></li>
            <li><img src="images/index_slide_con05.png" alt="51前端"><a href="http://www.51qianduan.com//" class="slide_con_a" target="_blank">投放申请</a></li>
        </ul>
        <ul class="slide_index clearfix">
            <li class="one"></li>
            <li class="two"></li>
            <li class="three hover"></li>
            <li class="four"></li>
            <li class="five"></li>
        </ul>
    </div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论