如果您是免费赠品猎人，那么您可能已经下载了许多PSD 用户界面 （UI）。 其中一些确实很棒，可以通过原型设计来节省我们的时间。

在本文中，我们将对PSD UI进行编码，并将其转变为更具功能性的东西。 我们将编写以下PSD UI Slider的代码，以用作jQuery UI Slider主题。

但是， 请注意 ，本教程是针对中级经验的。 话虽如此，只要您对CSS和jQuery相当熟悉，它仍然相对容易理解。

好吧，现在开始吧。

步骤1：jQuery UI

显然，我们需要jQuery和jQuery UI Library ，我们有两个选择来利用它们。 首先，我们可以直接从以下CDN链接jQuery和jQuery UI： Google Ajax API CDN ， Microsoft CDN和jQuery CDN ，当我们将网站置于在线状态时，使用托管CDN文件有很多优点。

但是，由于我们只能离线进行处理，因此我们将使用第二种方法。

我们将从官方下载页面下载并定制jQuery UI库。 因为我们只需要Slider插件 ，所以我们将只选择Slider库及其依赖项，并保留其他库。 这样，我们使用的文件将更苗条并且可以更快地加载。 之后，将所有这些库链接到HTML文档，确切地说，最好是在页面底部或在</body>标记之前。

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>

步骤2：HTML标记

滑块的标记非常简单，我们将所有必要的标记（工具提示，滑块和音量）包装在HTML5 section标签中。 然后，jQuery UI将自动生成其余部分。

<section> <span class="tooltip"></span> <div id="slider"></div><span class="volume"></span>
</section>

步骤3：安装Slider UI

以下代码段将在页面上安装Slider，但仅适用于默认配置。

$(function() {$( "#slider" ).slider();
});

因此，这里我们将通过添加其他配置来稍微增强滑块。

首先，我们将滑块元素存储为变量。

var slider = $('#slider'),

然后，将滑块首次加载时的最小默认默认值设置为35左右。

slider.slider({range: "min",value: 35,
});

至此，我们在浏览器上什么都看不到，因为jQuery UI 基本上只生成标记 。 因此，我们需要应用一些样式来开始在浏览器上直观地看到结果。

步骤4：样式

在继续之前，我们需要PSD源文件中的一些资源，例如背景纹理和图标。

我们不会在本文中讨论如何切片 ，我们只关注代码。 如果不确定如何切片，请先观看以下截屏视频，然后再继续。

• 将设计从PSD转换为HTML – Nettuts +

好吧，现在让我们开始添加样式。

我们将从将滑块放在浏览器窗口的中心开始，并将从PSD切出的背景附加到body 。

body {background: url('../images/bg.jpg') repeat top left;
}
section {width: 150px;height: auto;margin: 100px auto 0;position: relative;
}

接下来，我们将为工具提示 ， 音量 ， 手柄 ，滑块范围和滑块本身应用样式。

从……开始，我们将逐步进行此工作。

滑杆

由于我们没有为Slider本身定义最大值，因此jQuery UI将应用默认值。 那是100 。 因此，我们还可以将100 （px）用作滑块的width 。

#slider{border-width: 1px;border-style: solid;border-color: #333 #333 #777 #333;border-radius: 25px;width: 100px;position: absolute;height: 13px;background-color: #8e8d8d;background: url('../images/bg-track.png') repeat top left;box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5);left: 20px;
}

工具提示

通过绝对指定其位置 （ -25px为-25px ，将使工具提示位于滑块上方 。

.tooltip {position: absolute;display: block;top: -25px;width: 35px;height: 20px;color: #fff;text-align: center;font: 10pt Tahoma, Arial, sans-serif ;border-radius: 3px;border: 1px solid #333;box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);box-sizing: border-box;background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);
}

卷

我们对音量图标做了一些修改以符合我们的想法。 想法是，我们将创建一种效果，以根据滑块的值逐渐提高音量 。 我敢肯定，您经常在媒体播放器用户界面中看到这种效果。

