本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

Jquery slide轻松实现上下左右四个方向滑动

在JQ官方文档中,已经给出了上下滑动的事例,但是左右滑动怎么处理呢?我们来一起学习下吧:

1.上下滑动

上下滑动有 下滑:slideDown() 上滑:slideUp() 以及交叉滑动:slideToggle()

$("#flip").click(function(){
  $("#panel").slideDown();
  $("#panel").slideUp();
  $("#panel").slideToggle();
});

在使用中,我们可以直接调用她的一些特殊属性,比如

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow",test);
  });
});
function test()
{
alert("test");
}
</script>

在这里,执行完滑动后,他会调用例外一个函数,弹出test

2.左右滑动

左右滑动其实主要是JQ animate属性,我们看一下案例

<html>
<head>
<script type="text/javascript" src="http://blog.earnp.com/js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.slideLeftHide = function( speed, callback ) {
this.animate({
width : "hide",
paddingLeft : "hide",
paddingRight : "hide",
marginLeft : "hide",
marginRight : "hide"
}, speed, callback );
};
jQuery.fn.slideLeftShow = function( speed, callback ) {
this.animate({
width : "show",
paddingLeft : "show",
paddingRight : "show",
marginLeft : "show",
marginRight : "show"
}, speed, callback );
};
</script>
<script type="text/javascript">
$(function() {
$(".title_bar").slideLeftHide(4000);
$(".title_bar").slideLeftShow(4000);
});
</script>
</head>
<body>
<div class="title_bar">
<img src="http://blog.earnp.com/upload/201608070904286682.jpg" border="0"
 />
</div>
</body>
</html>

是不是很简单呢?

转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/110
问题交流群 :562864481
0
打赏
发布时间 :2016-08-21 12:14:37
分享

0 个评论

    还没有评论,感觉来抢沙发吧!

要回复文章请先登录注册