以下是 搜狗壁纸多效果jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>搜狗壁纸多效果jQuery焦点图</title>
<link href="css/wallpaper.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="bannertop">
<div class="bannerwin" id="bannerwin">
<div class="bannerwrapper">
<div class="bannercontent" id="forwin">
<a class="windows_ico" id="btnplay0"></a>
<a class="ios_ico" id="btnplay1"></a>
<a class="android_ico" id="btnplay2"></a>
<div class="forwait"></div>
<span class="arrow"></span>
<div class="forwin textdisp"></div>
<a href="#" class="forwin downloadpc"></a>
<span class="changeTime">
<span class="times"></span>
<span class="downtri"></span>
</span>
<div class="screenpc forwin"></div>
</div>
</div>
</div>
<div class="bannerandr" id="bannerandr">
<div class="bannerwrapper">
<div class="bannercontent" id="forandr">
<a class="windows_ico" id="btnplay0"></a>
<a class="ios_ico" id="btnplay1"></a>
<a class="android_ico" id="btnplay2"></a>
<span class="arrow"></span>
<div class="andrtext forandroid"></div>
<a href="#" class="downandroid forandroid"></a>
<div class="androidDis forandroid"></div>
<div class="androidcode forandroid"></div>
<div class="scancode forandroid"></div>
<a href="#" class="wandou forandroid" name="搜狗壁纸android版" title="通过豌豆荚下载"><img alt="豌豆荚一键安装" src="images/wandou.png"/></a></div>
</div>
</div>
<div class="bannerios">
<div class="bannerwrapper">
<div class="bannercontent" id="banner0">
<div class="forios iospart"></div>
<a class="windows_ico" id="btnplay0"></a><a class="ios_ico" id="btnplay1"></a><a class="android_ico" id="btnplay2"></a>
<div class="forwait"></div>
<span class="arrow"></span>
<div class="iphonepart">
<div class="partwrapper">
<div class="downloadup ioshide hoverstop"></div>
<a class="downiphone iospart hoverstop" id="downiphone"></a>
<div class="downloaddown ioshide hoverstop">
<div class="innerIphone hoverstop">
<a class="dirdown hoverstop" href="#" title="直接下载，需越狱"></a>
<a class="istoredown hoverstop" href="#" title="官方下载"></a>
</div>
</div>
</div>
</div>
<div class="ioswpart">
<div class="partwrapper">
<div class="ipadup ioshide hoverstop"></div>
<a class="downipad iospart hoverstop" id="downipad"></a>
<div class="ipaddown ioshide hoverstop">
<div class="innerIpad hoverstop">
<a class="paddirdown hoverstop" href="#" title="直接下载"></a>
<a class="istorepaddown hoverstop" target="_blank" href="https://itunes.apple.com/cn/app/id641418313" title="官方下载"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
/* 按钮触碰效果 */
function showSlideToggle(){
if($("#downiphone").is(":animated")){
return;
}
showTog(".downloadup",100);
showTog(".downloaddown",200);
changeIpPos();
}
function changeIpPos(){
$("#downiphone").toggleClass("active");
if($("#downiphone").hasClass("active")){
$("#downiphone").css("backgroundPosition","-29px -152px");
}else{
$("#downiphone").css("backgroundPosition","-29px -30px");
}
}
function showSlide(){
if($("#downiphone").is(":animated")){
return;
}
showDown(".downloadup",100);
showDown(".downloaddown",200);
$("#downiphone").addClass("active");
$("#downiphone").css("backgroundPosition","-29px -152px");
}
function showTog(ele,speed){
$(ele).slideToggle(speed);
}
function showDown(ele,speed){
$(ele).slideDown(speed);
}
function showIpad(){
if($("#downipad").is(":animated")){
return;
}
showDown(".ipadup",100);
showDown(".ipaddown",200);
$("#downipad").addClass("active");
$("#downipad").css("backgroundPosition","-205px -296px");
}
function showIpadToggle(){
if($("#downiphone").is(":animated")){
return;
}
showTog(".ipadup",100);
showTog(".ipaddown",200);
chgrIpadPos(true);
}
function chgrIpadPos(flag){
$("#downipad").toggleClass("active");
if(!$("#downipad").hasClass("active")){
$("#downipad").css("backgroundPosition","-29px -296px");
}else{
$("#downipad").css("backgroundPosition","-205px -296px");
}
}
function hideIphone(){
$(".downloadup").slideUp(200);
$(".downloaddown").slideUp(200);
$("#downiphone").removeClass("active");
$("#downiphone").css("backgroundPosition","-29px -30px");
}
function hideIpad(){
$(".ipadup").slideUp(200);
$(".ipaddown").slideUp(200);
$("#downipad").removeClass("active");
$("#downipad").css("backgroundPosition","-29px -296px");
}
$("#downiphone").hover(function(){
showSlide();
});
$("#downipad").hover(function(){
showIpad();
});
$(".iphonepart").mouseleave(function(){
hideIphone();
});
$(".ioswpart").mouseleave(function(){
hideIpad();
});
/* 图片轮播效果,暂时注释掉轮播效果，只在点击时切换 */
var timer = null;
var interval = 8000;
var stayTime = 7500;
var len = 2;
var index = 0;
var timeoutRoll = null;
$(".android_ico").click(function(){
playAndroid();
pb_component(click_gif,"androidTab",from);
});
$(".windows_ico").click(function(){
playWindows();
pb_component(click_gif,"winTab",from);
});
$(".ios_ico").click(function(){
playIos();
pb_component(click_gif,"iosTab",from);
});
var tag="";
if(tag == "ios"){
playIos();
}else if(tag=="android"){
playAndroid();
}else{
playWindows();
}
function clearTimer(){
clearInterval(timer);
clearTimeout(timeoutRoll);
}
function setNewInterval(){
timer = setInterval(function(){
index++;
if(index == len){
index = 0;
}
play(index);
},interval);
}
/* windows Banner背景图效果 */
setCurBg();
$(".changeTime").click(function(){
clearTimer();
var cur = getCurBg();
cur++;
if(cur > 12){
cur = 1;
}
setBg(cur);
});
function getCurBg(){
var bgstr = $(".bannerwin").css("backgroundImage");
var preg = /\/(\d+)\.jpg/i;
var res = bgstr.match(preg);
if(res != false){
return res[1];
}
/* 默认显示第一个时间点 */
return 1;
}
function getTimePos(i){
if(i<=0 || i>13){
i = 1;
}
var pos = ['-10px -10px','-67px -10px','-124px -10px','-181px -10px','-10px -108px','-67px -108px','-124px -108px','-181px -108px','-10px -206px','-67px -206px','-124px -206px','-181px -206px'];
return pos[i-1];
}
/* 24小时转为时辰 */
function getCurHour(){
var hour = new Date().getHours();
if(hour<0||hour>23){
hour = 0;
}
var shour;
if(hour==0 || hour ==23){
shour = 1;
}else{
shour = Math.floor((hour+1)/2)+1;
}
return shour;
}
function setCurBg(){
var cur = getCurHour();
setBg(cur);
}
function setBg(cur){
if(cur<1 || cur>12){
cur = 1;
}
var bgscreen = getTimePos(cur);
$(".bannerwin").css("backgroundImage","url(images/"+cur+".jpg)");
$(".times").css("background-position",bgscreen);
$(".screenpc").css("backgroundImage","url(images/bg"+'6'+".png)");
}
function play(index){
if(index == 0){
playIos();
return;
}
playWindows();
}
function init(){
$(".iospart").stop().css({"left":"2000px"});
$(".forwin").stop().css("left","2000px");
$(".forandroid").stop().css("left","2000px");
$(".downloadup, .ipadup").stop().css({"height":"55px","display":"none"});
$(".downloaddown, .ipaddown").stop().css({"height":"94px","display":"none"});
$(".bannerios").css("left","100%");
$(".bannerwin").css("left","100%");
$(".bannerandr").css("left","100%");
$(".ios_ico").removeClass("ios_active");
$(".windows_ico").removeClass("windows_active");
$(".android_ico").removeClass("android_active");
$("#downipad").css("backgroundPosition","-29px -296px");
$("#downiphone").css("backgroundPosition","-29px -30px");
$(".ioshide").stop().fadeOut(10);
}
function initIos(){
init();
$(".arrow").css("left","498px");
$(".bannerios").css("left","0");
$(".ios_ico").addClass("ios_active");
}
function playIos(){
initIos();
$("#downiphone").animate({"left":"0"},400,function(){
$("#downipad").animate({"left":"0"},400,function(){
$(".forios").show().css({"left":"482px"}).css({"opacity":1}).hide().fadeIn(1200);
});
});
}
function initWindows(){
init();
$(".windows_ico").addClass("windows_active");
$(".arrow").css("left","439px");
$(".bannerwin").css("left","0");
}
function playWindows(){
initWindows();
/* windows进入动画 */
$(".screenpc").animate({"left":"52px"},400,function(){
$(".downloadpc").animate({"left":"569px"},500);
$(".textdisp").animate({"left":"569px"},500);
});
}
function initAndroid(){
init();
$(".bannerandr").css("left","0");
$(".android_ico").addClass("android_active");
$(".arrow").css("left","557px");
}
function playAndroid(){
initAndroid();
$(".downandroid").animate({"left":"100px"},400);
$(".wandou").animate({"left":"99px"},400);
$(".androidcode").animate({"left":"0"},400);
$(".scancode").animate({"left":"104px"},400);
$(".andrtext").animate({"left":"0"},400,function(){
$(".androidDis").animate({"left":"493px"},400);
});
}
/* windos banner图片缓存 */
for(var i = 1;i<=12;i++){
/*
* 1.如果new 在循环外,更改src会取消上次请求
* 2.同一个image对象更改两次src，第二次会取消第一次的请求。
* 3.由于每次生成image对象。请求地址后删除，释放资源
* 4.请求的资源较大，放在页面加载完毕后，且置于脚本最后
* 5.申请的image临时对象请求之前不能unset。否则会取消src的图片请求
*/
var image = new Image;
var imagebg = new Image;
image.src = "/images/"+i+".jpg";
imagebg.src = "/images/bg"+i+".png";
}
});
</script>
</body>
</html>CSS代码(wallpaper.css):
/* header and banner */
*{margin:0;padding:0;list-style:none;border:0;}
body{width:100%;height:auto;background:#FCFCFC repeat;overflow-x:hidden;}
.bannertop,.maincont{width:100%;height:433px;margin-left:auto;margin-right:auto;text-align:center;position:relative;}
.bannertop{z-index:1;overflow:hidden;}
.maincont{height:540px;}
.bannerwapper{width:100%;height:100%;position:relative;}
.bannerwin,.bannerios,.bannerandr{width:100%;height:433px;left:100%;position:absolute;top:0;}
.bannerwin{background:url("../images/1.jpg") no-repeat scroll center top transparent;}
.bannerios{background:url("../images/ios.jpg") no-repeat scroll center top transparent;}
.bannerandr{background:url("../images/android.jpg") no-repeat scroll center top transparent;}
.bannercontent{width:980px;text-align:center;margin-left:auto;margin-right:auto;}
.bannercontent,.bannerimg{height:433px;}
.bannercontent{position:relative;}
.windows_ico,.ios_ico,.android_ico{position:absolute;cursor:pointer;background:url("../images/wpmain.png") no-repeat;}
/* ios */
.iphonepart,.ioswpart{position:absolute;width:152px;height:155px;left:102px;top:260px;}
.iphonepart{left:102px;}
.ioswpart{left:263px;}
.partwrapper{width:100%;height:100%;position:relative;}
.downiphone,.downipad{position:absolute;cursor:pointer;z-index:100;height:56px;width:151px;left:2000px;top:21px;background:url("../images/download.png") no-repeat;}
.downiphone{background-position:-29px -30px;}
.downiphone:hover{background-position:-29px -152px;}
.downipad:hover{background-position:-205px -296px;}
.downipad{background-position:-29px -296px;}
/* windows */
.windows_ico{left:426px;top:375px;height:45px;width:45px;z-index:90;background-position:-215px -68px;}
.windows_active{background-position:-215px -120px;}
.forwin{position:absolute;}
.downloadpc{background:url("../images/wpmain.png") no-repeat;display:block;}
.textdisp{display:block;background:url("../images/pcv1_8.png") scroll 0px 0px no-repeat;top:125px;height:100px;width:377px;left:2000px;}
.downloadpc{width:195px;height:56px;background-position:-210px -185px;top:258px;left:2000px;}
.screenpc{height:295px;width:490px;background:url("../images/bg1.png") scroll 0 0 transparent no-repeat;left:2000px;top:90px;}
.changeTime{height:101px;width:37px;cursor:pointer;position:absolute;display:block;z-index:50;left:31px;top:66px;}
.times{height:78px;cursor:pointer;width:37px;background:url("../images/time.png") scroll -10px -10px no-repeat;display:block;}
.downtri{height:37px;cursor:pointer;width:25px;display:block;background:url("../images/time.png") scroll -225px -10px no-repeat;}
.ios_ico{left:483px;top:375px;height:45px;width:45px;z-index:90;background-position:-270px -68px;}
.ios_active{background-position:-270px -120px;}
.android_ico{z-index:90;left:544px;top:375px;height:45px;width:45px;background-position:-325px -68px;}
.android_active{background-position:-325px -120px;}
.arrow{position:absolute;background:url("../images/modify.png") no-repeat scroll -144px -219px transparent;height:15px;width:15px;display:block;left:498px;top:422px;z-index:1;}
.forios{width:550px;height:393px;position:absolute;left:2000px;top:40px;border-radius:15px;display:block;background:url("../images/ios_bg.png") no-repeat;background-position:0px 0px;}
.forwait{width:86px;height:32px;position:absolute;right:368px;top:341px;z-index:111;display:none;background:url("../images/later.png") no-repeat;background-position:0px -1px;}
.downloadup,.downloaddown,.ipadup,.ipaddown{display:none;position:absolute;background:url("../images/iosBtn.png");}
.downloadup,.ipadup{z-index:50;}
.downloaddown,.ipaddown{z-index:150;}
.downloadup,.ipadup{height:55px;width:105px;top:0;left:24px;background-position:-243px -133px;}
.downloaddown,.ipaddown{height:76px;width:113px;left:20px;top:64px;background-position:-380px -195px;}
.innnerIphone,.innerIpad{position:relative;width:100%;height:100%;}
/*android*/
.androidDis,.androidcode{position:absolute;display:block;background:url("../images/androidmain.png") no-repeat;}
.andrtext{position:absolute;display:block;background:url("../images/andr_v1.1.png") no-repeat;width:438px;height:120px;top:93px;background-position:0px 0px;}
.downandroid,.scancode{position:absolute;background:url("../images/downandr.png") no-repeat;display:block;}
.downandroid{height:60px;width:192px;top:245px;background-position:-78px 0px;}
.androidDis{background:url("../images/andr_phone.png") no-repeat scroll 0 0;height:388px;width:445px;top:50px;}
.scancode{background:url("../images/androidmain.png") no-repeat scroll -309px -38px;height:17px;width:122px;top:314px;}
.scancode2{position:absolute;height:15px;width:120px;top:315px;background:url("../images/androidmain.png") no-repeat;background-position:-308px -37px;display:block;}
.androidcode{background:url("../images/andrcode.png") no-repeat scroll 0 0;width:85px;height:85px;top:245px;}
.wandou{position:absolute;top:314px;}
.btinstall,.dirdown,.istoredown,.padinstall,.paddirdown,.istorepaddown{position:absolute;display:block;height:22px;width:94px;left:10px;cursor:pointer;}
.btinstall,.padinstall{top:14px;}
.btinstall:hover,.padinstall:hover{background:url("../images/iosBtn.png") no-repeat;background-position:-550px -201px;}
.dirdown:hover,.paddirdown:hover{background:url("../images/iosBtn.png") no-repeat;background-position:-550px -209px;}
.istoredown:hover,.istorepaddown:hover{background:url("../images/iosBtn.png") no-repeat;background-position:-685px -236px;}
.dirdown,.paddirdown{top:14px;}
.istoredown,.istorepaddown{top:41px;}
.padinstall{cursor:not-allowed;color:#AAAAAA;}
分享到QQ
分享到微博
微信扫一扫
