如何使用jQuery和UI Slider控制文本属性

于 2020-08-05 03:11:27 发布
阅读量190 收藏
点赞数
文章标签： css html js less wxpython ViewUI
原文链接：https://www.script-tutorials.com/text-animation-jquery-ui-slider/
版权

jQuery UI Slider tutorial. Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website. So, playing with styles – users will be able to select preferred styles, and you will need just save these styles for him, or, you can use this as some zoon for your website, which will allow to change font size in realtime. Also we will using jQuery slider to manipulate with properties to make it more interactive.

jQuery UI Slider教程。 今天，我将告诉您如何使用jQuery对文本进行动画处理和控制。 我们将更改字体大小，字体系列和其他属性。 在哪里可以使用呢？ 例如，允许您的用户自定义网站中文本框的视图。 因此，使用样式-用户将能够选择首选样式，您只需要为他保存这些样式，或者您可以将其用作网站的一部分，这将允许实时更改字体大小。 另外，我们将使用jQuery滑块来操纵属性，以使其更具交互性。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

This is our HTML file with 4 different sliders to change styles:

这是我们HTML文件，带有4个不同的滑块来更改样式：

index.html (index.html)
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/main.js"></script>
<div class="examples">
    <h2>Text animation with jQuery and UI slider</h2>
    <div class="column">
        <p>
            <label for="font_size">Font size:</label>
            <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider1"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_family">Font family:</label>
            <input type="text" id="font_family" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider2"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_weight">Font weight:</label>
            <input type="text" id="font_weight" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider3"></div>
    </div>
    <div class="column">
        <p>
            <label for="text_align">Text align:</label>
            <input type="text" id="text_align" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider4"></div>
    </div>
    <div style="clear:both"></div>
    <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
    <div style="clear:both"></div>
</div>

<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/main.js"></script>
<div class="examples">
    <h2>Text animation with jQuery and UI slider</h2>
    <div class="column">
        <p>
            <label for="font_size">Font size:</label>
            <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider1"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_family">Font family:</label>
            <input type="text" id="font_family" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider2"></div>
    </div>
    <div class="column">
        <p>
            <label for="font_weight">Font weight:</label>
            <input type="text" id="font_weight" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider3"></div>
    </div>
    <div class="column">
        <p>
            <label for="text_align">Text align:</label>
            <input type="text" id="text_align" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider4"></div>
    </div>
    <div style="clear:both"></div>
    <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
    <div style="clear:both"></div>
</div>

步骤2. CSS (Step 2. CSS)

Here are all used CSS files:

以下是所有使用过CSS文件：

css / main.css (css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.column{float:left;width:45%;padding:20px}
.box{-moz-border-radius:5px;background-color:#DDD;border:1px solid #000;clear:both;width:50%;margin:10px auto;padding:10px}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.column{float:left;width:45%;padding:20px}
.box{-moz-border-radius:5px;background-color:#DDD;border:1px solid #000;clear:both;width:50%;margin:10px auto;padding:10px}
css / jquery.ui.slider.css，css / jquery.ui.theme.css (css/jquery.ui.slider.css, css/jquery.ui.theme.css)

Both these files belong to jQuery library, and no need to publish its code directly in our post, both files already available in package

这两个文件都属于jQuery库，并且不需要直接在我们的文章中发布其代码，这两个文件都已在软件包中提供

步骤3. JS (Step 3. JS)

js / main.js (js/main.js)
$(function() {
    $('#slider1').slider({
        value:12,
        min: 10,
        max: 20,
        step: 1,
        slide: function( event, ui ) {
            $('#font_size').val(ui.value + ' px');
            $('.box').css('font-size', ui.value);
        }
    });
    $('#font_size').val($('#slider1').slider('value') + ' px');
    var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia');
    $('#slider2').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontFamily = aFonts[ui.value];
            $('#font_family').val(sFontFamily);
            $('.box').css('font-family', sFontFamily);
        }
    });
    $('#font_family').val(aFonts[$('#slider2').slider('value')]);
    var aWeights = new Array('', 'normal', 'bold', 'bolder', 'lighter', 'inherit');
    $('#slider3').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontWeight = aWeights[ui.value];
            $('#font_weight').val(sFontWeight);
            $('.box').css('font-weight', sFontWeight);
        }
    });
    $('#font_weight').val(aWeights[$('#slider3').slider('value')]);
    var aAligns = new Array('', 'left', 'right', 'center', 'justify');
    $('#slider4').slider({
        value:1,
        min: 1,
        max: 4,
        step: 1,
        slide: function(event, ui) {
            var sTextAlign = aAligns[ui.value];
            $('#text_align').val(sTextAlign);
            $('.box').css('text-align', sTextAlign);
        }
    });
    $('#text_align').val(aAligns[$('#slider4').slider('value')]);
});

