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

Posted superfeeling

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两个完整的jquery slide多方面滑动效果实例相关的知识，希望对你有一定的参考价值。

实例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多方面滑动效果实例的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript jQuery 入门回顾 2

12 Jquery UI Slide 滑动条插件

ionic2 使用slides制作滑动效果的类型选择栏

jquery iscroll 怎么判断滑动方向

将指针从一个点拖动到另一个点时，jQuery UI Slider 没有给出“滑动”效果

jquery滑动侧边栏从左到右