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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 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
可输入的下拉框
2006/06/19 Javascript
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
JQuery live函数
2010/12/24 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JScript实现地址选择功能
2017/08/15 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
js实现简单点赞操作
2020/03/17 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
学习python的几条建议分享
2013/02/10 Python
Python中的异常处理简明介绍
2015/04/13 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python 生成器需注意的小问题
2020/09/29 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
给儿子的表扬信
2014/01/15 职场文书
2014年物流工作总结
2014/11/25 职场文书
房屋租房协议书范本
2014/12/04 职场文书
小学元宵节活动总结
2015/02/06 职场文书
入党积极分子个人总结
2015/03/02 职场文书
小学大队长竞选稿
2015/11/20 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL