jquery山寨小特效
查地图的时候发现Mapbar有了新版，于是手贱点了去看看，整体感觉改版还算不错，那个全屏/还原的效果挺不错的，于是山寨了一下，各位看官请尽情拍砖~ (路过)
其实那个效果感觉和显示/关闭侧边栏有着惊人的相似，于是按照那种思路去写，先上代码吧，顺便说一下，附带的那个手风琴效果是应某人要求写的，顺便一道放出来透透风哈
/*手风琴效果*/
$(function(){
$(‘.slide h3′).click(function(){
$(this).addClass(“on”).siblings().removeClass(“on”); //切换样式
$(this).next().slideDown(“300″).siblings(“div”).slideUp(“300″); //如果觉得过度不好的话可以把“300”改成fast
})
/*我是侧边栏*/
$(‘.full a’).toggle(function(){
$(this).text(“正常视图”); //改变内容
$(‘.sidebar’).animate({width:“0″},300) //右侧边栏宽度变为0
$(‘.map’).animate({width: “99%”}, 300); //内容变为全屏
},function(){
$(this).text(“全屏显示”); //
$(‘.map’).animate({width: “80%”}, 500).animate({width: “79%”}, 200).animate({width: “80%”}, 300)
$(‘.sidebar’).animate({width:“19%”},200)
});
})
$(function(){
$(‘.slide h3′).click(function(){
$(this).addClass(“on”).siblings().removeClass(“on”); //切换样式
$(this).next().slideDown(“300″).siblings(“div”).slideUp(“300″); //如果觉得过度不好的话可以把“300”改成fast
})
/*我是侧边栏*/
$(‘.full a’).toggle(function(){
$(this).text(“正常视图”); //改变内容
$(‘.sidebar’).animate({width:“0″},300) //右侧边栏宽度变为0
$(‘.map’).animate({width: “99%”}, 300); //内容变为全屏
},function(){
$(this).text(“全屏显示”); //
$(‘.map’).animate({width: “80%”}, 500).animate({width: “79%”}, 200).animate({width: “80%”}, 300)
$(‘.sidebar’).animate({width:“19%”},200)
});
})
山寨的不是太好，应个人意愿给它加个一个小小的缓冲效果，手艺还不到家，各位看官别在意就行了~~ demo在这里
/*你可以山寨我的肉体，但你山寨不了我的灵魂*/
相关日志-小站地图为你展开
- 十一国庆logo动画
- wordpress分类图标自定义
- 电子商城左侧jquery导航效果
- @评论回复效果
- 谷歌logo动画jquey版
- WP筛选评论最少文章晒太阳
- jquery伪ajax动态加载评论
- Wordpress文本框字数统计
- jquery放大镜效果
<<下一篇 个人折腾小总结
Jquery开关门效果 上一篇 >>
