jQuery控制的不同方向的滑动(向左、向右滑动等)


Posted in Javascript onJuly 18, 2014

引入jquery.js,复制以下代码,即可运行。

<style type="text/css"> 
.slide { 
position: relative; 
height: 200; 
lightyellow; 
} 

.slide .inner { 
position: absolute; 
left: 0; 
bottom: 0; 
height: 100; 
lightblue; 
width: 100% 
} 
</style>

1、slidetoggle() 交替slidedown(),slideup()

Html代码

<div id="slidebottom" class="slide"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$('#slidebottom button').click(function() { 
$(this).next().slideToggle(); 
});

2、左侧横向交替滑动 Animate Left

Html代码

<div id="slidewidth" class="slide"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slidewidth button").click(function(){ 
$(this).next().animate({width: 'toggle'}); 
});

3、左侧横向交替滑动 Animate Left Margin (非隐藏)

Html代码

<div id="slideleft" class="slide" style="width: 50%;float: right"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slideleft button").click(function(){ 
var $lefty = $(this).next(); 
$lefty.animate({ 
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0 
}); 
});

4、右侧横向滑动Slide to right

Html代码

<div id="slidemarginleft" class="slide" style="width: 60%;float: left"> 
<button> 
slide it 
</button> 
<div class="inner"> 
Slide from bottom 
</div> 
</div>

Js代码

$("#slidemarginleft button").click(function(){ 
var $marginlefty = $(this).next(); 
$marginlefty.animate({ 
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0 
}); 
});
Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP令牌 Token改进版
2008/07/18 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
详解tween.js的使用教程
2017/09/14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python实现的弹球小游戏示例
2017/08/01 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python小白学习包管理器pip安装
2020/06/09 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
什么是View State?
2013/01/27 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
委托书怎么写
2014/07/31 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
租车协议书
2015/01/27 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python