以下是 猎豹浏览器4.0页面滑动jQuery代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>猎豹浏览器4.0页面滑动jQuery</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="pic1" num="1">
<div class="nag">
<div class="ac active"><b></b></div>
<div class="ac"><b></b></div>
<div class="ac"><b></b></div>
<div class="ac"><b></b></div>
<div class="icon">
<div class="xinlan"></div>
<div class="tenxun"></div>
</div>
</div>
<div class="divtop">
<img id="btntop" class="btntop" src="images/top.png" />
</div>
<div class="back a1">
<a class="a1_one"></a>
<a id="a1_a" class="a_0" target="_blank" href="#"></a>
<!--<div class="a1_img">
<img src="images/1.gif" />
<img src="images/2.gif" />
<img src="images/3.gif" />
</div>
<p id="n1p">欢迎使用猎豹浏览器4.0</p>
<img id="n11img" class="n11" src="images/toptext.png" />
<img id="n12img" class="n12" src="images/lbt.png" />-->
</div>
<!--<div class="back a2">
<div class="n2"></div>
<div id="n2yue1" class="n2yue1"></div>
<div id="n2yue2" class="n2yue2"></div>
<div id="hjimg" class="hjimg"></div>
</div>-->
<div class="back a2">
<div class="n3">
<a target="_blank" href="#"></a>
</div>
<div id="n1yue3" class="yue3"></div>
<img src="images/$.png" class="yu1" />
<img src="images/$.png" class="yu2 yutop" />
<img src="images/$.png" class="yu3 yutop" />
<img src="images/$.png" class="yu4 yutop" />
</div>
<div class="back a3">
<div class="n4"></div>
<div id="n4yue1" class="n4yue1"></div>
<div id="n4yue2" class="n4yue2"></div>
<div class="zhuoz"></div>
<img id="n5img" class="n5img" src="images/n5.png" />
</div>
<div class="back a4">
<div class="n5">
<a target="_blank" href="#"></a>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script>
//var index_img=0;
/*$(".a1_img img").eq(0).fadeIn("slow");
setInterval(function(){
var index_0=index_img;
index_img=index_img+1;
if(index_img>=3) index_img=0;
$(".a1_img img").eq(index_0).fadeOut("slow");
$(".a1_img img").eq(index_img).fadeIn("slow");
$("#a1_a").attr("class","a_"+index_img)
},5000);*/
function $en(tit){return encodeURIComponent(tit)}
var title="我的天啊，大家快来用下新版猎豹浏览器4.0~真的太快了！跟光速似的！其他浏览器都弱爆了！！！网购上当还赔你钱，48360元哦~~不用猎豹用啥？？不信？那就试试看！下载地址>>#忽悠你的话，俺请你吃饭！";
//var url="#";
var pic="http://www.liebao.cn/images/iconpic.png";
$(".xinlan").click(function(){
window.open('http://v.t.sina.com.cn/share/share.php?appkey=962772401&title='+$en(title)+'&pic='+pic);
})
$(".tenxun").click(function(){
window.open('http://v.t.qq.com/share/share.php?title='+$en(title)+'&pic='+pic);
})
var h=$(window).height();
var w=$(window).width();
//var h1=(h1-500<30?30:h-580)+"px";
//$(".divtop").css("bottom",h1);
$(".back").css("height",h+"px");
$(".nag").css("top",$(window).scrollTop() + 250 +"px");
$(".yutop").css("top",(h+150)+"px");
$("#hjimg").css("top",(h+430)+"px");
var yueAnimate={
lbyFun:function(){
$("#n11img").css({"width": "65px","height": "5px","top": "300px","margin-left": "-32px","opacity":"0"});
$("#n12img").css({"opacity":"0"});
$("#n1p").css({"opacity":"0"});
var y=460;
$("#n12img").animate({
"opacity": 1
},800,'easeInCubic');
$("#n1p").animate({
"opacity": 1
},800,'easeInCubic',function(){
$("#n11img").animate({
"opacity": 0.8,
"width":"328px",
"height":"27px",
"top": "275px",
"margin-left":"-164px"
},400,'easeInCubic',function(){
$("#n11img").animate({
"opacity": 1,
"width":"273px",
"height":"22px",
"top": "285px",
"margin-left":"-137px"
},200,"easeInCubic")
});
});
},
btntop :function(){
$("#btntop").css({"margin-top": "0px"});
$("#btntop").animate({
"margin-top": "30px"
},1000,'easeOutBounce');
},
yue :function(id,left,right,time){
$(id).animate({
"margin-left": right
},time,function(){
$(id).animate({
"margin-left": left
},time);
});
},
hjFun:function(){
$("#hjimg").css("top",($(window).height()+430)+"px");
$("#hjimg").css("margin-left","-824px");
$("#n2yue1").css("margin-left","-560px");
$("#n2yue2").css("margin-left","55px");
$("#hjimg").animate({
"top": "230px",
"margin-left":"-340px"
},1000,'easeInOutQuint');
},
yuFun:function(){
var x=$(window).width()/2-500+210;
x=x<210?210:x;
var y=460;
$(".yutop").css("top",(h+150)+"px");
$(".yu1").css({"left": "50px","top": "260px"});
$(".yu2").css({"left": "250px"});
$(".yu3").css({"left": "450px"});
$(".yu4").css({"left": "650px"});
$(".yu1").animate({
"left": x-170+"px",
"top":"384px"
},1000,'easeInCubic');
$(".yu2").animate({
"left": x-160+"px",
"top":"479px"
},1000,'easeInCubic');
$(".yu3").animate({
"left": x-55+"px",
"top":"509px"
},1000,'easeInCubic');
$(".yu4").animate({
"left": x+38+"px",
"top":"468px"
},1000,'easeInCubic');
},
n5imgFun:function(){
$("#n5img").css({"width": "20px","height": "16px","top": "470px","margin-left": "75px","opacity":"0"});
var y=460;
$("#n5img").animate({
"opacity": 0.5,
"width":"350px",
"height":"276px",
"top": "250px",
"margin-left":"-70px"
},800,'easeInBack',function(){
$("#n5img").animate({
"opacity": 1,
"width":"320px",
"height":"252px",
"top": "260px",
"margin-left":"-60px"
},300,"easeInBack")
});
}
}
//鼠标滚动事件
var shubiao=true;
var wheel = function(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
document.onmousewheel = wheel;
var $f=true;
var handle = function(delta) {
if(!shubiao) return;
shubiao=false;
var random_num = Math.floor((Math.random() * 100) + 50);
if (delta < 0) {
PicWheelScroll(1);
$f=false;
//console.log("鼠标滑轮向下滚动：" + delta + "次！"); // 1
return false;
} else {
$f=true;
PicWheelScroll(0);
//console.log("鼠标滑轮向上滚动：" + delta + "次！"); // -1
return false;
}
}
$(".ac").each(function(i){
$(this).click(function(){
$(".ac").removeClass("active");
$(".ac").eq(i).addClass("active");
var num=i+1;
if(num=="4") $("#btntop").hide();
else $("#btntop").show();
gotoAnchor($(".a"+num));
getAnchroFun(num);
})
})
var PicWheelScroll = function(n){
var num=$("#pic1").attr("num");
if((num===4&&n===1) || (num===1&&n===0)) return;
if(n==1){
if(num<4) num++;
}else{
if(num>1) num--;
}
$(".ac").removeClass("active");
$(".ac").eq(num-1).addClass("active");
if(num=="4") $("#btntop").hide();
else $("#btntop").show();
gotoAnchor($(".a"+num));
getAnchroFun(num);
}
yueAnimate.yue("#n1yue3","-510px","-150px",10000);
yueAnimate.yue("#n2yue1","-560px","-375px",10000);
yueAnimate.yue("#n2yue2","55px","260px",10000);
yueAnimate.yue("#n4yue1","-240px","-160px",10000);
yueAnimate.yue("#n4yue2","120px","230px",10000);
setInterval(function(){
yueAnimate.yue("#n1yue3","-510px","-300px",10000);
yueAnimate.yue("#n2yue1","-560px","-375px",10000);
yueAnimate.yue("#n2yue2","55px","260px",10000);
yueAnimate.yue("#n4yue1","-240px","-160px",10000);
yueAnimate.yue("#n4yue2","120px","230px",10000);
},22000);
setInterval(yueAnimate.btntop,2000);
var getAnchroFun=function(num){
var h=$(window).height();
var h=(h-500<30?30:h-580)+"px";
$(".divtop").css("bottom","30px");
var n=$("#pic1").attr("num");
switch(parseInt(num)){
case 1:
if(n==1&&$f) return false;
yueAnimate.lbyFun();
break;
case 2:
yueAnimate.yuFun();
break;
case 3:
yueAnimate.n5imgFun();
break;
case 4:
break;
}
$("#pic1").attr("num",num);
}
var gotoAnchor = function(selector,isauto){
var anchor = $(selector);
if (anchor.length < 0) return;
var $win=$(window);
var $body = $(window.document.documentElement);
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("webkit") > -1) {
$body = $(window.document.body)
}
var pos=anchor.offset();
if (isauto) {
var t = pos.top - $win.scrollTop(); //相对于屏幕显示区
var t2 = $win.height() - t;
if (t2 < anchor.outerHeight()) {
$body.animate({"scrollTop": pos.top}, "normal");
}
return;
}
$body.animate({"scrollTop": pos.top},{queue :false,complete: function(){shubiao=true;}});
}
gotoAnchor($(".a1"));
yueAnimate.lbyFun();
$(window).resize(function(){
var h=$(window).height();
$(".back").css("height",h+"px");
var n=$("#pic1").attr("num");
var h1=(h-500<30?30:h-580)+"px";
//if(n==1) $(".divtop").css("bottom",h1);
//else
$(".divtop").css("bottom","30px");
gotoAnchor($(".a"+n));
});
$(".divtop").click(function(){
var n=$("#pic1").attr("num");
if(n=="3") $("#btntop").hide();
n=parseInt(n)+1;
if(n==5) {return;}
$(".ac").removeClass("active");
$(".ac").eq(n-1).addClass("active");
gotoAnchor($(".a"+n));
getAnchroFun(n);
$("#pic1").attr("num",n);
})
</script>
</body>
</html>
JS代码(jquery.easing.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright 漏 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright 漏 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */
/*! * jQuery Transit - CSS3 transitions and transformations * Copyright(c) 2011 Rico Sta. Cruz <rico@ricostacruz.com> * MIT Licensed. * * http://ricostacruz.com/jquery.transit * http://github.com/rstacruz/jquery.transit */
(function($){
"use strict";
$.transit ={
version:"0.1.3",// Map of $.css() keys to values for 'transitionProperty'. // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated propertyMap:{
marginLeft:'margin',marginRight:'margin',marginBottom:'margin',marginTop:'margin',paddingLeft:'padding',paddingRight:'padding',paddingBottom:'padding',paddingTop:'padding'}
,// Will simply transition "instantly" if false enabled:true,// Set this to false if you don't want to use the transition end property. useTransitionEnd:false}
;
var div = document.createElement('div');
var support ={
}
;
// Helper function to get the proper vendor property name. // (`transition` => `WebkitTransition`) function getVendorPropertyName(prop){
var prefixes = ['Moz','Webkit','O','ms'];
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
if (prop in div.style){
return prop;
}
for (var i=0;
i<prefixes.length;
++i){
var vendorProp = prefixes[i] + prop_;
if (vendorProp in div.style){
return vendorProp;
}
}
}
// Helper function to check if transform3D is supported. // Should return true for Webkits and Firefox 10+. function checkTransform3dSupport(){
div.style[support.transform] = '';
div.style[support.transform] = 'rotateY(90deg)';
return div.style[support.transform] !== '';
}
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
// Check for the browser's transitions support. // You can access this in jQuery's `$.support.transition`. // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),// we set $.support.transition to a string of the actual property name used. support.transition = getVendorPropertyName('transition');
support.transitionDelay = getVendorPropertyName('transitionDelay');
support.transform = getVendorPropertyName('transform');
support.transformOrigin = getVendorPropertyName('transformOrigin');
support.transform3d = checkTransform3dSupport();
$.extend($.support,support);
var eventNames ={
'MozTransition':'transitionend','OTransition':'oTransitionEnd','WebkitTransition':'webkitTransitionEnd','msTransition':'MSTransitionEnd'}
;
// Detect the 'transitionend' event needed. var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
// Avoid memory leak in IE. div = null;
// ## $.cssEase // List of easing aliases that you can use with `$.fn.transition`. $.cssEase ={
'_default':'ease','in':'ease-in','out':'ease-out','in-out':'ease-in-out','snap':'cubic-bezier(0,1,.5,1)'}
;
// ## 'transform' CSS hook // Allows you to use the `transform` property in CSS. // // $("#hello").css({
transform:"rotate(90deg)"}
);
// // $("#hello").css('transform');
// //=>{
rotate:'90deg'}
// $.cssHooks.transform ={
// The getter returns a `Transform` object. get:function(elem){
return $(elem).data('transform');
}
,// The setter accepts a `Transform` object or a string. set:function(elem,v){
var value = v;
if (!(value instanceof Transform)){
value = new Transform(value);
}
// We've seen the 3D version of Scale() not work in Chrome when the // element being scaled extends outside of the viewport. Thus,we're // forcing Chrome to not use the 3d transforms as well. Not sure if // translate is affectede,but not risking it. Detection code from // http://davidwalsh.name/detecting-google-chrome-javascript if (support.transform === 'WebkitTransform' && !isChrome){
elem.style[support.transform] = value.toString(true);
}
else{
elem.style[support.transform] = value.toString();
}
$(elem).data('transform',value);
}
}
;
// ## 'transformOrigin' CSS hook // Allows the use for `transformOrigin` to define where scaling and rotation // is pivoted. // // $("#hello").css({
transformOrigin:'0 0'}
);
// $.cssHooks.transformOrigin ={
get:function(elem){
return elem.style[support.transformOrigin];
}
,set:function(elem,value){
elem.style[support.transformOrigin] = value;
}
}
;
// ## Other CSS hooks // Allows you to rotate,scale and translate. registerCssHook('scale');
registerCssHook('translate');
registerCssHook('rotate');
registerCssHook('rotateX');
registerCssHook('rotateY');
registerCssHook('rotate3d');
registerCssHook('perspective');
registerCssHook('skewX');
registerCssHook('skewY');
registerCssHook('x',true);
registerCssHook('y',true);
// ## Transform class // This is the main class of a transformation property that powers // `$.fn.css({
transform:'...'}
)`. // // This is,in essence,a dictionary object with key/values as `-transform` // properties. // // var t = new Transform("rotate(90) scale(4)");
// // t.rotate //=> "90deg" // t.scale //=> "4,4" // // Setters are accounted for. // // t.set('rotate',4) // t.rotate //=> "4deg" // // Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit) // functions. // // t.toString() //=> "rotate(90deg) scale(4,4)" // t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version) // function Transform(str){
if (typeof str === 'string'){
this.parse(str);
}
return this;
}
Transform.prototype ={
// ### setFromString() // Sets a property from a string. // // t.setFromString('scale','2,4');
// // Same as set('scale','2','4');
// setFromString:function(prop,val){
var args = (typeof val === 'string') ? val.split(','):(val.constructor === Array) ? val:[ val ];
args.unshift(prop);
Transform.prototype.set.apply(this,args);
}
,// ### set() // Sets a property. // // t.set('scale',2,4);
// set:function(prop){
var args = Array.prototype.slice.apply(arguments,[1]);
if (this.setter[prop]){
this.setter[prop].apply(this,args);
}
else{
this[prop] = args.join(',');
}
}
,get:function(prop){
if (this.getter[prop]){
return this.getter[prop].apply(this);
}
else{
return this[prop] || 0;
}
}
,setter:{
// ### rotate // // .css({
rotate:30}
) // .css({
rotate:"30"}
) // .css({
rotate:"30deg"}
) // .css({
rotate:"30deg"}
) // rotate:function(theta){
this.rotate = unit(theta,'deg');
}
,rotateX:function(theta){
this.rotateX = unit(theta,'deg');
}
,rotateY:function(theta){
this.rotateY = unit(theta,'deg');
}
,// ### scale // // .css({
scale:9}
) //=> "scale(9,9)" // .css({
scale:'3,2'}
) //=> "scale(3,2)" // scale:function(x,y){
if (y === undefined){
y = x;
}
this.scale = x + "," + y;
}
,// ### skewX + skewY skewX:function(x){
this.skewX = unit(x,'deg');
}
,skewY:function(y){
this.skewY = unit(y,'deg');
}
,// ### perspectvie perspective:function(dist){
this.perspective = unit(dist,'px');
}
,// ### x / y // Translations. Notice how this keeps the other value. // // .css({
x:4}
) //=> "translate(4px,0)" // .css({
y:10}
) //=> "translate(4px,10px)" // x:function(x){
this.set('translate',x,null);
}
,y:function(y){
this.set('translate',null,y);
}
,// ### translate // Notice how this keeps the other value. // // .css({
translate:'2,5'}
) //=> "translate(2px,5px)" // translate:function(x,y){
if (this._translateX === undefined){
this._translateX = 0;
}
if (this._translateY === undefined){
this._translateY = 0;
}
if (x !== null){
this._translateX = unit(x,'px');
}
if (y !== null){
this._translateY = unit(y,'px');
}
this.translate = this._translateX + "," + this._translateY;
}
}
,getter:{
x:function(){
return this._translateX || 0;
}
,y:function(){
return this._translateY || 0;
}
,scale:function(){
var s = (this.scale || "1,1").split(',');
if (s[0]){
s[0] = parseFloat(s[0]);
}
if (s[1]){
s[1] = parseFloat(s[1]);
}
// "2.5,2.5" => 2.5 // "2.5,1" => [2.5,1] return (s[0] === s[1]) ? s[0]:s;
}
,rotate3d:function(){
var s = (this.rotate3d || "0,0,0,0deg").split(',');
for (var i=0;
i<=3;
++i){
if (s[i]){
s[i] = parseFloat(s[i]);
}
}
if (s[3]){
s[3] = unit(s[3],'deg');
}
return s;
}
}
,// ### parse() // Parses from a string. Called on constructor. parse:function(str){
var self = this;
str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(x,prop,val){
self.setFromString(prop,val);
}
);
}
,// ### toString() // Converts to a `transition` CSS property string. If `use3d` is given,// it converts to a `-webkit-transition` CSS property string instead. toString:function(use3d){
var re = [];
for (var i in this){
if (this.hasOwnProperty(i)){
// Don't use 3D transformations if the browser can't support it. if ((!support.transform3d) && ( (i === 'rotateX') || (i === 'rotateY') || (i === 'perspective') || (i === 'transformOrigin'))){
continue;
}
if (i[0] !== '_'){
if (use3d && (i === 'scale')){
re.push(i + "3d(" + this[i] + ",1)");
}
else if (use3d && (i === 'translate')){
re.push(i + "3d(" + this[i] + ",0)");
}
else{
re.push(i + "(" + this[i] + ")");
}
}
}
}
return re.join(" ");
}
}
;
function callOrQueue(self,queue,fn){
if (queue === true){
self.queue(fn);
}
else if (queue){
self.queue(queue,fn);
}
else{
fn();
}
}
// ### getProperties(dict) // Returns properties (for `transition-property`) for dictionary `props`. The // value of `props` is what you would expect in `$.css(...)`. function getProperties(props){
var re = [];
$.each(props,function(key){
key = $.camelCase(key);
// Convert "text-align" => "textAlign" key = $.transit.propertyMap[key] || key;
key = uncamel(key);
// Convert back to dasherized if ($.inArray(key,re) === -1){
re.push(key);
}
}
);
return re;
}
// ### getTransition() // Returns the transition string to be used for the `transition` CSS property. // // Example:// // getTransition({
opacity:1,rotate:30}
,500,'ease');
// //=> 'opacity 500ms ease,-webkit-transform 500ms ease' // function getTransition(properties,duration,easing,delay){
// Get the CSS properties needed. var props = getProperties(properties);
// Account for aliases (`in` => `ease-in`). if ($.cssEase[easing]){
easing = $.cssEase[easing];
}
// Build the duration/easing/delay attributes for it. var attribs = '' + toMS(duration) + ' ' + easing;
if (parseInt(delay,10) > 0){
attribs += ' ' + toMS(delay);
}
// For more properties,add them this way:// "margin 200ms ease,padding 200ms ease,..." var transitions = [];
$.each(props,function(i,name){
transitions.push(name + ' ' + attribs);
}
);
return transitions.join(',');
}
//jquery.transit.js // ## $.fn.transition // Works like $.fn.animate(),but uses CSS transitions. // // $("...").transition({
opacity:0.1,scale:0.3}
);
// // // Specific duration // $("...").transition({
opacity:0.1,scale:0.3}
,500);
// // // With duration and easing // $("...").transition({
opacity:0.1,scale:0.3}
,500,'in');
// // // With callback // $("...").transition({
opacity:0.1,scale:0.3}
,function(){
...}
);
// // // With everything // $("...").transition({
opacity:0.1,scale:0.3}
,500,'in',function(){
...}
);
// // // Alternate syntax // $("...").transition({
// opacity:0.1,// duration:200,// delay:40,// easing:'in',// complete:function(){
/* ... */
}
//}
);
// $.fn.transition = $.fn.transit = function(properties,duration,easing,callback){
var self = this;
var delay = 0;
var queue = true;
// Account for `.transition(properties,callback)`. if (typeof duration === 'function'){
callback = duration;
duration = undefined;
}
// Account for `.transition(properties,duration,callback)`. if (typeof easing === 'function'){
callback = easing;
easing = undefined;
}
// Alternate syntax. if (typeof properties.easing !== 'undefined'){
easing = properties.easing;
delete properties.easing;
}
if (typeof properties.duration !== 'undefined'){
duration = properties.duration;
delete properties.duration;
}
if (typeof properties.complete !== 'undefined'){
callback = properties.complete;
delete properties.complete;
}
if (typeof properties.queue !== 'undefined'){
queue = properties.queue;
delete properties.queue;
}
if (typeof properties.delay !== 'undefined'){
delay = properties.delay;
delete properties.delay;
}
// Set defaults. (`400` duration,`ease` easing) if (typeof duration === 'undefined'){
duration = $.fx.speeds._default;
}
if (typeof easing === 'undefined'){
easing = $.cssEase._default;
}
duration = toMS(duration);
// Build the `transition` property. var transitionValue = getTransition(properties,duration,easing,delay);
// Compute delay until callback. // If this becomes 0,don't bother setting the transition property. var work = $.transit.enabled && support.transition;
var i = work ? (parseInt(duration,10) + parseInt(delay,10)):0;
// If there's nothing to do... if (i === 0){
var fn = function(next){
self.css(properties);
if (callback){
callback();
}
next();
}
;
callOrQueue(self,queue,fn);
return self;
}
// Save the old transitions of each element so we can restore it later. var oldTransitions ={
}
;
var run = function(nextCall){
var bound = false;
// Prepare the callback. var cb = function(){
if (bound){
self.unbind(transitionEnd,cb);
}
if (i > 0){
self.each(function(){
this.style[support.transition] = (oldTransitions[this] || null);
}
);
}
if (typeof callback === 'function'){
callback.apply(self);
}
if (typeof nextCall === 'function'){
nextCall();
}
}
;
if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)){
// Use the 'transitionend' event if it's available. bound = true;
self.bind(transitionEnd,cb);
}
else{
// Fallback to timers if the 'transitionend' event isn't supported. window.setTimeout(cb,i);
}
// Apply transitions. self.each(function(){
if (i > 0){
this.style[support.transition] = transitionValue;
}
$(this).css(properties);
}
);
}
;
// Defer running. This allows the browser to paint any pending CSS it hasn't // painted yet before doing the transitions. var deferredRun = function(next){
var i = 0;
// Durations that are too slow will get transitions mixed up. // (Tested on Mac/FF 7.0.1) if ((support.transition === 'MozTransition') && (i < 25)){
i = 25;
}
window.setTimeout(function(){
run(next);
}
,i);
}
;
// Use jQuery's fx queue. callOrQueue(self,queue,deferredRun);
// Chainability. return this;
}
;
function registerCssHook(prop,isPixels){
// For certain properties,the 'px' should not be implied. if (!isPixels){
$.cssNumber[prop] = true;
}
$.transit.propertyMap[prop] = support.transform;
$.cssHooks[prop] ={
get:function(elem){
var t = $(elem).css('transform') || new Transform();
return t.get(prop);
}
,set:function(elem,value){
var t = $(elem).css('transform') || new Transform();
t.setFromString(prop,value);
$(elem).css({
transform:t}
);
}
}
;
}
// ### uncamel(str) // Converts a camelcase string to a dasherized string. // (`marginLeft` => `margin-left`) function uncamel(str){
return str.replace(/([A-Z])/g,function(letter){
return '-' + letter.toLowerCase();
}
);
}
// ### unit(number,unit) // Ensures that number `number` has a unit. If no unit is found,assume the // default is `unit`. // // unit(2,'px') //=> "2px" // unit("30deg",'rad') //=> "30deg" // function unit(i,units){
if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))){
return i;
}
else{
return "" + i + units;
}
}
// ### toMS(duration) // Converts given `duration` to a millisecond string. // // toMS('fast') //=> '400ms' // toMS(10) //=> '10ms' // function toMS(duration){
var i = duration;
// Allow for string durations like 'fast'. if ($.fx.speeds[i]){
i = $.fx.speeds[i];
}
return unit(i,'ms');
}
// Export some functions for testable-ness. $.transit.getTransitionValue = getTransition;
}
)(jQuery);
CSS代码(style.css):
body,div{margin:0px;padding:0px;}
body{overflow-y:hidden;background:#fe8e06;overflow-x:hidden;font-family:"微软雅黑","Microsoft YaHei",Helvetica,sansation,Verdana,Arial,sans-serif;font-size:12px;}
.nag{position:fixed;z-index:5;top:250px;right:30px;background:url('../images/nag.png') no-repeat;width:38px;height:213px;}
.nag .ac{width:14px;height:14px;margin:14px 0px 28px 12px;cursor:pointer;}
.nag .ac.active b{background:url('../images/bw.png') no-repeat;width:38px;height:40px;display:inline-block;margin:-14px 0px 0px -12px;}
.a1{width:100%;background:#fe8e06;position:relative;}
.a2{width:100%;background:#ed6374;position:relative;z-index:2;}
.a3{width:100%;background:#31aac4;position:relative;z-index:3;}
.a4{width:100%;background:#58b873;position:relative;z-index:4;}
.back{height:1000px;min-height:500px;min-width:1000px;}
.a1 p{font-size:60px;color:#ffffff;text-align:center;top:180px;position:relative;opacity:0;}
.n11{width:63px;height:12px;position:absolute;left:50%;margin-left:-32px;top:200px;opacity:0;}
.n12{width:120px;height:120px;position:absolute;left:50%;margin-left:-60px;top:355px;opacity:0;}
.n2{background:url('../images/01.gif') no-repeat;width:1000px;height:102px;position:absolute;top:120px;left:50%;margin-left:-500px;}
.n3{background:url('../images/02.gif') no-repeat;width:1000px;height:520px;position:absolute;top:50px;left:50%;margin-left:-500px}
.n3 a{position:absolute;width:120px;height:35px;top:383px;left:50%;margin-left:4px;}
.n4{background:url('../images/03.gif') no-repeat;width:1000px;height:174px;position:absolute;top:125px;left:50%;margin-left:-500px;}
.n5{background:url('../images/04.gif') no-repeat;width:596px;height:76px;position:absolute;top:50%;left:50%;margin-left:-298px;margin-top:-140px;}
.n5img{z-index:3;position:absolute;width:40px;height:32px;top:450px;margin-left:65px;left:50%;opacity:0;}
.n5 a{background:url('../images/btn5.png') no-repeat;position:absolute;width:180px;height:60px;top:141px;left:50%;margin-left:-91px;}
.n5 a:hover{background-position:0px -60px;}
.n5 a:active{background-position:0px -120px;}
.yue3{background:url('../images/yue3.png') no-repeat;width:187px;height:85px;position:absolute;top:150px;left:50%;margin-left:-510px;}
.n4yue1{background:url('../images/yue1.png') no-repeat;width:175px;height:98px;position:absolute;top:350px;left:50%;margin-left:-240px;}
.n4yue2{z-index:4;background:url('../images/yue2.png') no-repeat;width:205px;height:96px;position:absolute;top:410px;left:50%;margin-left:120px;}
.n2yue1{z-index:3;background:url('../images/yue1.png') no-repeat;width:175px;height:98px;position:absolute;top:315px;left:50%;margin-left:-560px;}
.n2yue2{z-index:3;background:url('../images/yue2.png') no-repeat;width:205px;height:96px;position:absolute;top:415px;left:50%;margin-left:55px;}
.hjimg{background:url('../images/rocket.png') no-repeat;width:452px;height:409px;position:absolute;left:50%;margin-left:-1020px;}
.yu1{width:107px;height:58px;position:absolute;left:50px;top:260px;-webkit-transform:rotate(20deg);}
.yu2{width:155px;height:80px;position:absolute;left:250px;top:260px;-webkit-transform:rotate(-27deg);}
.yu3{width:104px;height:56px;position:absolute;left:450px;top:260px;-webkit-transform:rotate(-103deg);}
.yu4{width:106px;height:58px;position:absolute;left:650px;top:260px;-webkit-transform:rotate(-143deg);}
.zhuoz{background:url('../images/zhuoz.png') no-repeat;width:447px;height:227px;left:50%;margin-left:-140px;top:400px;position:absolute;}
.divtop{width:38px;height:60px;position:fixed;bottom:30px;left:50%;margin-left:-19px;z-index:6;}
.btntop{cursor:pointer;z-index:5;margin-top:30px;width:38px;height:19px;}
.icon{background:url('../images/right.png') no-repeat;width:25px;height:70px;margin-left:11px;margin-top:-10px;}
.icon .xinlan{cursor:pointer;width:18px;height:15px;display:block;}
.icon .tenxun{width:18px;height:16px;display:block;cursor:pointer;margin-top:14px;}
.a1_one{background:url('../images/top1.gif') no-repeat center top;width:100%;margin-top:80px;height:462px;position:absolute;}
.a_0{position:absolute;left:50%;top:178px;width:120px;height:34px;margin-left:84px;}
/*.a1_img{width:744px;height:397px;position:absolute;top:200px;left:50%;margin-left:-372px;}
.a1_img img{display:none;top:0px;position:absolute;}
.a1_img a{top:18px;width:120px;height:34px;position:absolute;}
.a1_img a.a_0{right:93px;}
.a1_img a.a_1{right:68px;}
.a1_img a.a_2{right:96px;}
*/
分享到QQ
分享到微博
微信扫一扫
