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 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
基于element-ui的rules中正则表达式
Sep 04 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迭代器实现斐波纳契数列的函数
2013/11/12 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Django权限设置及验证方式
2020/05/13 Python
python中append函数用法讲解
2020/12/11 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
中学教师管理制度
2014/01/14 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
主要领导对照检查材料
2014/08/26 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python