jQuery滑动方式上下左右滚动效果

快乐打工仔 分类:实例代码

jQuery滑动方式上下左右滚动效果属于前端实例代码,有关更多实例代码大家可以查看

本章节介绍一下使用jQuery实现的div块上下左右以动画方式实现移动效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#box{
  width:200px; 
  height:200px;
}
#first{
  text-align:center; 
  width:200px; 
  height:200px;
  position:absolute;
}
#sec{
  text-align:center; 
  width:200px; 
  height:200px; 
  display:none;
  position:absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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 id="box">
  <div id="first">
    <p>犀牛前端部落一</p>
    <p>犀牛前端部落二</p>
    <p>犀牛前端部落三</p>
    <p>犀牛前端部落四</p>
    <p>犀牛前端部落五</p>
  </div>
  <div id="sec">
    <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>

上面的代码实现了动画移动效果,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2). $("#btn").unbind().click(function(){}),首先解绑所有的事件处理函数(这里没有此操作),然后再注册click事件处理函数。

(3).$("#first").hide(),先将不需要的元素隐藏。

(4).$("#sec").css("left","-200px").animate({"left":"0px"},500).show(),首先瞬间将元素的left属性值设置为-200px,这个时候元素就看不到了,被左边缘隐藏,然后以动画的方式设置此元素显示出来。

二.相关阅读:

(1).hide()参阅jQuery hide()一章节。

(2).css()方法参阅jQuery css()一章节。

(3).animate()方法参阅jQuery animate()一章节。

jQuery滑动方式上下左右滚动效果,这样的场景在实际项目中还是用的比较多的,关于jQuery滑动方式上下左右滚动效果就介绍到这了。

回复

我来回复
  • 暂无回复内容