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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
uni-app如何实现增量更新功能
Jan 03 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学习笔记之二 php入门知识
2011/01/12 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
angular.bind使用心得
2015/10/26 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
毕业生就业自荐信
2013/12/04 职场文书
党员服务承诺书
2014/05/28 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js