欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery+CSS3實(shí)現(xiàn)的超酷全屏產(chǎn)品切換展示效果

  • 腳本大小：260KB
  • 腳本語(yǔ)言：簡(jiǎn)體中文
  • 腳本類型：國(guó)產(chǎn)軟件
  • 腳本授權(quán)：免費(fèi)軟件
  • 腳本類別：CSS特效
  • 應(yīng)用平臺(tái)：css/css3
  • 更新時(shí)間：2013-05-02
  • 網(wǎng)友評(píng)分：
360通過(guò) 騰訊通過(guò) 金山通過(guò)

詳情介紹

這個(gè)js特效通過(guò)jquery+css3實(shí)現(xiàn)了一個(gè)全屏的產(chǎn)品展示效果，范例中每屏展示一款手機(jī)，點(diǎn)擊向前向后的按鈕可以查看下一個(gè)產(chǎn)品，產(chǎn)品切換帶有特效，非常酷。
HTML框架：
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- 幻燈片的代碼就放在這里 -->
</div>
<a id="arrowLeft" class="arrow">&lt;</a>
<a id="arrowRight" class="arrow">&gt;</a>
<!-- JavaScript includes -->
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/impress.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
[/code]
幻燈片的html代碼：
[code]
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br />
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect &amp; Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes ..</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and..</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
[/code]
用到的CSS樣式：
[code]
/*----------------------------
Styling the presentation
-----------------------------*/
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
color:#444648;
position:absolute;
z-index:10;
}
#impress p{
font: normal 18px/1.3 'Open Sans', sans-serif;
color:#27333f;
position:absolute;
z-index:10;
}
#impress img{
position:absolute;
z-index:1;
}
[/code]
jquery代碼，這段js代碼保存在script.js文件里面：
[code]
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
[/code]

下載地址

下載錯(cuò)誤？【投訴報(bào)錯(cuò)】

jQuery+CSS3實(shí)現(xiàn)的超酷全屏產(chǎn)品切換展示效果

      人氣腳本

      相關(guān)文章

      下載聲明

      ☉ 解壓密碼：www.dbjr.com.cn 就是本站主域名，希望大家看清楚，[ 分享碼的獲取方法 ]可以參考這篇文章
      ☉ 推薦使用 [ 迅雷 ] 下載，使用 [ WinRAR v5 ] 以上版本解壓本站軟件。
      ☉ 如果這個(gè)軟件總是不能下載的請(qǐng)?jiān)谠u(píng)論中留言,我們會(huì)盡快修復(fù)，謝謝!
      ☉ 下載本站資源，如果服務(wù)器暫不能下載請(qǐng)過(guò)一段時(shí)間重試!或者多試試幾個(gè)下載地址
      ☉ 如果遇到什么問(wèn)題，請(qǐng)?jiān)u論留言，我們定會(huì)解決問(wèn)題，謝謝大家支持!
      ☉ 本站提供的一些商業(yè)軟件是供學(xué)習(xí)研究之用，如用于商業(yè)用途，請(qǐng)購(gòu)買正版。
      ☉ 本站提供的jQuery+CSS3實(shí)現(xiàn)的超酷全屏產(chǎn)品切換展示效果資源來(lái)源互聯(lián)網(wǎng)，版權(quán)歸該下載資源的合法擁有者所有。