背景自由切换效果CSS & jQuery

by sunflowamedia ON 2011/09/19 2675

free to switch background

今天介绍这款背景切换功能，现在很多网站会使用到，特别是单页面的独立网站。代码和JS都比较简单，背景不仅是图片也可以设置为CSS颜色。喜欢的朋友可以下载，别吝啬您的口水啊～

Step1. 创建HTML

<body class="slide slide3 s1">

<div class="content content1">
<h2><span> Type one.</span></h2>
<div class="text">
<p>Sunflowa Media - Green,Reliable,Funny Web Design.<br> I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
</div>
</div>

<div class="icons">
  <a onclick="switchbox(1);" href="javascript:void(0);"><img class="img1 selected" alt="" src="images/icon.png"></a>
  <a onclick="switchbox(2);" href="javascript:void(0);"><img alt="" class="img2" src="images/icon2.png"> </a>
  <a onclick="switchbox(3);" href="javascript:void(0);"><img alt="" class="img3" src="images/icon5.png"></a>
  <a onclick="switchbox(4);" href="javascript:void(0);"><img alt="" class="img4" src="images/icon4.png"> </a>
  <a onclick="switchbox(5);" href="javascript:void(0);"><img alt="" class="img5" src="images/icon3.png"></a>
</div>

Step2. 创建CSS

.slide .pane {
    text-align: center;
    width: 750px;
	margin: 0 auto;
    z-index: 1;
	overflow: hidden;
}
.slide.slide3 .icons {
    height: 200px;
    margin: 0 auto 0;
    text-align: center;
    width: 500px;
}
.slide.slide3 .arrowcontainer {
    position: relative;
}
.slide.slide3 .arrow {
    color: #FFFFFF;
    font-size: 150%;
    left: 160px;
    position: absolute;
    top: -90px;
    width: 130px;
	font-weight: bold;
}
.slide.slide3 .arrow img {
    float: right;
}
.slide.slide3 .cont{ width:100%; margin: 0 auto 150px;overflow:hidden}
.slide.slide3 .icons img {
	cursor: pointer;
    display: block;
    float: left;
    margin: 0;
    padding: 10px;
}
.slide.slide3 .icons img:hover {
    background: url(../images/glow2.png) repeat scroll 0 0 transparent;
}
.slide.slide3 h2{ margin-top:35px;text-align:center;margin-bottom:35px}
.slide.slide3 .content2,.slide.slide3 .content3,.slide.slide3 .content4,.slide.slide3 .content5{display:none}
.slide.slide3.s1 {background:url(../images/landingbg1.png);overflow:hidden}
.slide.slide3 h2 {
    color: #FFFFFF;
    font-family: 'pt sans narrow',arial,sans-serif;
    font-size: 2em;
    line-height: 1em;
    text-shadow: 0 2px #222222;
}
.slide.slide3 h2 span {
    color: #FFCC22;
    font-weight: bold;
}
.slide.slide3 .text {
    color: #fafafa;
    font-family: "oswald",arial,sans-serif;
    font-size: 1.3em;
    text-shadow: 0 1px #332211;
	font-weight: bold;
}
.slide.slide3.s3 .text {
    color: #333;
    font-family: "oswald",arial,sans-serif;
    font-size: 1.3em;
    text-shadow: 0 1px #EEE;
	font-weight: bold;
}
.slide.slide3.s2 {background: url(../images/landingbg2.png); overflow:hidden}
.slide.slide3.s3 {background: url(../images/landingbg3.png); overflow:hidden}
.slide.slide3.s4 {background: url(../images/landingbg4.jpg); overflow:hidden}
.slide.slide3.s5 {background: url(../images/landingbg5.gif); overflow:hidden}

Step3. 插入jQuery

function skipToLast() {
    var a;
    a = $(".slide").last(),
    a && ($(".slide").removeClass("selected"), a.addClass("selected"), jQuery.scrollTo.window().queue([]).stop(), $(window).scrollTo(a, 2150, {
        easing: "swing"
    }))
}
function switchbox(a) {
    a == 1 ? $(".slide.slide3 .arrowcontainer").show() : $(".slide.slide3 .arrowcontainer").hide(),
    $(".slide.slide3").removeClass("s1").removeClass("s2").removeClass("s3").removeClass("s4").removeClass("s5"),
    $(".slide.slide3").addClass("s"   a),
    $(".slide.slide3 .img"   a).addClass("selected"),
    $(".slide.slide3 .content").hide(),
    $(".slide.slide3 .content.content"   a).show(),
    $(".slide.slide3 .bgimg").remove()
}
trace = function(a) {
    try {
        console.log(a)
    } catch(b) {
        alert(a)
    }
},
$.fn.textInputHint = function(a) {
    return this.val(a),
    $(this).addClass("hint"),
    this.focus(function() {
        $(this).val() == a && $(this).removeClass("hint").val("")
    }),
    this.blur(function() {
        $(this).val() == "" && $(this).addClass("hint").val(a)
    }),
    this
},
$(document).ready(function() {
    $("#emaildrop").textInputHint("Email Address"),
    $(".slide .button").click(function(a) {
        Bobcat.SlideManager.changeSlide(1)
    }),
    $(".slide.slide1 .message2 a").click(function() {
        skipToLast()
    }),
    $("#fb-fans").append('<fb:fan profile_id="211998345516663" connections="8" stream="0" width="480" height="150" css="http://striking.ly/assets/facebook.css"></fb:fan>'),
    $("#gplus-counter").append('<g:plusone size="tall"></g:plusone>'),
    FB.init({
        appId: "230491903632065",
        status: !0,
        cookie: !0,
        xfbml: !0
    }),
    $(".slide.slide5 #signupbutton1").click(function() {
        $(".slide.slide5 .signupdiv").slideToggle(),
        $(".slide.slide5 .emaildropdiv").slideToggle()
    }),
    $(".slide.slide5 #mcformstrikingly .submit").click(function() {
        $(".slide.slide5 #mcformstrikingly").submit()
    })
})

Download