23-jqueryUi插件 示例：滑块滚动、自定义滚动条

jQueryUi插件

jQueryUi是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUi网址：
http://jqueryui.com 下载jquery-ui.min.js

 

    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function(){
　　　　　　　//draggable()拖拽函数，这样这个盒子就可以随意拖动了，具体效果可配合各种参数
            $('.box').draggable();
        })
    </script>
</head>
<style>
    .box{
        width:200px;
        height:200px;
        background-color:gold;
    }
</style>
<body>
    <div class="box"></div>

 

 

拖动滑块显示数字例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding:0;
            margin:0;
            list-style: none;}

        .con{
            width: 816px;
            height: 20px;
        
            margin:50px auto;
    
        }

        .sec{
            width: 780px;
            height:20px;
            float: left;
            border:1px solid #000;
            position: relative;


        }
        .slide{
            width: 80px;
            height:20px;
            background-color: gold;
            position: absolute;
            left:0;
            top:0;
    
        }

        .pro{
            width: 0px;
            height:20px;
            background-color: grey;
    
        }

        .num{
            width: 20px;
            height: 19px;
            float: left;
            outline: none;
            margin-left:5px;
            text-align: center;

        }




    </style>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function(){
            //jqueryUi插件的draggable()拖拽函数，参数以字典传入
            $(".slide").draggable({
                //限制在x轴拖拽
                axis:"x",
                //限制在父级范围内拖拽
                containment:'parent',

                //拖动时拖动元素的透明度
                opacity:0.6,

                drag:function(ev,ui){
                    var number = ui.position.left
                    $('.num').val(parseInt(number/7))
                    //定位一个div到滑块左边，背景色为灰色，宽度为动态的，这样拖过滑块的左边就有背景色
                    $(".pro").css({width:number})
                    

                }
            })

        })
    </script>
</head>
<body>
    <div class="con">

        <div class="sec">
            <div class="pro"></div>
            <div class="slide"></div>
        </div>
        <input type="text" class="num">

        
    </div>
</body>

 

 

自定义滚动条：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;
            padding:0;
            list-style:none;}
        .con{
            width: 300px;
            height: 400px;
            border:1px solid #000;
            margin:200px auto -0;

        }
        .con ul li{
            float: left
        }

        .con .content{
            width: 286px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }
        .content p{
            position: absolute;
            
            }

        .con .scroll{
            width: 14px;
            height:400px;

        }

        .con .scroll .scr{
            width: 14px;
            height: 60px;
            background-color:#666;
            display: block;

        }


    </style>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function(){

            h = $('.content p').outerHeight()
            hide = h-400

            alert(h)
            $('.scr').draggable({
                containment:'parent',

                drag:function(ev,ui){
                    var top1 = ui.position.top
                    $('.content p').top = top1
                    var aa = top1/290*hide
                    $('#wo p').css({top:-aa})
                }
            })
        })
    </script>
</head>
<body>
    <div class="con">
        <ul>
            <li class="content" id="wo">
                <p>“Web 2.0”的概念开始于一个会议中，展开于O’Reilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O’Reilly公司副 总裁的戴尔·多尔蒂(Dale Dougherty)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更 重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web 2.0”的行动有了意义？我们都认同这种观点，Web 2.0会议由此诞生。
在那个会议之后的一年半的时间里，“Web 2.0”一词已经深入人心，从Google上可以搜索到950万以上的链接。但是，至今关于Web 2.0的含义仍存在极大的分歧，一些人将Web 2.0贬低为毫无疑义的一个行销炒作口号，而其他一些人则将之理解为一种新的传统理念。
“Web 2.0”的概念开始于一个会议中，展开于O’Reilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O’Reilly公司副 总裁的戴尔·多尔蒂(Dale Dougherty)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更 重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web 2.0”的行动有了意义？我们都认同这种观点，Web 2.0会议由此诞生。
在那个会议之后的一年半的时间里，“Web 2.0”一词已经深入人心，从Google上可以搜索到950万以上的链接。但是，至今关于Web 2.0的含义仍存在极大的分歧，一些人将Web 2.0贬低为毫无疑义的一个行销炒作口号，而其他一些人则将之理解为一种新的传统理念。</p>
            </li>


            <li class="scroll">
                <span class="scr"></span>
            </li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2019-04-08 15:46  greenfan  阅读(552)  评论(0)    收藏  举报