码迷,mamicode.com
首页 > Web开发 > 详细

两个完整的jquery slide多方面滑动效果实例

时间:2017-09-04 13:28:31      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:this   UI   abs   callback   java   anim   meta   需要   title   

实例1,需要引用jquery-ui.js

<!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 src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery.fn.extend({  
      slideRightShow: function() {
        return this.each(function() {  
            $(this).show(slide, {direction: right}, 1000); 
        });  
      },  
      slideLeftHide: function() {  
        return this.each(function() {  
          $(this).hide(slide, {direction: left}, 1000);  
        });  
      },  
      slideRightHide: function() {  
        return this.each(function() {  
          $(this).hide(slide, {direction: right}, 1000);  
        });  
      },  
      slideLeftShow: function() {  
        return this.each(function() {  
          $(this).show(slide, {direction: left}, 1000);  
        });  
      }  
    });
    
    $(function(){
        $("body").on("click","a#show",function(){    
            $("#test").slideRightShow();
        });
        $("body").on("click","a#hide",function(){    
            $("#test").slideRightHide();
        });
    });
</script>
</head>

<body>
<div id="test" style="position:absolute;">asdfasdf</div>
<br />
<a href="javascript:void(0)" id="show">显示</a>
<a href="javascript:void(0)" id="hide">隐藏</a>
</body>
</html>

实例二:

<html>  
<head>  
<script type="text/javascript" src="jquery-1.8.2.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">  
    asdfasfasdfas    
    </div>  
</body>  
</html>  

 

两个完整的jquery slide多方面滑动效果实例

标签:this   UI   abs   callback   java   anim   meta   需要   title   

原文地址:http://www.cnblogs.com/superfeeling/p/7472726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!