.volume {display: inline-block;width: 25px;height: 25px;right: -5px;background: url('../images/volume.png') no-repeat 0 -50px;position: absolute;margin-top: -5px;
}

UI句柄

手柄的样式很简单。 它将有一个看起来像金属圆圈的图标，从PSD切出，并作为背景。

我们还将光标模式更改为pointer ，因此用户将注意到该元素是可拖动的。

.ui-slider-handle {position: absolute;z-index: 2;width: 25px;height: 25px;cursor: pointer;background: url('../images/handle.png') no-repeat 50% 50%;font-weight: bold;color: #1C94C4;outline: none;top: -7px;margin-left: -12px;
}

滑块范围

滑块范围将具有稍微白色的渐变颜色。

.ui-slider-range {background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);position: absolute;border: 0;top: 0;height: 100%;border-radius: 25px;
}

步骤5：效果

在这一步中，我们将开始处理Slider的特殊效果。

工具提示

此时，工具提示尚无内容，因此我们将用滑块的值填充它。 同样，工具提示的水平位置将与手柄的位置相对应。

首先，我们将工具提示元素存储为变量。

var tooltip = $('.tooltip');

然后，我们定义上面在幻灯片事件中提到的工具提示的效果。

slide: function(event, ui) {
var value = slider.slider('value'),
tooltip.css('left', value).text(ui.value);

但是，我们也希望最初隐藏工具提示。

tooltip.hide();

之后，当手柄即将开始滑动时，将显示带有淡入效果。

start: function(event,ui) {tooltip.fadeIn('fast');
},

并且，当用户停止滑动手柄时，工具提示将淡出并被隐藏。

stop: function(event,ui) {tooltip.fadeOut('fast');
},

卷

正如我们在“ 样式”部分中前面提到的，我们计划将音量图标更改为与手柄的位置相应地变化，或者确切地说， 与滑块的值相应地变化。 因此，我们将应用以下条件语句来创建此效果。

但是，首先，我们将音量元素以及滑块的值存储为变量。

volume = $('.volume');

然后我们开始条件语句。

当滑块的值小于或等于5时 ，音量图标将完全没有条形，表明音量非常低，但是当滑块的值增大时，音量条也会开始增大。

if(value <= 5) { volume.css('background-position', '0 0');
}
else if (value <= 25) {volume.css('background-position', '0 -25px');
}
else if (value <= 75) {volume.css('background-position', '0 -50px');
}
else {volume.css('background-position', '0 -75px');
};

放在一起

好吧，如果您对以上所有内容感到困惑，请不要。 这是捷径。 将以下所有代码放入文档中。

$(function() {var slider = $('#slider'),tooltip = $('.tooltip');tooltip.hide();slider.slider({range: "min",min: 1,value: 35,start: function(event,ui) {tooltip.fadeIn('fast');},slide: function(event, ui) {var value = slider.slider('value'),volume = $('.volume');tooltip.css('left', value).text(ui.value);if(value <= 5) { volume.css('background-position', '0 0');} else if (value <= 25) {volume.css('background-position', '0 -25px');} else if (value <= 75) {volume.css('background-position', '0 -50px');} else {volume.css('background-position', '0 -75px');};},stop: function(event,ui) {tooltip.fadeOut('fast');},});});

好吧，现在让我们在浏览器中查看结果。

• 演示版
• 下载源

结论

今天，我们已经成功创建了一个更加优雅的jQuery UI主题，但是与此同时，我们也已经成功地将PSD用户界面转换为功能性的音量控制器。

我们希望本教程对您有所启发，并可以帮助您了解如何将PSD变成更有用的产品。

最后，如果您对本教程有任何疑问，请随时在下面的评论部分中添加它。

翻译自: https://www.hongkiat.com/blog/jquery-volumn-slider/