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,
}