$(function() {
    $('#slider1').slider({
        value:12,
        min: 10,
        max: 20,
        step: 1,
        slide: function( event, ui ) {
            $('#font_size').val(ui.value + ' px');
            $('.box').css('font-size', ui.value);
        }
    });
    $('#font_size').val($('#slider1').slider('value') + ' px');
    var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia');
    $('#slider2').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontFamily = aFonts[ui.value];
            $('#font_family').val(sFontFamily);
            $('.box').css('font-family', sFontFamily);
        }
    });
    $('#font_family').val(aFonts[$('#slider2').slider('value')]);
    var aWeights = new Array('', 'normal', 'bold', 'bolder', 'lighter', 'inherit');
    $('#slider3').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontWeight = aWeights[ui.value];
            $('#font_weight').val(sFontWeight);
            $('.box').css('font-weight', sFontWeight);
        }
    });
    $('#font_weight').val(aWeights[$('#slider3').slider('value')]);
    var aAligns = new Array('', 'left', 'right', 'center', 'justify');
    $('#slider4').slider({
        value:1,
        min: 1,
        max: 4,
        step: 1,
        slide: function(event, ui) {
            var sTextAlign = aAligns[ui.value];
            $('#text_align').val(sTextAlign);
            $('.box').css('text-align', sTextAlign);
        }
    });
    $('#text_align').val(aAligns[$('#slider4').slider('value')]);
});

Here are you can see initializations of 4 UI sliders. For changing font size, font family, bold style and text align for text of our text box. Hope this is very easy to understand how to use it.

您可以在此处看到4个UI滑块的初始化。 对于更改字体大小，字体系列，粗体样式和文本要与文本框的文本对齐。 希望这是很容易理解的用法。

js / jquery.min.js，js / jquery.ui.core.js，js / jquery.ui.mouse.js，js / jquery.ui.slider.js，js / jquery.ui.widget.js (js/jquery.min.js, js/jquery.ui.core.js, js/jquery.ui.mouse.js, js/jquery.ui.slider.js, js/jquery.ui.widget.js)

All this – just jQuery libraries, its necessary for our UI slider. All these libraries available in package.

所有这些–只是jQuery库，这对于我们的UI滑块是必需的。 所有这些库均在软件包中提供。

现场演示

结论 (Conclusion)

I hope that today’s article will very useful for your projects. Good luck!

我希望今天的文章对您的项目非常有用。 祝好运！

翻译自: https://www.script-tutorials.com/text-animation-jquery-ui-slider/

