本次分享的的案例是Axure8.0制作的輸入數(shù)值控制滑塊，其效果為鼠標(biāo)移動到藍(lán)色條形時，顯示滑動數(shù)值，其步進(jìn)器默認(rèn)值為滑動數(shù)值；當(dāng)拖動橢圓滑塊時，滑動數(shù)值以及步進(jìn)器數(shù)值相應(yīng)變化；當(dāng)步進(jìn)器的值變化時，滑動數(shù)值以及滑塊做相應(yīng)的變化。
預(yù)覽及下載地址：https://5gx595.axshare.com
1、拖入一個動態(tài)面板點(diǎn)擊進(jìn)入，拖入一個矩形命名為：b，設(shè)置其寬度：600px，高度：4px，顏色設(shè)置為：#E4E4E4；在矩形b上拖入一個矩形命,設(shè)置其寬度：450px，高度：4px，設(shè)置顏色為：#0000FF；在矩形上拖入一個動態(tài)面板命名為:a，點(diǎn)擊進(jìn)入拖入一個橢圓形,設(shè)置其寬度為:18px，高度:18px，顏色為：#0000FF，如圖：
2、拖入一個矩形元件命名為：滑動數(shù)值，設(shè)置默人文字為：75，設(shè)置寬度：30px，高度：25px，顏色設(shè)置為：#000000；拖入一個矩形其形狀設(shè)置為三角形，放置在滑動數(shù)值矩形下方，設(shè)置顏色為：#000000,滑動數(shù)值矩形和三角形組合命名為：1，設(shè)置為隱藏狀態(tài)，如圖：
3、制作步進(jìn)器，拖入一個矩形，其上放置“減號”圖片并組合一起命名為：減；拖入另一個矩形框，其上放置“加號”圖片并組合一起命名為：加；在兩個組合之間加入文本框，默認(rèn)值為：75，如圖：
最終設(shè)計(jì)如圖：
1、對動態(tài)面板a(橢圓滑塊)進(jìn)行交互設(shè)置
(1）鼠標(biāo)移入時
鼠標(biāo)移入時顯示組合”1″，并對橢圓形大小進(jìn)行尺寸設(shè)置，如圖：
（2）鼠標(biāo)移出時
鼠標(biāo)移出時判斷藍(lán)色矩形狀態(tài)為：false，隱藏組合”1″并設(shè)置橢圓形大小為原來尺寸，如圖：
（3）移動時
鼠標(biāo)移動時設(shè)置組合”1″的移動狀態(tài)為：跟隨，如圖：
（4）拖動時
鼠標(biāo)拖動時，顯示組合”1″，如圖：
設(shè)置”滑動數(shù)值”矩形文字，如圖：
設(shè)置文本框文字，如圖：
設(shè)置藍(lán)色矩形狀態(tài)為“true，如圖：
設(shè)置藍(lán)色矩形尺寸，如圖：
對動態(tài)面板”a”移動設(shè)置，如圖：
4）拖動結(jié)束時
鼠標(biāo)拖動結(jié)束時，隱藏組合”1″，設(shè)置藍(lán)色矩形狀態(tài)為：false,設(shè)置橢圓形尺寸為原來尺寸，如圖：
2、對步進(jìn)器進(jìn)行設(shè)置
(1)對組合“減”進(jìn)行“鼠標(biāo)點(diǎn)擊時”設(shè)置
判斷文本框的文字是否大于0，如果大于0，設(shè)置文本框文字，如圖：
如果文本框的文字是否小于0，設(shè)置藍(lán)色矩形尺寸，如圖：
對動態(tài)面板”a”進(jìn)行移動設(shè)置，如圖：
對”滑動數(shù)值”矩形進(jìn)行文字設(shè)置，如圖：
(2)對組合“加”進(jìn)行“鼠標(biāo)點(diǎn)擊時”設(shè)置
設(shè)置文本框文字，如圖：
設(shè)置藍(lán)色矩形尺寸，如圖：
對動態(tài)面板”a”移動設(shè)置，如圖：
設(shè)置”滑動數(shù)值”矩形文字，如圖：
所有設(shè)置完畢。
聯(lián)系客服
