jQuery 水平拖动效果的实例代码__width_drag_height_px_drag_ul_

当前位置: 编程技术>jquery

jQuery 水平拖动效果的实例代码

来源: 互联网发布时间：2014-09-03

本文导语: 一、HTML 部分代码示例: ...

一、HTML 部分

代码示例:

二、脚本部分
首先，引入jQuery。然后，引入一个jQuery UI 的组件，只需要其中的 ui.core.min.js 和 ui.slider.min.js 这两个。
在页面中依次引用以下脚本：

代码示例:

$(document).ready(function() {

    var $contain = $(".drag_ul", $(".drag"));

    var $items = $("li", $(".drag .drag_ul"));

    var $dragCont = $(".drag_cont", $(".drag"));

    var $button = $(".drag_cont_btn", $(".drag"));

    var width = ($items.length * parseInt($items.outerWidth(true)));

    $contain.css("width", width);

    var sliderOpts = {

        max: width - parseInt($dragCont.css("width")),

        slide: function(e, ui) {

            $contain.css("left", "-" + ui.value + "px")

        }

    };

    $button.slider(sliderOpts);

});

三、样式部分

代码示例:

img{border:0 none;}

ul{margin:0;}

.drag{width:341px;}

.drag .drag_cont{width:323px;height:80px;position:relative;overflow:hidden;margin:10px 9px;}

.drag ul.drag_ul{height:80px;position:absolute;padding:0;}

.drag ul.drag_ul li{width:100px;height:80px;display:inline;float:left;margin:0 1px;padding:0;background:none;}

.drag ul.drag_ul li a img{width:100px;height:80px;display:block;}

.drag .drag_cont_btn{height:5px;position:relative;border:1px solid #C8C8C8;margin:0 10px 10px;}

.ui-slider .ui-slider-handle{width:20px;height:20px;cursor:pointer;overflow:hidden;background:url(/blog_article/images/drag_btn.gif) no-repeat;position:absolute;top:-8px;margin-left:-10px;}