通過鼠標(biāo)控制滑塊，在藍(lán)色條形上顯示數(shù)字，這樣的效果如何達(dá)成？本文作者示范了如何用Axure制作輸入數(shù)值控制滑塊的效果，希望對(duì)你有幫助。

本次分享的的案例是Axure8.0制作的輸入數(shù)值控制滑塊，其效果為鼠標(biāo)移動(dòng)到藍(lán)色條形時(shí)，顯示滑動(dòng)數(shù)值，其步進(jìn)器默認(rèn)值為滑動(dòng)數(shù)值；當(dāng)拖動(dòng)橢圓滑塊時(shí)，滑動(dòng)數(shù)值以及步進(jìn)器數(shù)值相應(yīng)變化；當(dāng)步進(jìn)器的值變化時(shí)，滑動(dòng)數(shù)值以及滑塊做相應(yīng)的變化。

預(yù)覽及下載地址：https://5gx595.axshare.com

一、制作原型

1、拖入一個(gè)動(dòng)態(tài)面板點(diǎn)擊進(jìn)入，拖入一個(gè)矩形命名為：b，設(shè)置其寬度：600px，高度：4px，顏色設(shè)置為：#E4E4E4；在矩形b上拖入一個(gè)矩形命,設(shè)置其寬度：450px，高度：4px，設(shè)置顏色為：#0000FF；在矩形上拖入一個(gè)動(dòng)態(tài)面板命名為:a，點(diǎn)擊進(jìn)入拖入一個(gè)橢圓形,設(shè)置其寬度為:18px，高度:18px，顏色為：#0000FF，如圖：

2、拖入一個(gè)矩形元件命名為：滑動(dòng)數(shù)值，設(shè)置默人文字為：75，設(shè)置寬度：30px，高度：25px，顏色設(shè)置為：#000000；拖入一個(gè)矩形其形狀設(shè)置為三角形，放置在滑動(dòng)數(shù)值矩形下方，設(shè)置顏色為：#000000,滑動(dòng)數(shù)值矩形和三角形組合命名為：1，設(shè)置為隱藏狀態(tài)，如圖：

3、制作步進(jìn)器，拖入一個(gè)矩形，其上放置“減號(hào)”圖片并組合一起命名為：減；拖入另一個(gè)矩形框，其上放置“加號(hào)”圖片并組合一起命名為：加；在兩個(gè)組合之間加入文本框，默認(rèn)值為：75，如圖：

最終設(shè)計(jì)如圖：

二、交互設(shè)置

1、對(duì)動(dòng)態(tài)面板a(橢圓滑塊)進(jìn)行交互設(shè)置

(1）鼠標(biāo)移入時(shí)

鼠標(biāo)移入時(shí)顯示組合”1″，并對(duì)橢圓形大小進(jìn)行尺寸設(shè)置，如圖：

（2）鼠標(biāo)移出時(shí)

鼠標(biāo)移出時(shí)判斷藍(lán)色矩形狀態(tài)為：false，隱藏組合”1″并設(shè)置橢圓形大小為原來尺寸，如圖：

（3）移動(dòng)時(shí)

鼠標(biāo)移動(dòng)時(shí)設(shè)置組合”1″的移動(dòng)狀態(tài)為：跟隨，如圖：

（4）拖動(dòng)時(shí)

鼠標(biāo)拖動(dòng)時(shí)，顯示組合”1″，如圖：

設(shè)置”滑動(dòng)數(shù)值”矩形文字，如圖：

設(shè)置文本框文字，如圖：

設(shè)置藍(lán)色矩形狀態(tài)為“true，如圖：

設(shè)置藍(lán)色矩形尺寸，如圖：

對(duì)動(dòng)態(tài)面板”a”移動(dòng)設(shè)置，如圖：

4）拖動(dòng)結(jié)束時(shí)

鼠標(biāo)拖動(dòng)結(jié)束時(shí)，隱藏組合”1″，設(shè)置藍(lán)色矩形狀態(tài)為：false,設(shè)置橢圓形尺寸為原來尺寸，如圖：

2、對(duì)步進(jìn)器進(jìn)行設(shè)置

(1)對(duì)組合“減”進(jìn)行“鼠標(biāo)點(diǎn)擊時(shí)”設(shè)置

判斷文本框的文字是否大于0，如果大于0，設(shè)置文本框文字，如圖：

如果文本框的文字是否小于0，設(shè)置藍(lán)色矩形尺寸，如圖：

對(duì)動(dòng)態(tài)面板”a”進(jìn)行移動(dòng)設(shè)置，如圖：

對(duì)”滑動(dòng)數(shù)值”矩形進(jìn)行文字設(shè)置，如圖：

(2)對(duì)組合“加”進(jìn)行“鼠標(biāo)點(diǎn)擊時(shí)”設(shè)置

設(shè)置文本框文字，如圖：

設(shè)置藍(lán)色矩形尺寸，如圖：

對(duì)動(dòng)態(tài)面板”a”移動(dòng)設(shè)置，如圖：

設(shè)置”滑動(dòng)數(shù)值”矩形文字，如圖：

所有設(shè)置完畢。