cuketao5066
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
slider:滑块jquery-ui，用于选择文本和背景色
04-25
滑块jquery-ui，用于选择文本和背景色 使用过的jquery和jquery-ui库 实现了用于选择文本和背景色的滑块 通过切换在文本和背景的设置之间进行切换，更改将立即应用 示范： 您可以看到该项目： : 二手技术： jQuery查询 jQuery的用户界面
jQuery UI 实例 - 滑块（Slider）
最新发布
unber的博客
04-11 866
拖动手柄来选择一个数值。如需了解更多有关 slider 部件的细节，请查看 API 文档。
一个关于jQuery UI里的slider的问题
Vincent's Tech Blog
04-07 1609
这个控件的网页在jQuery UI的官网：http://jqueryui.com/demos/slider/#range 可以找到。 在我最近正在阅读的《jQuery in Action》里，第十一章内有一个小节是用来介绍这个控件的，其中作者还提供了一个非常有用的实验程序： 这个程序运行良好，它的jQuery的版本是1.4，UI的版本是1.8。
jquery-ui.rar
06-29
在使用 jQuery UI 时，开发者通常需要引入 jQuery 库，然后引入 jQuery UI 的 JS 和 CSS 文件。例如： ```html <script src="https://code.jquery.com/jquery.js"></script> <script src="path/to/jquery-ui.js"> ...
jQuery UI 1.12.1开源插件
04-09
jQuery UI 是一个强大的前端开发工具集，它基于广泛使用的JavaScript库jQuery，为开发者提供了丰富的用户界面组件和交互效果。这个开源项目版本为1.12.1，是jQuery UI系列中的一个重要里程碑，尤其对那些依赖jQuery ...
jquery-ui-1.12.1
12-06
在实际项目中，使用jQuery UI 1.12.1可以显著提升开发效率，因为它提供了预封装的组件和方法，避免了从头编写大量的JavaScript代码。同时，这些组件经过优化，性能良好，对于大型应用也能保持良好的响应速度。 总之...
jquery-ui.zip_javascript-ui
09-19
4. **文档**：可能有详细的API文档，帮助开发者了解每个方法和属性的用法。 5. **本地化文件**：对于国际化的网站，可能会有不同语言版本的文本资源。 6. **源码**：对于开发者来说，源码可以帮助理解内部工作原理，...
jQueryUI-滑动条效果（slider方法）
飞翔的仙女杀手的博客
05-23 2290
你需要在body中写下如下代码 <span id="span">0</span> <div id="slider"></div> 你需要在js文件中写下如下代码 var valueSpan,slider; $(document).ready(function(){ slider=$("#slider"); valueSpan=$...
JQuery-UI实现slider滑块带刻度
12-15
JQuery-UI实现slider滑块带刻度，大多用于时间刻度等等，可以自己设置步长step，设置最大最小值max,min;划杆的默认值为value，这些都可以在网上查找得到相应的属性设置。
jQuery区域范围滑块插件(noUiSlider) v3.2.1.rar
07-09
noUiSlider是款基于jQuery框架编写的区域范围滑块插件，可应用于web前端开发。此插件支持IE7、8等古老的浏览器。最火软件还为您提供了在线演示，点此查看。
Jquery时间滑块TimeSlider增强显示（精简优化，有刻度，有调用方法）
10-12
Jquery时间滑块TimeSlider增强显示。 有刻度，可用CSS设置长短，可以隐藏中间部分刻度的标签。 调用方法： $("#timeBarSlider") .slider({ min: 0, max: 1440, range: false, value: 0, slide: function (event, ui) { //滑动过程中显示实时的值（时间） $("#days").val(intToTimeStr(ui.value)); } }) .slider("pips", { rest: "label" }) .slider("float"); $("#timeBarSlider").on("slidechange", function (e, ui) { //滑动/点击标签结束后的值（时间） $("#days").val("结果：" + intToTimeStr(ui.value)); //alert("结果：" + intToTimeStr(ui.value)); }); function setValue() { //设定值 $("#timeBarSlider").slider('option', 'value', 720); ; } //数字（分钟）转时间格式（时:分）的字符串 function intToTimeStr(num) { var myhour = Math.floor(num / 60); var myMinute = num % 60; if (myhour < 10) { myhour = "0" + myhour; } if (myMinute < 10) { myMinute = "0" + myMinute; } return myhour + ":" + myMinute; }
jquery slider_使用jQuery UI Slider创建音量控制器
cune1359的博客
07-04 548
如果您是免费赠品猎人，那么您可能已经下载了许多PSD 用户界面 （UI）。 其中一些确实很棒，可以通过对我们正在设计的原型进行原型制作来节省我们的时间。 在本文中，我们将对PSD UI进行编码，并将其转变为更具功能性的东西。 我们将编写以下PSD UI Slider的代码，以用作jQuery UI Slider主题。 但是， 请注意 ，本教程是针对中级经验的。 话虽如此，只要您对CSS...
JQ滚动插件
流年似水
05-10 1495
JQ-Slide插件参数说明表<br />参数名参数值(默认值可以省略) effectscroolY（默认）：垂直滚动 scroolX：水平滚动scroolTxt：文本垂直滚动fade：淡出scroolLoop：水平左右点击滚动autoPlaytrue（默认）： or false speed动画速度时间，默认”normal”，可以使用毫秒或者JQ中的fast，slow，normal timer滚动间隔时间，默认”1000，可以使用毫秒或者JQ中的fast，slow，normal claNavJQ-slide
jQuery特效-slide
专注
01-09 2294
备注：方法的参数类型，见 jQuery特效-方法参数类型 .slideUp() 通过滑动的动作隐藏匹配元素 .slideUp( [duration ] [, complete ] ) .slideUp( options ) .slideUp( [duration ] [, easing ] [, complete ] ) .slideUp()方法变化匹配元素的高度。
jquery ui slider那点事
u010869754的专栏
09-10 620
jquery ui slider那点事 由于需要一个声音插件，初次使用slider这个插件，作为一个第一次使用的人记录一下心得 ![这是slider效果图](http://img.blog.csdn.net/20150910113119949) 添加slider: (function() {(function() {
UISlider(滑块)控件的常用属性
lover0920的专栏
12-01 5165
UISlider控件的集成关系： UISlider:UIControl:UIView:UIResponder:NSObject 1、创建UISlider控件 2、设置UISlider控件的值、最大值和最小值 3、设置UISlider控件的事件 4、设置UISlider控件的外观样式 5、供子类重写的方法
jquery UI API-滑块部分（Slider widget）
奔跑的蜗牛蒋
09-21 1659
描述：拖动手柄来选择一个数值 jQuery UI滑块（Slider）插件允许通过滑块进行选择。有各种不同的选择，比如手柄和范围。手柄可通过鼠标和箭头进行移动。 ·参数（参数名 : 参数类型 : 默认名称）  animate : Boolean : false  设置是否在拖动滑块时执行动画效果。  初始：$(‘.selector’).slider({ animate: tru
jQuery UI官方参考书系列一：深入解析
4. **动画和效果**：使用jQuery UI的内置动画，如淡入淡出（Fade）、滑动（Slide）等，增强用户体验。 5. **可访问性**：确保组件遵循Web可访问性标准，使所有用户都能方便地使用。 6. **自定义组件**：学习如何扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值