中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作者分享了自己制作京東官網(wǎng)滾動界面原型的具體操作過程，希望大家可以從中受到些啟發(fā)。

先上京東官網(wǎng)原圖（也可以自己搜素京東官網(wǎng)查看）

先分析一下這個界面，幾張圖片的滾動，中心位置偏下一個滾動條，由幾個橢圓和一個圓角矩形構(gòu)成。

圖片滾動和橢圓顏色變化相對應(yīng)，點擊圖片鏈接至對應(yīng)活動網(wǎng)頁。

1、滾動界面動畫

我們先導(dǎo)入一張圖片到工作區(qū)，鼠標(biāo)右鍵選擇“轉(zhuǎn)化為創(chuàng)建動態(tài)面板”。

然后在頁面面板也就是右下角面板會有一個動態(tài)面板的分欄，鼠標(biāo)移動點擊時會出現(xiàn)一個加號，也就是添加狀態(tài)。

雙擊創(chuàng)建兩個新的狀態(tài)，在每個狀態(tài)下添加一張圖片，我這里就以3個狀態(tài)為例。

單擊動態(tài)面板在面板狀態(tài)找到交互分欄里面的“載入時”事件，雙擊添加。

會彈出一個設(shè)置窗口，在原件欄中找到“設(shè)置面板狀態(tài)”，雙擊添加參數(shù)設(shè)置如下：

點擊確定按F5預(yù)覽就會有一個簡單的滾動效果。

2、制作畫面中的3個白色橢圓與畫面綁定

點擊index（或者home）右下角頁面那里主要是為了不在動態(tài)面板中建立橢圓。

然后在原件庫找到橢圓形移動到工作欄調(diào)整合適的大小復(fù)制3個調(diào)整到合適的位置，順手設(shè)置下圓形的邊框改成無邊框。

接下來就是重點了，我先講一下原理。

我們要做的是讓切換畫面順序跟3個橢圓的切換對應(yīng)，對比京東官網(wǎng)可以看到切換到對應(yīng)的圖片，對應(yīng)的按鈕會變紅。

首先來制作按鈕變紅事件，點擊第一個按鈕右鍵選擇交互樣式。

在彈出的交互設(shè)置中選擇“選中”欄，勾選填充顏色選擇紅色

其他兩個橢圓的設(shè)置與第一個一致。

加下來就是讓第一張圖與橢圓1綁定，也就是說切換到第一張圖的同時橢圓1被選中變成紅色。

選中動態(tài)面板，在屬性中找到“狀態(tài)改變時”的事件，雙擊添加，在設(shè)置中選擇編輯條件選擇state1

點擊確定。

之后在元件動作分欄找到“選中“動作雙擊添加，參數(shù)設(shè)置如下：

橢圓1設(shè)置“true“是表示當(dāng)切換到圖片1時橢圓1被選中，前面我們已經(jīng)設(shè)置了橢圓被選中時變成紅色，所以這里橢圓1變成紅色。接下來就是一樣的設(shè)置，當(dāng)然了case2把state換成state2，橢圓1和3的值等于”false“橢圓2的值為”true“。橢圓3也是一樣的道理我就不上圖了。

最難的部分已經(jīng)結(jié)束了下面來制作鼠標(biāo)移入圖片時停止?jié)L動的動作。

還是點擊動態(tài)面板，在屬性欄找到“鼠標(biāo)移入時”事件雙擊添加事件在彈出的設(shè)置框添加動作“設(shè)置面板狀態(tài)”在選擇狀態(tài)中下拉選擇停止循環(huán)。

然后就是鼠標(biāo)移出時圖片繼續(xù)滾動的事件，一樣的找到“鼠標(biāo)移出時”的事件（動態(tài)面板上添加）雙擊添加，參數(shù)與之前設(shè)置的滾動參數(shù)一致。

如果你按F5預(yù)覽下畫面可以看到我們已經(jīng)很接近成品了。

接下來，我們要讓鼠標(biāo)移入橢圓1時畫面切換到圖片1。

這個事件應(yīng)該添加在橢圓1上，單擊橢圓1，在屬性中找到“鼠標(biāo)移入時”事件雙擊添加，在彈出的設(shè)置窗口選擇“設(shè)置面板狀態(tài)”，選擇狀態(tài)選擇“state1”。

因為鼠標(biāo)移入時畫面停止?jié)L動所以只需要選擇state1（也就是圖片1）即可。同樣的橢圓2，橢圓3對應(yīng)添加事件，選擇狀態(tài)為state2，state3即可。

3、為圖片設(shè)置超鏈接

雙擊圖片1在屬性中找到“鼠標(biāo)單擊時”事件，雙擊添加，選擇“鏈接”分欄找到“當(dāng)前窗口”單擊添加，設(shè)置如下：

在超鏈接中輸入你想轉(zhuǎn)到的網(wǎng)址，圖片2、3操作與1一致，只是網(wǎng)址不同罷了。

最后就是添加一個圓角矩形在3個橢圓的下面作為底色，調(diào)整透明度以及圓角。個人認為加了這個圓角矩形之后感覺順暢多了，下面是成品圖，個人第一次寫教程不喜輕噴。

附：源文件百度云鏈接：http://pan.baidu.com/s/1gfIeyzD 密碼：o2o4

本文由 @紅匏白臉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。