Welcome, Old Sport!

背景自由切换效果CSS & jQuery

by ilikecss ON 2011/09/19 12055

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()
    })
})
9条评论
  1. #1

    彩讯网说道:

    很实用的功能,只是背景能预加载就好了~~~~~~~~~~~~~

  2. #2

    彩讯网说道:

    而且切换的时候不是很平滑,会闪一下~~

    • 是吗,请问你是用什么浏览器下查看的?

      • lz什么的最好了说道:

        试验过了,第一次换背景会变白然后变成所选背景。以后就没有变白了,应该是第一次背景图片没有预加载的问题。ChromePlus+Win 7

        • 我知道了,因为图片过大,网速如果跟不上会造成暂时的空白,图片是CSS预加的。

  3. #3

    Daisy说道:

    好清爽的博客~

  4. #4

    ply说道:

    我可以要一份这个背景效果吗? :razz:




TOP