首页 > 特效插件 > 图像特效 >  JS百叶窗效果图片展示正文

JS百叶窗效果图片展示

特效介绍
JS百叶窗
JS百叶窗(手风琴)效果图片展示,一共七屏。鼠标移动到图片上,该图片会向两边挤,直到完全展开为止为止。
使用方法
1、在head引入下面的代码:
<link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/slider.js"></script>
2、拷贝下面的html代码到您的html页面即可:
<div id=center>
    <div id=slider>
        <div id=apDiv1><img border=0 alt="" src="images/tt_logo.jpg" width=821 height=37></div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/01.jpg"></a>
            <div class=text>模板网</div>
        </div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/02.jpg"></a>
            <div class=text>模板网</div>
        </div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/03.jpg"></a>
            <div class=text>模板网</div>
        </div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/04.jpg"></a>
            <div class=text>模板网</div>
        </div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/05.jpg"></a>
            <div class=text>模板网</div>
        </div>
        <div class=slide>
            <a href="http://www.5imoban.net/" target=_blank><img class=diapo border=0 src="images/06.jpg"></a>
            <div class=text>模板网</div>
        </div>
    </div>
</div>
<script type=text/javascript>
slider.init();
</script>