日本免费一区二区三区视频观看,2020年最新能看的黄色网站,无码专区

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網頁制作

HTML5 CSS3實現(xiàn)一個精美VCD包裝盒個性幻燈片案例

來源：易賢網閱讀：906 次日期：2014-11-20 15:30:04

溫馨提示：易賢網小編為您整理了“HTML5 CSS3實現(xiàn)一個精美VCD包裝盒個性幻燈片案例”,方便廣大網友查閱！

先看下html：

代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"">

<html>

<head>

$(function ()

{

vcd.init();

vcd.autoPlay();

});

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

可以看到div#vcd是最外層容器，給它設置了一個背景；ul li 分別設置圖片元素；i#cd設置背景為光盤，然后設置顯示位置；div#indexBar中顯示圖片的索引，供點擊。

CSS：

代碼如下:

#vcd, #vcd ul, #vcd #wrapPager

{

width: 200px;

height: 272px;

}

#vcd, #vcd ul, #vcd #wrapPager, #cd

{

background: url("images/disk.png") no-repeat 0 0;

}

#vcd

{

position: relative;

margin: 20px auto 0;

}

#vcd ul, #vcd #wrapPager, #cd

{

position: absolute;

}

#vcd ul

{

background-position: -263px 3px;

}

#vcd ul li, #vcd ul li a, #vcd ul li a img

{

display: block;

width: 178px;

height: 264px;

overflow: hidden;

}

#vcd ul li

{

top: 5px;

left: 2px;

opacity: 0;

/*visibility: hidden;*/

-webkit-transition: opacity linear .6s;

/*-webkit-transition: visibility linear .6s;*/

-moz-transition: opacity linear .6s;

-ms-transition: opacity linear .6s;

transition: opacity linear .6s;

position: absolute;

}

#vcd ul li.active

{

opacity: 1;

/*visibility: visible;*/

}

#vcd #cd

{

top: 64px;

left: 78px;

width: 146px;

height: 146px;

background-position: -510px 0;

-webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s;

-moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;

-ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;

transition: left ease .4s, transform ease 1.2s .44s;

}

#vcd #cd.switch

{

left: 120px;

-webkit-transform: rotate(2520deg);

-moz-transform: rotate(2520deg);

-ms-transform: rotate(2520deg);

transform: rotate(2520deg);

}

#vcd #wrapPager

{

display: block;

left: 0;

top: 2px;

}

#vcd #indexBar

{

top: 235px;

left: 25px;

text-align: center;

overflow: hidden;

opacity: 0;

visibility: hidden;

-webkit-transition: opacity linear .6s;

-moz-transition: opacity linear .6s;

-ms-transition: opacity linear .6s;

transition: opacity linear .6s;

position: absolute;

}

#vcd:hover #indexBar

{

opacity: 1;

visibility: visible;

}

#vcd #indexBar a

{

display: inline-block;

margin: 0 4px;

height: 0;

width: 0;

border: 4px #9f9f9f solid;

border-radius: 100%;

text-indent: -200px;

overflow: hidden;

}

#vcd #indexBar a:hover, #vcd #indexBar a.active

{

width: 4px;

height: 4px;

border-color: #05c7fe;

border-width: 2px;

}

對于CSS大家可以照著敲一下，對于位置的布局主要就是依賴position:relative和position:absolute;然后大家會發(fā)現(xiàn)使用CSS3的過渡和變形：transition和transform 我簡單提一下：

1、transition : left 1s ease 0s ;

參數(shù)1：需要過渡效果的屬性，可以為單個屬性：width,left等，也可以設置為all。

參數(shù)2：過渡的持續(xù)時間

參數(shù)3：過渡的速率動畫，這個大家有興趣可以查查，就是先慢后快，勻速之類的。

參數(shù)4：過渡開始的延時時間

transition也支持如下寫法：

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s ;

2、transform支持幾種變形

transform:scale(0.5) 縮放

transform:rotate(90deg)旋轉90度

transform:skew(10deg 2deg)斜切，矩形轉化為平行四邊形

transform:matrix() 這個矩陣變形這個網站提供在線設計矩陣

transform:translate(40px 20px)平移

例外提供了：transform-origin：20% 20%；用于修改變形效果的起點，默認為重點

當然我們這個例子用的是旋轉，也就不用修改變形效果起點了。

最后是JS：

代碼如下:

/**

* Created with JetBrains WebStorm.

* User: zhy

* Date: 14-6-15

* Time: 下午6:26

* To change this template use File | Settings | File Templates.

var vcd = {

/**

* 常量

ID_VCD: "vcd",

ID_INDEXBAR: "indexBar",

ID_CD: "cd",

CLASS_ACTIVE: "active",

CLASS_CD_SWITCH: "switch",

currentIndex: 0,

isRunning: false,

timer: null,

init: function ()

{

/**

* 初始化數(shù)據與事件

vcd.vcd = $("#" + vcd.ID_VCD);

vcd.cd = $("#" + vcd.ID_CD);

vcd.imgs = $("li", vcd.vcd);

vcd.indexBar = $("#" + vcd.ID_INDEXBAR);

vcd.vcd.mouseover(function (event)

{

clearInterval(vcd.timer);

});

vcd.vcd.mouseout(function ()

{

vcd.autoPlay();

})

;

$("a", vcd.indexBar).click(vcd.dotClick);

/**

* 按鈕點擊切換

* @param event

dotClick: function (event)

{

//如果當前動畫還在運行，則直接返回

if (vcd.isRunning)return;

vcd.isRunning = true;

$("a", vcd.indexBar).removeClass(vcd.CLASS_ACTIVE);

$(this).addClass(vcd.CLASS_ACTIVE);

vcd.currentIndex = $(this).text();

vcd.cd.addClass(vcd.CLASS_CD_SWITCH);

setTimeout(vcd.resetDotClick, 1500);

event.preventDefault();//阻止a的默認跳轉頁面

/**

* 當cd動畫結束后，更新圖片

resetDotClick: function ()

{

vcd.cd.removeClass(vcd.CLASS_CD_SWITCH);

vcd.imgs.removeClass(vcd.CLASS_ACTIVE);

vcd.imgs.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);

vcd.isRunning = false;

autoClick: function ()

{

var as = $("a", vcd.indexBar);

vcd.currentIndex++;

if (vcd.currentIndex == as.length)

{

vcd.currentIndex = 0;

}

as.removeClass(vcd.CLASS_ACTIVE);

as.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);

vcd.cd.addClass(vcd.CLASS_CD_SWITCH);

setTimeout(vcd.resetDotClick, 1500);

/**

* 自動播放

autoPlay: function ()

{

vcd.timer = setInterval(function ()

{

vcd.autoClick();

}, 3000);

}

;

單例的寫法，定義了一個對象，然后用戶通過vcd.init() ;vsd.autoPlay()調用、

代碼如下:

$(function ()

{

vcd.init();

vcd.autoPlay();

});

</script>

重置的css我就不貼了，下面我把源碼提供給大家下載。

更多信息請查看IT技術專欄

上一篇：HTML5使用drawImage()方法繪制圖像

下一篇：解決Firefox下不支持outerHTML問題代碼分享

易賢網手機網站地址：HTML5 CSS3實現(xiàn)一個精美VCD包裝盒個性幻燈片案例

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網頁制作

使用CSS制作立體導航欄10月30日

用純CSS3實現(xiàn)網頁中常見的小箭頭10月30日

有關HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務器10月30日

Dreamweaver怎么設計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網移動網站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