jQuery 趣味十足的 iPhone 桌布預覽

jQuery 趣味十足的 iPhone 桌布預覽

jQuery 趣味十足的 iPhone 桌布預覽
透過 Materialize Framework,可在 iPhone 圖示上顯示桌布套用效果,並能透過點擊或滑動來切換圖像。
按這裡下載我們提供的 demo.html 自行編輯修改內容及 js / css 與圖片路徑。
2.6 MiB / RAR
修改圖片檔名及其路徑
<div class="carousel">
<div class="carousel-item"><img src="x1.jpg"></div>
<div class="carousel-item"><img src="x2.jpg"></div>
<div class="carousel-item"><img src="x3.jpg"></div>
<div class="carousel-item"><img src="x4.jpg"></div>
<div class="carousel-item"><img src="x5.jpg"></div>
<img src="iphoneX.png" class="mobile"></div>
修改 style.css。可任意重寫或修改 CSS 代碼來創建自訂樣式
.carousel
{
    position: relative;
    height: 600px;
    margin-top: 150px;
    perspective: 1500px;
}
.carousel .carousel-item
{
    width: 250px;
}
.carousel .carousel-item img
{
    height: 300px;
    max-width: 170px;
    transform: translateX(15px) translateY(-90px);
}
.mobile
{
    width: 257px;
    height: 349px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000,
}
06-05-2020
若圖片無法顯示或檔案無法下載,請至文章底下留言區通知,將會盡速更正。
易思生活採用 授權。圖文請勿複製轉貼,歡迎使用「分享」功能並註明出處。

你可能會喜歡的

跟隨滑鼠移動讓圖片改變角度

跟隨滑鼠移動讓圖片改變角度

使用 jQuery 拆分垂直商品展示

使用 jQuery 拆分垂直商品展示

jQuery 滑鼠移過出現懸浮式文字提示

jQuery 滑鼠移過出現懸浮式文字提示

簡約的 jQuery 音頻播放插件

簡約的 jQuery 音頻播放插件

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。