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插件之easing 动态菜单
Aug 21 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JavaScript中的高级函数
Jan 04 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python梯度下降法的简单示例
2018/08/31 Python
详解python中@的用法
2019/03/27 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
团员个人的自我评价
2013/12/02 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
找工作求职信
2014/07/07 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
Elasticsearch 批量操作
2022/04/19 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL