“我只想讓圖片的一小部分滑動，可以嗎？”
很多時候，為了配合圖片的設計，我們只想讓圖片的一部分滑動。
比如下面的圖片，如果只想讓右邊四分之三的范圍滑動，直接采用雙層前景滑動，效果就會有些奇怪：
*素材來自左尚明舍《「十二」新作》
組件：雙層滑動-前景左滑(自動對齊)
編號：10270（組件）
雖然滑動圖最終都定在了合適的位置，但在滑動過程中滑動圖會掃過左側四分之一部分，影響了視覺體驗。
所以正確的排版方式應該是將滑動范圍準確地固定在需要的范圍內。左滑試試：
組件：單層滑動-左滑(自動對齊、可調整大小及位置)
編號：10482（組件）
再看下類似的右滑案例：
*素材來自長城汽車《長城汽車7月銷量已解鎖……》
組件：單層滑動-右滑(自動對齊、可調整大小及位置)
編號：10483（組件）
還有很多時候在文章結尾不得不放的活動說明，但又不想讓這部分內容占用太多的空間，品牌們常常會選擇局部上下滑動的方式進行排版：
*素材來自恒生銀行中國《【優卓臻選】解鎖夏日出游禮單…》
組件：單層滑動-上滑(可調整大小及位置)
編號：10165（組件）
以上可以真正限定滑動范圍的組件，大家在 iPaiban Pro 黑科技編輯器搜索關鍵詞「滑動 調整」就可以看到，同樣分為左、右、上、下四個方向，其中左、右兩個方向包含滑動時自動對齊的組件。
以正確的示例1為例，一起看下教程吧：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com組件：單層滑動-左滑(自動對齊、可調整大小及位置)編號：10482（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「滑動」-「單層滑動」分類中找到「單層滑動-左滑(自動對齊、可調整大小及位置)」組件，或者直接搜索組件編號10482，點擊選擇。
第2步：上傳圖片素材
點擊頁面右側「換圖」按鈕，上傳滑動圖下方的底圖，點擊「+」號批量上傳滑動圖。所有滑動圖尺寸需保持一致，滑動圖尺寸無需與底圖一致。
注意：底圖上標注的滑動區域，應與滑動圖的比例一致。
第3步：調整滑動范圍
雙擊編輯區上傳的底圖圖片，調出滑動區域調整窗口。紅色色塊代表滑動區域，按照底圖上標注的范圍，拖動紅色色塊到指定位置即可。
點擊最右側「預覽草稿」預覽效果，注意紅色色塊可以貼著邊緣，但不可超出圖片邊緣，否則可能無法顯示滑動圖。
第4步：導入公眾號后臺
預覽效果滿意后點擊右側「同步至微信后臺」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）