yd12300浜戦《绾胯矾(鑲′唤)鏈夐檺鍏徃

首页 > 支持图片自动播放的手风琴js+div+css动画效果

支持图片自动播放的手风琴js+div+css动画效果

时间：2014/10/16 19:52:57 作者：tsccwl 人气：标签：js+****+css 图片自动播放手风琴js

　　

今天做网站时有客户要求有手风琴效果的幻灯片

于是就搞了一个和大家分享另外还可以自动播放的

这个动画的底部采用了渐变的绿色，似乎要符合低炭的生活概念，顶部是大图，大图下面采用滤镜来作文字介绍，右侧采用一个小三角作为标示。图片及文字是带有链接的，点击进去就是相应的文章了。

代码如下

<link rel="stylesheet" type="text/css" href="/jsshoufengqin/css/lanrenzhijia.css"> <script language="javascript" type="text/javascript" charset="gb2312" src="/jsshoufengqin/js/lanrenzhijia.js"></script>


<div id="expo-accordin" style="height:360px;">
<div class="accordin-focucs on"><a href="/"><img src="/jsshoufengqin/images/2010092018314590b3f.jpg" /></a> <div class="accordin-message">
懒人之家右侧弹出动画设计

</div>
<div class="accordin-arrow"><img src="/jsshoufengqin/images/navarrow.png" width="9" height="5" /> </div>
</div>
<h2 class="accordin-bar4 on"><a href="#">懒人之家右侧弹出动画设计</a></h2>
<div class="accordin-focucs "><a href="/"><img src="/jsshoufengqin/images/20100919082340e3a16.jpg" /></a> <div class="accordin-message">
梦芭莎底部弹出窗口动画设计

</div>
<div class="accordin-arrow"><img src="/jsshoufengqin/images/arr2.gif" width="9" height="5" /> </div>
</div>
<h2 class="accordin-bar1 on"><a href="#">梦芭莎底部弹出窗口动画设计</a></h2>
<div class="accordin-focucs "><a href="/"><img src="/jsshoufengqin/images/2010091708524301b19.jpg" /></a> <div class="accordin-message">
js实现横向弹出二级菜单

</div>
<div class="accordin-arrow"><img src="/jsshoufengqin/images/arr3.gif" width="9" height="5" /> </div>
</div>
<h2 class="accordin-bar2 on"><a href="#">js实现横向弹出二级菜单</a></h2>
<div class="accordin-focucs "><a href="/"><img src="/jsshoufengqin/images/2010091410211075087.jpg" /></a> <div class="accordin-message">
阿里巴巴首页导航菜单设计制作

</div>
<div class="accordin-arrow"><img src="/jsshoufengqin/images/img_37.png" width="9" height="5" /> </div>
</div>
<h2 class="accordin-bar3 on"><a href="#">阿里巴巴首页导航菜单设计制作</a></h2>
</div>

<script type="text/javascript">
//<![CDaTa[ 
new NTES.ui.Slide($("#expo-accordin > h2"), $("#expo-accordin > div.accordin-focucs"), "on", "mouseover", 3000); //以每3 秒切换一次的速度自动播放
//]]> 
</script>

提示：复制和保存代码功能在FF下无效。

上一篇：唐山的企业网站建设如何改版如何保持排名稳定性呢
下一篇：Win10是微软必然选择主要是消除Win8和8.1的负面影响

地址：中国.唐山市路北区尚座即理工大学对面中国.河北唐山遵化市唐山做网站
本站网址：www.tswzsj.com联系电话：0315-6025099 建站热线：浜戦《yd12300绾胯矾

唐山网站建设报价咨询

网站售前售后服务

冀ICP备12014317号-1 版权所有:唐山长城网络 www.tswzsj.com