如何制作一个dw开心消消乐横向特效手风琴特效，如图。

来源：蜘蛛抓取(WebSpider) 时间：2015-03-01 08:42 标签： dw特效
jquery手风琴相册幻灯片图片横向滚动展开收缩代码
分享到 13:47:33
下载资源：66次
下载积分：30分
不错，喜欢
很好！很好！很好！很好！很好！
这个真心超级喜欢
不错，很稀饭。
比较新颖的分类图片展示
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录Kwicks 基于jquery的图片展示横向手风琴效果
Kwicks 基于jquery的图片展示横向手风琴效果脚本简介：
jQuery 插件 Kwicks 图片展示横向手风琴效果，适合充当缩略图或图片效果演示。图片高度的修过在css里面图片宽度的修改在页面js里面。
下载地址：
解压密码：www.jb51.net 就是本站主域名，希望大家看清楚。
推荐使用 [
] 下载，使用 [
] 以上版本解压本站脚本。
如果这个脚本总是不能下载的请在评论中留言,我们会尽快修复，谢谢!
下载本站资源，如果服务器暂不能下载请过一段时间重试!
如果遇到什么问题，请评论留言，我们定会解决问题，谢谢大家支持!
本站提供的一些商业脚本是供学习研究之用，如用于商业用途，请购买正版。
本站提供的Kwicks 基于jquery的图片展示横向手风琴效果资源来源互联网，版权归该下载资源的合法拥有者所有。
不知如何下载的，可以查看jQuery 手风琴折叠菜单(含教程)_模板无忧
jQuery 手风琴折叠菜单(含教程)_jQuery导航菜单
jQuery&手风琴菜单，事实上就是大家常用到的折叠、展开菜单，jQuery的加入使其变得动感起来，像Flash一样具有动画效果。压缩包内含有制作本菜单的详细实例和实现步骤，并达到最终的效果，所用文件一起打包，学习jQuery动画的朋友可以参考一下。
售价：50UB
相关jQuery导航菜单：
特效代码搜索
jQuery导航菜单推荐
猜你也喜欢看这些十天学会 dreamweaver_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
喜欢此文档的还喜欢
十天学会 dreamweaver
网​上​搜​了​好​长​时​间​,​现​在​和​大​家​分​享​一​下​!
阅读已结束，如果下载本文需要使用
想免费下载本文？
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢当前位置： >
> &jQuerySlideX手风琴效果正文
jQuerySlideX手风琴效果图片展示
jQuerySlideX，CSS3+jQuery横向手风琴折叠图片展示效果。刚开始是五个bar，点击bar，对应的图片会展开，点击其他bar，其兄弟节点的图片会收起。效果不错。
1、css样式：
margin:0 2
height:500
background:#F0F;
font:bold 24px Arial, Helvetica, sans-
text-align:
color:#FFF;
-webkit-border-radius:25
-moz-border-radius:25
-o-border-radius:25
border-radius:25
-webkit-transition:0.3s ease-in-
-moz-transition:0.3s ease-in-
-o-transition:0.3s ease-in-
-ms-transition:0.3s ease-in-
.handle:hover{
background:#FC3;
-webkit-transform:scale(1.02);
-moz-transform:scale(1.02);
-ms-transform:scale(1.02);
-o-transform:scale(1.02);
background:#FC3;
background:url(images/grey.png);
height:500
margin:0 4
-webkit-border-radius:25
-moz-border-radius:25
-o-border-radius:25
border-radius:25
background:#FFF;
height:450
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
2、js代码：
&script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
var j = 1;
$(".handle").each(function(){
if($.browser.msie&&($.browser.version &= "8.0"))
$(this).children("p").html(j);
var i = $(this).attr("id");
$(this).children("p").html(i);
$(".handle").click(function(){
if(!$(this).siblings(".slide").is(":visible")){
$(this).addClass("select");
$(this).siblings(".slide").animate({width:"show"},300);
$(this).parent().siblings().children(".slide").animate({width:"hide"},300);
$(this).parent().siblings().children(".handle").removeClass("select");
$(this).siblings(".slide").animate({width:"hide"},300);
$(this).removeClass("select");
3、html代码：
&div class="handle" id="one"&&p class="rotate"&&/p&&/div&
&div class="slide"&&img src="images/1.jpg" /&&/div&
&div class="handle" id="two"&&p class="rotate"&&/p&&/div&
&div class="slide"&&img src="images/2.jpg" /&&/div&
&div class="handle" id="three"&&p class="rotate"&&/p&&/div&
&div class="slide"&&img src="images/3.jpg" /&&/div&
&div class="handle" id="four"&&p class="rotate"&&/p&&/div&
&div class="slide"&&img src="images/4.jpg" /&&/div&
&div class="handle" id="five"&&p class="rotate"&&/p&&/div&
&div class="slide"&&img src="images/5.jpg" /&&/div&

我要回帖

更多关于 dw特效 的文章

 

随机推荐