您现在的位置是：网站首页> 软件下载软件下载
jQuery+CSS3实现的超酷全屏产品切换展示效果 下载-
2021-09-13
192人已围观
简介 jQuery+CSS3实现的超酷全屏产品切换展示效果 下载-
这个js特效通过jquery+css3实现了一个全屏的产品展示效果，范例中每屏展示一款手机，点击向前向后的按钮可以查看下一个产品，产品切换带有特效，非常酷。
HTML框架：
[code]
Impressive CSS3 Product Showcase | Tutorialzine Demo
<
>
[/code]
幻灯片的html代码：
[code]
[/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]
HTML框架：
[code]
<
>
[/code]
幻灯片的html代码：
[code]
Introducing Galaxy Nexus
Android 4.0
Super Amoled 720p Screen
Simplicity in Android 4.0
Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..
Connect & Share
Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing..
Instant Upload
Your photos upload themselves with Instant Upload, which makes ..
Jam on with Google Music
Google Music makes discovery, purchase, and listening effortless and..
[/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]
