jquery实现上下左右滑动的方法
作者:bea
本文实例讲述了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"> <he
本文实例讲述了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程序设计有所帮助。
有用 | 无用
代码如下:
<!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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Js为表单动态添加节点内容的方法
- jQuery前端分页示例分享
- js进行表单验证实例分析
- EasyUi datagrid 实现表格分页
- Node.js node-schedule定时任务隔多少分钟执行一次的方法
- Node.js抓取中文网页乱码问题和解决方法
- JS数组的常见用法实例
- bootstrap table 服务器端分页例子分享
- js实现对table动态添加、删除和更新的方法
- js+css实现导航效果实例
- jquery.mobile 共同布局遇到的问题小结
- jquery中EasyUI使用技巧小结
- javascript操作符"!~"详解
- JavaScript中的标签语句用法分析
- jquery动态添加删除(tr/td)
- javascript模拟map输出与去除重复项的方法
- JavaScript设置body高度为浏览器高度的方法
- jquery动态改变div宽度和高度
- angularJS结合canvas画图例子