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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").unbind().click(function(){
$("#first").hide();

$("#sec").css("left","-200px").animate({"left":"0px"},500).show();
});

$("#btn2").unbind().click(function(){
$("#sec").hide();

$("#first").css("left","200px").animate({"left":"0px"},500).show();
});

$("#btn3").unbind().click(function(){
$("#first").hide();
$("#sec").css("top","200px").animate({"top":"0px"},500).show();
});

$("#btn4").unbind().click(function(){
$("#sec").hide();
$("#first").css("top","-200px").animate({"top":"0px"},500).show();
});
});
</script>
</head>

<body>
<div style="width:200px; height:200px;">
<div id="first" style="text-align:center; width:200px; height:200px;position:absolute;">
    <p>第一页</p>
        <p>第一页</p>
        <p>第一页</p>
        <p>第一页</p>
        <p>第一页</p>
    </div>
    <div id="sec" style="text-align:center; width:200px; height:200px; display:none;position:absolute;">
        <p>第二页</p>
        <p>第二页</p>
        <p>第二页</p>
        <p>第二页</p>
        <p>第二页</p>
    </div>
</div>
<div style="width:200px; height:50px;">
<input type="button" value="向右滚动" id="btn"/>
    <input type="button" value="向左滚动" id="btn2"/>
    <input type="button" value="向上滚动" id="btn3"/>
    <input type="button" value="向下滚动" id="btn4"/>
</div>
</body>
</html>

特别要注意：代码中的position:absolute;一定要加上，否则不会出现效果。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

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

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

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

  • 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

  • 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&

  • jQuery简单实现上下,左右滑动的方法

    本文实例讲述了jQuery简单实现上下,左右滑动的方法.分享给大家供大家参考,具体如下: 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不多说,上码 //isw2 zhouxianglh 2010.07.07 //移动ul var slideOperate = { slideUlId : "",//UL id 用于操作Ul fadeInTime : 2000

  • jQuery实现左右滑动的toggle方法

    我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法. slideUp()方法和slideDown()方法只会改变元素的高度.如果一个元素的 display 属性值为 "none",当调用 slideDown() 方法时,这个元素将由上至下延伸显示.slideUp()方法正好相反,元素将由上到下缩短隐藏. 代码如下: <!DOCTYPE html> <html lang="en">

  • jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

    jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

    本文实例讲述了jQuery实现通过方向键控制div块上下左右移动的方法.分享给大家供大家参考,具体如下: 在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现一个元素在页面中的移动效果,这里我们采用JQuery的animate方法来实现动画效果,利用keydown监听方向键按下的事件(这里采用keydown而不是keyup,是为了能够在方向键被一直按

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • android中使用Activity实现监听手指上下左右滑动

    android中使用Activity实现监听手指上下左右滑动

    用Activity的onTouchEvent方法实现监听手指上下左右滑动 应用了Activity的ontouchEvent方法监听手指点击事件,手指滑动的时候会先按下,滑倒另一个地方再抬起,我们就可以根据按下的坐标和抬起的坐标算出用户是往哪一个方向滑动了. package com.example.testtt; import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; impor

  • 快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

    快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

    本文为大家分享了jquery.touchSwipe左右滑动和垂直滚动条冲突问题的解决方法,具体内容如下 正好需要Html5做一个左右可以切换的功能,但是要保留上下滚动条功能.我在移动端使用的jquery.touchSwipe插件,上网找了好久没有看到对应的解决方式,只能自己修改了,最后是能用了. 先上个图: 解决方式是,我把左右滚动的事件添加到了Body上面,而上下活动的使用了DIV的垂直滚动.上代码: $("#body").swipe( { fingers:'all', swipeL

  • jQuery蓝色风格滑动导航栏代码分享

    jQuery蓝色风格滑动导航栏代码分享

    这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址 为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo

  • BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势. 然后......自己想办法呗,再然后,就有下面3种解决方案 : jQuery Mobile (http:/

  • MUI 实现侧滑菜单及其主体部分上下滑动的方法

    在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑,而MUI侧滑菜单默认是没有上下滑动功能的,需要激活. 1.首先在 class="mui-scroll-wrapper" 的元素上添加ID: <!-- 侧滑导航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left&q

随机推荐