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

引入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
});
});
赞 (0)

相关推荐

  • 如何在Android中实现左右滑动的指引效果

    如何在Android中实现左右滑动的指引效果

    本文的目的是要实现左右滑动的指引效果.那么什么是指引效果呢?现在的应用为了有更好的用户体验,一般会在应用开始显示一些指引帮助页面,使用户能更好的理解应用的功能,甚至是一些新闻阅读器会把一些头条新闻以指引效果的形式显示.说个最基本的,就是我们的手机主屏幕就是这种效果. 下面我们就开始实现我们的左右滑动指引效果.为了大家更好的理解,我们先看下实现效果,如下图所示:     在这里,我们需要用到google提到的一个包--android-support-v4.jar,这个包包含了一些非常有用的类,其中

  • ViewPager判断是向左划还是右划的实例

    实例如下: //记录上一次滑动的positionOffsetPixels值 private int lastValue = -1; private boolean isLeft = true; mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int po

  • Android使用ViewPager实现无限滑动效果

    Android使用ViewPager实现无限滑动效果

    前言 其实仔细想一下原理还是挺简单的.无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页. 但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然. 小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果.实现细节以及一些踩过的坑. 1.无限滑动效果(左右无限滑动) 事先准备好2张滑动图片(有想试验的小伙伴,自备图片啊,小编就不提供了...) 运行效果图(左右无限循环): 为了显示更加直观

  • jquery实现上下左右滑动的方法

    本文实例讲述了jquery实现上下左右滑动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • ViewPager 滑动一半的判断方法以及左滑右滑判断实例

    做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewpager的接口是不能判断,这里提供一个方法:判断viewpager是左滑还是右滑,同时对滑过一半的时候(这个参数可以调),进行相关操作. //定义两个变量,这个两个变量是表示滑动时候,positionOffset 是从大到 //小的变化,还是从小到大的变化.用于在滑动时候,避免多次调用一个方法 pr

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

    引入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() 交替slided

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    本文实例讲述了JQuery控制div外点击隐藏而div内点击不会隐藏的方法.分享给大家供大家参考.具体如下: 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: 复制代码 代码如下: $("#body").click(function(e) {      $(this).show();          e.stopPropagation();  });  $(document).click(function(event) {   

  • 基于jquery实现百度新闻导航菜单滑动动画

    基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jQuery控制文本框只能输入数字和字母及使用方法

    在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成

  • 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)

    jquery控制CSS样式,并且取消Css样式(如背景色)   $("#tab1").css("background-color", "");   $("#" + left_tabid).css("background-color", "#025891");

  • 通过BootStrap-select插件 js jQuery控制select属性变化

    bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究出来了,当然有的人会干掉重新生成那样太low,我决定来填补这个空白. js控制select属性变化其实很简单,并不需要 $('#goodsNames').selectpicker('render'); $('#goodsNames').selectpicker('refresh'); 来重新渲染只用

  • jQuery控制div实现随滚动条滚动效果

    本文实例讲述了jQuery控制div实现随滚动条滚动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条滚动效果</title> <script src="../js/jquery-1.11.1.min.js" type="text/javascript"&

  • jQuery控制cookie过期时间的方法

    本文实例讲述了jQuery控制cookie过期时间的方法.分享给大家供大家参考.具体分析如下: jquery.cookie()方法可以设置cookie,默认条件下是浏览器关闭cookie即失效,用下面方法可以解决这个问题 <script type="text/javascript"> var expiresDate= new Date(); expiresDate.setTime(expire.getTime() + (? * 60 * 1000)); //?替换成分钟数如

随机推荐