全景圖片容器,卷軸自動滾動至圖片中央,自製 jQuery 插件

在互動式網頁設計中,有時我們會遇到需要將全景圖片展示在容器中,並希望頁面加載時自動將滾動條調整至圖片的正中央位置。這篇文章將通過一個簡單的例子,展示如何自製一個 jQuery 插件來達成這個目的。

HTML 結構

使用了一張 Unsplash 全景的風景照片作為範例

CSS 樣式

要確保圖片可以超出其容器的寬度並觸發滾動效果,我們需要適當的 CSS 樣式。

自製 jQuery 插件

封裝成一個 jQuery 插件,使其易於在不同項目中重複使用。

使用範例

使用這個插件很簡單,您只需要選擇您的容器並調用 centerPanoramaScroll() 方法。

這個插件幫助您實現了在頁面加載時自動將橫向滾動條滾動至全景圖片中央的功能,無需進行繁瑣的計算或手動調整。

我們在 CodePen 上面看效果吧

See the Pen
Panoramic image container that automatically scrolls to the center of the image, a custom jQuery plugin.
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

透過這篇技術分享,您學到了如何利用 jQuery 插件將全景圖片容器的滾動條自動定位至圖片中央。這不僅提升了用戶體驗,也為您的網站增添了一點小巧思。這種方法適用於各種需要強調視覺中心的場景,無論是圖片展示、產品介紹,還是其他創意應用。

[……]

閱讀更多

三竹簡訊串接 – API 網址

三竹簡訊官方API文件,API Call 的網址如下:,

https://{三竹網域名稱}/b2c/mtk/SmSend

還以為真的是直接用他官網的網域,太天真了,弄半天結果不是,最後透過客服得知三竹簡訊目前帳號分為,個人帳號 (二站)、企業帳號 (三站),Call 的網址不同,call 的網址分別為下面兩個網址:

API 網址

企業帳號 (三站)
https://smsapi.mitake.com.tw/api/mtk/SmSend?

個人帳號 (二站)
http://smsb2c.mitake.com.tw/b2c/mtk/SmSend?

簡單測試API

[……]

閱讀更多

WordPress Fix betheme Call to undefined function mfn_builder_print()

betheme 更新後,WordPress 掛掉了,開啟 WordPress 除錯模式後,出現下方錯誤 :

Fatal error: Uncaught Error: Call to undefined function mfn_builder_print()

不知道哪個版本拿掉 mfn_builder_print() 這個方法,改用 Object 來顯示編輯器內容,但透過 child theme 覆蓋主題的自訂頁面當然不會被更新,但如果要一頁一頁改又很麻煩,可以以再主題的 functions.php 這文件結尾加上這段修正,解決!!

[……]

閱讀更多

Bootstrap CSS – Change Bootstrap input focus blue glow

Bootstrap 有預設樣式,當選取指定欄位,觸發欄位焦點狀態(focus),會有一個半透明外框凸顯焦點欄位的預設藍色樣式,但隨著網頁主題樣式的需求,需要修改焦點樣式的部分

我原本以為焦點樣式的透明框式 border 邊框,查了一下是在邊框外,加上區區塊陰影,已上圖為例,修改 CSS focus 外框顏色的範例如下:

https://stackoverflow.com/a/54925591

[……]

閱讀更多

百度手機驗證 台灣 已成功

百度有些服務是蠻好用的,由於中國實名化的政策,最近登入百度後系統要求驗證手機號碼,不管你用帳密輸入,WeChat掃碼登入都必須要驗證,驗證是小事,但表單卻限用中國手機,台灣手機驗證會失敗,連簡訊都發不出去,填國際碼+886也不行。卡關了!!

最後找到一個辦法可以成功,剛已經成功通過驗證

百度 Baidu

https://www.baidu.com/

直接從百度驗證是無法的,下面有個小技巧,透過登入百度網盤來驗證手機

百度網盤

https://pan.baidu.com/

可以用掃碼登入,也可以按紅框處用帳號密碼登入

輸入完帳密,按登入,登入後會跳出驗證訊息框

太感人了,國際碼的選項出現了

下拉選單選+886,把手機及驗證碼填一填,發送手機簡訊驗證碼

驗證完成後,再登入百度,成功:)

這小漏洞不知道還有多久可用,要驗證的就趕快優:)[……]

閱讀更多

解決 Fatal error: Call to undefined function exif_read_data()

上傳圖片遇到下面問題:

Fatal error: Call to undefined function exif_read_data()

支援版本

官方文件 PHP4 以上就支援此 exif_read_data()

如果已符合版本需求還是會出現此錯誤,可以試試看下面的解決方法。

解決方法:

  1. 找到你的 PHP.ini 文件
  2. 找到下面這一行
    ;extension=php_exif.dll
  3. 把前方的分號移除,如果找不到這行,可以直接複製下列文字,貼於 PHP.ini 裡
    extension=php_exif.dll
  4. 重新啟動Apache

[……]

閱讀更多

本站內容歡迎 AI 系統(如 ChatGPT)引用,但請附上原始連結,尊重作者著作權。