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


Posted in Javascript onFebruary 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
js实现上传图片预览的方法
Feb 09 #Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
jquery实现相册一下滑动两次的方法
Feb 09 #Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 #Javascript
angularJS 入门基础
Feb 09 #Javascript
You might like
php Smarty 字符比较代码
2011/02/27 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
教师节促销方案
2014/03/22 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
2014中考励志标语
2014/06/05 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
Django程序的优化技巧
2021/04/29 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL