以下是 jQuery搜狗浏览器4.2专题页滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=10;chrome=1">-->
<head>
<title>jQuery搜狗浏览器4.2专题页</title>
<style>
*{margin:0px;}
html{overflow-y:hidden}
#cont{width:100%;position:relative;}
.stage{width:100%;height:580px;display:block;position: relative;overflow: hidden;}
.stage_box{width:900px;height:580px;margin:auto;position:relative;text-align:center;overflow:hidden;}
#stage1{background-color:#f9f9f9;}
#stage2{background-color:#35b5d2;}
#stage3{background-color:#f3bf2e;}
#stage4{background-color:#5c86c2;}
#stage5{background-color:#d44267;}
#stage6{background-color:#a2c371;}
.fe_img1{position:absolute;margin:-196px -274px;width: 555px;height:392px;left:42%;top:50%; background:url(images/features4.2preview/fe_img1.png) no-repeat;}
.fe_img2{position:absolute;margin:-220px -263px;width: 527px;height:441px;left:42%;top:50%; background:url(images/features4.2preview/fe_img2.png) no-repeat;}
.fe_img3{position:absolute;margin:-206px -272px;width: 543px;height:412px;left:42%;top:50%; background:url(images/features4.2preview/fe_img_plus.png) no-repeat;}
.fe_img4{position:absolute;margin:-206px -272px;width: 543px;height:412px;left:42%;top:50%; background:url(images/features4.2preview/fe_img3.png) no-repeat;}
.fe_img5{position:absolute;margin:-200px -320px;width: 641px;height:401px;left:42%;top:50%; background:url(images/features4.2preview/fe_img4.png) no-repeat;}
.fe_flag{position:absolute;width: 140px;height:86px;right: 80px;bottom: 60px; background:url(images/features4.2preview/fe_flag.png) no-repeat;}
.fe_text1{position:absolute;margin:-31px -96px;width: 193px;height:68px;left:69%;top:45%; background:url(images/features4.2preview/fe_text1.png) no-repeat;}
.fe_text2{position:absolute;margin:-31px -96px;width: 193px;height:68px;left:69%;top:45%; background:url(images/features4.2preview/fe_text2.png) no-repeat;}
.fe_text3{position:absolute;margin:-31px -96px;width: 222px;height:65px;left:69%;top:45%; background:url(images/features4.2preview/fe_text_plus.png) no-repeat;}
.fe_text4{position:absolute;margin:-31px -128px;width: 257px;height:68px;left:69%;top:45%; background:url(images/features4.2preview/fe_text3.png) no-repeat;}
.fe_text5{position:absolute;margin:-31px -100px;width: 210px;height:68px;left:69%;top:45%; background:url(images/features4.2preview/fe_text4.png) no-repeat;}
.index_ins{position:absolute;left: 30px;
top: 180px;width:222px;height:145px;background:url(images/features4.2preview/index_ins.png) no-repeat;/*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/features4.2preview/index_ins.png");+background-image: none;*/}
.index_link{cursor:pointer;}
.index_link1{position:absolute;width:147px;height:19px;left:673px;top:181px;background:url(images/features4.2preview/index_link1.png) no-repeat;}
.index_link1:hover{left:683px;}
.index_link2{position:absolute;width:147px;height:19px;left:703px;top:232px;background:url(images/features4.2preview/index_link2.png) no-repeat;}
.index_link2:hover{left:713px;}
.index_link3{position:absolute;width:147px;height:19px;left:733px;top:280px;background:url(images/features4.2preview/index_link_plus.png) no-repeat;}
.index_link3:hover{left:743px;}
.index_link4{position:absolute;width:167px;height:19px;left:703px;top:328px;background:url(images/features4.2preview/index_link3.png) no-repeat;}
.index_link4:hover{left:713px;}
.index_link5{position:absolute;width:147px;height:19px;left:673px;top:374px;background:url(images/features4.2preview/index_link4.png) no-repeat;}
.index_link5:hover{left:683px;}
#guider .bg{z-index:0;width:100%;height:100%;background:url(images/features4.2preview/guider_bg5.png) no-repeat center center;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/features4.2preview/guider_bg5.png");_background-image: none;position:absolute;top:0px;left:0px;}
#guider{width:30px;height:205px;position:absolute;top:380px;right:150px;}
#guider .sina{z-index:1;position:absolute;left:0px;bottom:34px;width:100%;height:26px;display:block;}
#guider .sina:hover{background:url(images/features4.2preview/guider_bg.png) no-repeat center -135px;}
#guider .tencent{z-index:1;position:absolute;left:0px;bottom:0px;width:100%;height:25px;display:block;}
#guider .tencent:hover{background:url(images/features4.2preview/guider_bg.png) no-repeat center -170.5px;}
#guider_link1{z-index:1;height:31px;}
.guider_link{position:relative;z-index:1;width:100%;height:20px;display:block;cursor:pointer;}
#guider_link2.select{background:url(images/features4.2preview/guider1_select.jpg) no-repeat center center;}
#guider_link3.select{background:url(images/features4.2preview/guider2_select.jpg) no-repeat center center;}
#guider_link4.select{background:url(images/features4.2preview/guider_select_plus.jpg) no-repeat center center;}
#guider_link5.select{background:url(images/features4.2preview/guider3_select.jpg) no-repeat center center;}
#guider_link6.select{background:url(images/features4.2preview/guider4_select.jpg) no-repeat center center;}
#logo {position: absolute;top:2px;left:2.5px;}
.swf_object{height:768px;margin-top:-94px;}
.btn_down{width:80px;height:80px;position:absolute;bottom:0px;margin-left: -10px;left: 50%;cursor:pointer;}
.sign {position:absolute; width: 32px;height:12px;left:24px;}
#sign1_1{background: url(images/features4.2preview/sign1.png) no-repeat ;bottom: 30px;}
#sign2_1{background: url(images/features4.2preview/sign2.png) no-repeat ;bottom: 38px;}
#sign3_1{background: url(images/features4.2preview/sign3.png) no-repeat ;bottom: 46px;}
.signImg1{background: url(images/features4.2preview/sign_1.png) no-repeat ;bottom: 30px;}
.signImg2{background: url(images/features4.2preview/sign_2.png) no-repeat ;bottom: 38px;}
.signImg3{background: url(images/features4.2preview/sign_3.png) no-repeat ;bottom: 46px;}
</style>
<script type="text/javascript" src="js/jquery_1.7.2.js"></script>
<script type="text/javascript" src="js/jQueryRotateCompressed.2.2.js"></script>
</head>
<body scroll=no>
<div id="cont">
<div class="stage" id="stage1">
<div class="stage_box">
<div class="index_ins"></div>
<div class="index_link1 index_link" index="1"></div>
<div class="index_link2 index_link" index="2"></div>
<div class="index_link3 index_link" index="3"></div>
<div class="index_link4 index_link" index="4"></div>
<div class="index_link5 index_link" index="5"></div>
<object class="swf_object" style="visibility: visible;align:center;valign:center;width:100%;background:transparent" type="application/x-shockwave-flash" data="images/features4.2preview/01.swf?v=0129" id="swf1">
<param name="movie" value="images/features4.2preview/01.swf">
<param name="wmode" value="transparent">
<param name="Scale" value="ShowAll">
<param name="swLiveConnect" value="true">
<param name="allowScriptAccess" value="always" />
<embed src="images/features4.2preview/01.swf" autostart="false" allowScriptAccess="always" style="visibility: visible;align:center;valign:center;width:100%;height:100%" play="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="swf1"
></embed>
</object>
</div>
<a class="index_link btn_down" index="1">
<div class='sign' id='sign1_1'></div>
<div class='sign' id='sign2_1'></div>
<div class='sign' id='sign3_1'_></div>
</a>
</div>
<div class="stage" id="stage2" name ="refresh">
<div class="fe_img1"></div>
<div class="fe_text1"></div>
<a class="index_link btn_down" index="2">
<div class='sign signImg1' id='sign1_2'></div>
<div class='sign signImg2' id='sign2_2'></div>
<div class='sign signImg3' id='sign3_2'></div>
</a>
</div>
<div class="stage" id="stage3">
<div class="fe_img2"></div>
<div class="fe_text2"></div>
<a class="index_link btn_down" index="3">
<div class='sign signImg1' id='sign1_3'></div>
<div class='sign signImg2' id='sign2_3'></div>
<div class='sign signImg3' id='sign3_3'></div>
</a>
</div>
<div class="stage" id="stage4">
<div class="fe_img3"></div>
<div class="fe_text3"></div>
<a class="index_link btn_down" index="4">
<div class='sign signImg1' id='sign1_plus'></div>
<div class='sign signImg2' id='sign2_plus'></div>
<div class='sign signImg3' id='sign3_plus'></div>
</a>
</div>
<div class="stage" id="stage5">
<div class="fe_img4"></div>
<div class="fe_text4"></div>
<a class="index_link btn_down" index="5">
<div class='sign signImg1' id='sign1_4'></div>
<div class='sign signImg2' id='sign2_4'></div>
<div class='sign signImg3' id='sign3_4'></div>
</a>
</div>
<div class="stage" id="stage6">
<div class="fe_img5"></div>
<div class="fe_text5"></div>
<div class="fe_flag">
<div onclick="go()" style='height:50%;cursor:pointer'></div>
<div onclick="backToTop()" style="height:50%;cursor:pointer"></div>
</div>
</div>
<div id="guider">
<a class = "guider_link" id="guider_link1">
<img src="images/features4.2preview/logo4.png" id="logo">
</a>
<a class="guider_link" id="guider_link2"></a>
<a class="guider_link" id="guider_link3"></a>
<a class="guider_link" id="guider_link4"></a>
<a class="guider_link" id="guider_link5"></a>
<a class="guider_link" id="guider_link6"></a>
<a class="sina" target="_blank" href=""></a>
<a class="tencent" target="_blank" href=""></a>
<div class="bg"></div>
</div>
</div>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>
JS代码(jQueryRotateCompressed.2.2.js):
// VERSION:2.2 LAST UPDATE:13.03.2012/* * Licensed under the MIT license:http://www.opensource.org/licenses/mit-license.php * * Made by Wilq32,wilq32@gmail.com,Wroclaw,Poland,01.2009 * Website:http://code.google.com/p/jqueryrotate/ */
(function(j){
for(var d,k=document.getElementsByTagName("head")[0].style,h=["transformProperty","WebkitTransform","OTransform","msTransform","MozTransform"],g=0;
g<h.length;
g++)void 0!==k[h[g]]&&(d=h[g]);
var i="v"=="\v";
jQuery.fn.extend({
rotate:function(a){
if(!(0===this.length||"undefined"==typeof a)){
"number"==typeof a&&(a={
angle:a}
);
for(var b=[],c=0,f=this.length;
c<f;
c++){
var e=this.get(c);
if(!e.Wilq32||!e.Wilq32.PhotoEffect){
var d=j.extend(!0,{
}
,a),e=(new Wilq32.PhotoEffect(e,d))._rootObj;
b.push(j(e))}
else e.Wilq32.PhotoEffect._handleRotation(a)}
return b}
}
,getRotateAngle:function(){
for(var a=[],b=0,c=this.length;
b<c;
b++){
var f=this.get(b);
f.Wilq32&&f.Wilq32.PhotoEffect&&(a[b]=f.Wilq32.PhotoEffect._angle)}
return a}
,stopRotate:function(){
for(var a=0,b=this.length;
a<b;
a++){
var c=this.get(a);
c.Wilq32&&c.Wilq32.PhotoEffect&&clearTimeout(c.Wilq32.PhotoEffect._timer)}
}
}
);
Wilq32=window.Wilq32||{
}
;
Wilq32.PhotoEffect=function(){
return d?function(a,b){
a.Wilq32={
PhotoEffect:this}
;
this._img=this._rootObj=this._eventObj=a;
this._handleRotation(b)}
:function(a,b){
this._img=a;
this._rootObj=document.createElement("span");
this._rootObj.style.display="inline-block";
this._rootObj.Wilq32={
PhotoEffect:this}
;
a.parentNode.insertBefore(this._rootObj,a);
if(a.complete)this._Loader(b);
else{
var c=this;
jQuery(this._img).bind("load",function(){
c._Loader(b)}
)}
}
}
();
Wilq32.PhotoEffect.prototype={
_setupParameters:function(a){
this._parameters=this._parameters||{
}
;
"number"!==typeof this._angle&&(this._angle=0);
"number"===typeof a.angle&&(this._angle=a.angle);
this._parameters.animateTo="number"===typeof a.animateTo?a.animateTo:this._angle;
this._parameters.step=a.step||this._parameters.step||null;
this._parameters.easing=a.easing||this._parameters.easing||function(a,c,f,e,d){
return-e*((c=c/d-1)*c*c*c-1)+f}
;
this._parameters.duration=a.duration||this._parameters.duration||1E3;
this._parameters.callback=a.callback||this._parameters.callback||function(){
}
;
a.bind&&a.bind!=this._parameters.bind&&this._BindEvents(a.bind)}
,_handleRotation:function(a){
this._setupParameters(a);
this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()}
,_BindEvents:function(a){
if(a&&this._eventObj){
if(this._parameters.bind){
var b=this._parameters.bind,c;
for(c in b)b.hasOwnProperty(c)&&jQuery(this._eventObj).unbind(c,b[c])}
this._parameters.bind=a;
for(c in a)a.hasOwnProperty(c)&&jQuery(this._eventObj).bind(c,a[c])}
}
,_Loader:function(){
return i?function(a){
var b=this._img.width,c=this._img.height;
this._img.parentNode.removeChild(this._img);
this._vimage=this.createVMLNode("image");
this._vimage.src=this._img.src;
this._vimage.style.height=c+"px";
this._vimage.style.width=b+"px";
this._vimage.style.position="absolute";
this._vimage.style.top="0px";
this._vimage.style.left="0px";
this._container=this.createVMLNode("group");
this._container.style.width=b;
this._container.style.height=c;
this._container.style.position="absolute";
this._container.setAttribute("coordsize",b-1+","+(c-1));
this._container.appendChild(this._vimage);
this._rootObj.appendChild(this._container);
this._rootObj.style.position="relative";
this._rootObj.style.width=b+"px";
this._rootObj.style.height=c+"px";
this._rootObj.setAttribute("id",this._img.getAttribute("id"));
this._rootObj.className=this._img.className;
this._eventObj=this._rootObj;
this._handleRotation(a)}
:function(a){
this._rootObj.setAttribute("id",this._img.getAttribute("id"));
this._rootObj.className=this._img.className;
this._width=this._img.width;
this._height=this._img.height;
this._widthHalf=this._width/2;
this._heightHalf=this._height/2;
var b=Math.sqrt(this._height*this._height+this._width*this._width);
this._widthAdd=b-this._width;
this._heightAdd=b-this._height;
this._widthAddHalf=this._widthAdd/2;
this._heightAddHalf=this._heightAdd/2;
this._img.parentNode.removeChild(this._img);
this._aspectW=(parseInt(this._img.style.width,10)||this._width)/this._img.width;
this._aspectH=(parseInt(this._img.style.height,10)||this._height)/this._img.height;
this._canvas=document.createElement("canvas");
this._canvas.setAttribute("width",this._width);
this._canvas.style.position="relative";
this._canvas.style.left=-this._widthAddHalf+"px";
this._canvas.style.top=-this._heightAddHalf+"px";
this._canvas.Wilq32=this._rootObj.Wilq32;
this._rootObj.appendChild(this._canvas);
this._rootObj.style.width=this._width+"px";
this._rootObj.style.height=this._height+"px";
this._eventObj=this._canvas;
this._cnv=this._canvas.getContext("2d");
this._handleRotation(a)}
}
(),_animateStart:function(){
this._timer&&clearTimeout(this._timer);
this._animateStartTime=+new Date;
this._animateStartAngle=this._angle;
this._animate()}
,_animate:function(){
var a=+new Date,b=a-this._animateStartTime>this._parameters.duration;
if(b&&!this._parameters.animatedGif)clearTimeout(this._timer);
else{
(this._canvas||this._vimage||this._img)&&this._rotate(~~(10*this._parameters.easing(0,a-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration))/10);
this._parameters.step&&this._parameters.step(this._angle);
var c=this;
this._timer=setTimeout(function(){
c._animate.call(c)}
,10)}
this._parameters.callback&&b&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))}
,_rotate:function(){
var a=Math.PI/180;
return i?function(a){
this._angle=a;
this._container.style.rotation=a%360+"deg"}
:d?function(a){
this._angle=a;
this._img.style[d]="rotate("+a%360+"deg)"}
:function(b){
this._angle=b;
b=b%360*a;
this._canvas.width=this._width+this._widthAdd;
this._canvas.height=this._height+this._heightAdd;
this._cnv.translate(this._widthAddHalf,this._heightAddHalf);
this._cnv.translate(this._widthHalf,this._heightHalf);
this._cnv.rotate(b);
this._cnv.translate(-this._widthHalf,-this._heightHalf);
this._cnv.scale(this._aspectW,this._aspectH);
this._cnv.drawImage(this._img,0,0)}
}
()}
;
i&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){
document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");
try{
return!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(a){
return document.createElement("<rvml:"+a+' class="rvml">')}
}
catch(a){
return function(a){
return document.createElement("<"+a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}
}
}
())}
)(jQuery);
JS代码(zzsc.js):
var crollNow = 0;
var iTime;
var followScroll = 1;
var stop = 0;
var ifbottom = 0;
var rocketTimer;
var pingback;
var ifPlayed = Array(0,0,0,0,0,0,0);
var windowobject;
var windowHeight;
var SmoothScroll = function (win,opt){
//操作对象 this.win = win;
this.timeStamp = new Date().getTime();
//每次滚动位移 this.step = opt ? opt.step || 400:400;
//缓动系数 this.f = opt ? opt.f || 0.06:0.06;
this.interval = 10;
this.intervalID = null;
this.isFF = navigator.userAgent.toLowerCase().indexOf("firefox")>=0;
this.upOrDown = "";
this.init();
}
var i=0;
SmoothScroll.prototype ={
init:function (){
var _this = this;
if (_this.isFF){
_this.win.addEventListener('DOMMouseScroll',function (e){
_this.upOrDown = e.detail < 0 ? "up":"down";
_this.scrollHander();
if (e.preventDefault) //disable default wheel action of scrolling page e.preventDefault();
elsereturn false;
}
,false);
}
else{
_this.win.onmousewheel = function (e){
e = e || window.event;
_this.upOrDown = e.wheelDelta > 0 ? "up":"down";
_this.scrollHander();
if (e.preventDefault) //disable default wheel action of scrolling page e.preventDefault();
elsereturn false;
}
}
}
,scrollHander:function (){
clearTimeDown();
var _this = this;
var _step=_this.step * (_this.upOrDown == "up" ? -1:1);
var tar = $(window).scrollTop()+ _step;
if(tar<$("body").height()-10){
if(!$(windowobject).is(":animated")){
//避免多次滚轮造成的多次滚动$(windowobject).animate({
"scrollTop":"+="+ _step+"px"}
,600,function(){
if(_this.upOrDown == "up"){
//代表转轮往上，文本内容其实是往下crash_bottom(1,$(window).scrollTop(),20,150);
}
else{
crash(0,$(window).scrollTop(),20,150);
}
}
);
//if($(window).scrollTop()<=_this.step && _this.upOrDown=='up'){
///////////////////////////}
else{
$("#guider").animate({
"top":tar+(_this.step-$("#guider").height())/2}
,800,function(){
//var index=Math.floor($("#guider").offset().top/windowHeight);
var index=Math.round(tar/windowHeight);
if(index!=0){
$(".guider_link").removeClass("select");
$(".guider_link").eq(index).addClass("select");
}
}
);
}
}
}
}
}
//搭建js与flash互通的环境function thisMovie(movieName){
if (navigator.appName.indexOf("Microsoft") != -1){
return window[movieName];
}
else{
return document[movieName];
}
}
function callExternal(ele_id){
if(ele_id=="swftop"){
var timer = setInterval(function(){
if(thisMovie(ele_id).PercentLoaded()==100){
clearInterval(timer);
thisMovie(ele_id).startPlay();
}
}
,100);
}
else{
var index= parseInt(ele_id.replace("swf",""))-1;
if(ifPlayed[index]==0){
var timer = setInterval(function(){
if(thisMovie(ele_id).PercentLoaded()==100){
clearInterval(timer);
thisMovie(ele_id).startPlay();
ifPlayed[index] = 1;
}
}
,100);
}
}
}
function go(){
location.href = "http://sc.chinaz.com/";
}
function backToTop(){
clearTimeDown();
$(windowobject).animate({
"scrollTop":"0px"}
,2000,function(){
}
);
}
function guider_click(index){
linkToPage(index);
}
function rocketHide(){
}
function refresh(){
window.location.reload();
}
function linkToPage(index){
if(!$(windowobject).is(":animated")){
pingback.getPv(index);
index = parseInt(index);
clearTimeDown();
if(index>0){
$(".guider_link").removeClass("select");
$(".guider_link").eq(index).addClass("select");
}
if($(".stage").eq(index).offset().top>$("body").scrollTop()){
$(windowobject).animate({
"scrollTop":$(".stage").eq(index).offset().top + "px"}
,1000,function(){
crash(0,$(".stage").eq(index).offset().top,20,150);
}
);
}
else{
$(windowobject).animate({
"scrollTop":$(".stage").eq(index).offset().top +"px"}
,1000,function(){
crash_bottom(1,$(".stage").eq(index).offset().top,20,150);
}
);
}
if(index!==0){
var height = $(".stage").eq(index).offset().top +windowHeight/2-$("#guider").height()/2;
$("#guider").animate({
"top":height+20+"px"}
,1000);
}
}
}
function crash_bottom(direction,termin,distant,time){
if(!stop){
var scrollTop = $(window).scrollTop();
if(direction==1){
//向上direction = 0;
$(windowobject).animate({
"scrollTop":"+="+distant+"px"}
,time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if(distant<=15||time>150){
stop=1;
//代表开始停止碰撞$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
//为0代表碰撞结束crollNow = termin;
stop=0;
setTimeout(function(){
setTimeDown();
}
,500);
}
);
}
}
);
}
else if(direction == 0){
//向下direction = 1;
$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if(distant<=15||time>150){
stop=1;
$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
crollNow = termin;
stop=0;
setTimeout(function(){
setTimeDown();
}
,500);
}
);
}
}
);
}
}
}
function crash(direction,termin,distant,time){
if(!stop){
var scrollTop = $(window).scrollTop();
if(direction==0){
//向下direction = 1;
$(windowobject).animate({
"scrollTop":"-="+distant+"px"}
,time,function(){
crash(direction,termin,distant*0.6,time);
if(distant<=15||time>150){
stop=1;
$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
crollNow = termin;
stop=0;
setTimeout(function(){
setTimeDown();
}
,100);
}
);
}
}
);
}
else if(direction ==1){
//向上direction = 0;
$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
crash(direction,termin,distant*0.6,time);
if(distant<=15||time>150){
stop=1;
$(windowobject).animate({
"scrollTop":termin+"px"}
,time,function(){
crollNow = termin;
stop=0;
setTimeout(function(){
if(!ifbottom){
followScroll = 1;
setTimeDown();
}
}
,100);
}
);
}
}
);
}
}
}
var timeDown;
var intervalDown;
var topwin=1;
function setTimeDown(){
clearTimeDown();
timeDown = setTimeout(function(){
if(!$(windowobject).is(":animated")){
var index=Math.round($(window).scrollTop()/windowHeight)+1;
if(index!=6){
$(windowobject).animate({
"scrollTop":"+="+windowHeight+"px"}
,600,function(){
crash(0,$(window).scrollTop(),20,150);
}
);
var tmpheight=index*windowHeight+(windowHeight-$("#guider").height())/2;
$("#guider").animate({
"top":tmpheight}
,800,function(){
var index=Math.floor($("#guider").offset().top/windowHeight);
if(index!=0){
$(".guider_link").removeClass("select");
$(".guider_link").eq(index).addClass("select");
}
}
);
}
}
}
,8000);
}
function clearTimeDown(){
clearTimeout(timeDown);
}
function signAnimate(){
var cicleFun=function(name1,name2,name3,shift,interval){
$(name1).animate({
"bottom":"-="+shift+"px"}
,interval,function(){
$(name1).hide();
$(name2).animate({
"bottom":"-="+shift+"px"}
,interval,function(){
$(name2).hide();
$(name3).animate({
"bottom":"-="+shift+"px"}
,interval,function(){
$(name3).hide();
$(name1).css("bottom","+="+ shift*2+"px").show().animate({
"bottom":"-="+shift+"px"}
,interval,function(){
$(name2).css("bottom","+="+shift*2+"px").show().animate({
"bottom":"-="+shift+"px"}
,interval,function(){
$(name3).css("bottom","+="+shift*2+"px").show().animate({
"bottom":"-="+shift+"px"}
,interval,function(){
setTimeout(function(){
cicleFun(name1,name2,name3,shift,interval)}
,1500);
}
);
}
);
}
);
}
);
}
);
}
);
}
cicleFun("#sign1_1","#sign2_1","#sign3_1",30,200);
cicleFun("#sign1_2","#sign2_2","#sign3_2",30,200);
cicleFun("#sign1_plus","#sign2_plus","#sign3_plus",30,200);
cicleFun("#sign1_3","#sign2_3","#sign3_3",30,200);
cicleFun("#sign1_4","#sign2_4","#sign3_4",30,200);
}
$(document).ready(function(){
pingback = new PingbackApp();
pingback.getPv(0);
setTimeDown();
callExternal("swf1");
var title_sina ="http://service.weibo.com/share/share.php?appkey=3455933708&pic=http://ie.sogou.com/images/features4.2preview/share.jpg&url=http://download.ie.sogou.com/se/sogou_explorer_4.2_1022.exe&title=" + encodeURIComponent("我升级了#搜狗浏览器4.2正式版#，新增头像，浏览器更有个性，管理账号更方便；新版我的最爱，界面更时尚；新增飞传功能，一键发送网页到手机；优化通知中心，信息提醒更方便。快来体验吧！");
var title_tencent = "http://v.t.qq.com/share/share.php?c=share&appkey=801083942&pic=http://ie.sogou.com/images/features4.2preview/share.jpg&url=http://download.ie.sogou.com/se/sogou_explorer_4.2_1022.exe&title="+ encodeURIComponent("我升级了#搜狗浏览器4.2正式版#，新增头像，浏览器更有个性，管理账号更方便；新版我的最爱，界面更时尚；新增飞传功能，一键发送网页到手机；优化通知中心，信息提醒更方便。快来体验吧！");
$(".sina").attr("href",(title_sina));
$(".tencent").attr("href",(title_tencent));
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome){
//判断是chrome、搜狗chrome内核,供scrollTop兼容性使用windowobject ="body";
}
else{
//支持ie和ffwindowobject ="html";
}
$(".index_link").click(function(){
$(".guider_link").removeClass("select");
var index = parseInt($(this).attr("index"));
$(".index_link").eq(index).addClass("select");
linkToPage(index);
}
);
$(".guider_link").click(function(){
var index= $(this).index();
linkToPage(index);
}
);
//当前窗口大小windowHeight = document.documentElement.clientHeight;
$(".stage").css("height",windowHeight);
$(".stage_box").css("top",(windowHeight-580)/2+"px");
$("#guider").css("top",$("body").height()-windowHeight/2-$("#guider").height()/2);
var opt ={
step:windowHeight,f:1}
;
var div = document.body;
new SmoothScroll(div,opt);
//窗口大小变化时，触发每个屏幕大小变化var resizeHandler=function(){
$("body").stop(true,true);
//阻止碰撞stop=1;
clearTimeDown();
windowHeight = document.documentElement.clientHeight;
$(".stage").css("height",windowHeight);
$(".stage_box").css("top",(windowHeight-580)/2+"px");
$("#guider").css("top",$("body").height()-windowHeight/2-$("#guider").height()/2);
var opt ={
step:windowHeight,f:1}
;
var div = document.body;
new SmoothScroll(div,opt);
var index=Math.floor($(window).scrollTop()/windowHeight);
$(windowobject).animate({
"scrollTop":index*windowHeight+"px"}
);
if(index!=0){
var tmpheight=index*windowHeight+(windowHeight-$("#guider").height())/2;
$("#guider").animate({
"top":tmpheight}
,0,function(){
$(".guider_link").removeClass("select");
$(".guider_link").eq(index).addClass("select");
}
);
}
//300毫秒后执行stop=0,目的是保证ie下crash函数（也是timer）执行完。setTimeout(function(){
stop=0;
}
,300);
}
$(window).resize(function(){
//bugfix ie内核只有在定时器触发这个函数才能正确执行setTimeout(resizeHandler,10);
}
);
//往下翻页的函数signAnimate();
//浏览器图标的旋转动画var rotateTimer;
$("#guider_link1").hover(function(){
var angle = 0;
clearInterval(rotateTimer);
rotateTimer=setInterval(function(){
angle+=20;
$("#logo").rotate(angle);
}
,50);
}
,function(){
$("#logo").rotate(0);
clearInterval(rotateTimer);
}
);
$(windowobject).animate({
"scrollTop":"0px"}
);
//去掉鼠标中键的点击事件,否则由此产生的向上滚动和向下滚动将不受控制function stopDefaultAndBubble(e){
e = e || window.event;
// Stops the Default Browser Actionif (e.preventDefault){
e.preventDefault();
}
e.returnValue = false;
//Stops the event bubbling up to the body elementif (e.stopPropagation){
e.stopPropagation();
}
e.cancelBubble = true;
}
$(document).bind('mousedown',function(e){
//mouse middle button if( (e.which == 2) ){
stopDefaultAndBubble(e);
//bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效。。 setTimeout(function(){
stopDefaultAndBubble(e);
}
,10);
}
}
)}
);
function getCookie1(offset){
var endstr = document.cookie.indexOf (";
",offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
function getCookie2(name){
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen){
var j = i + alen;
if (document.cookie.substring(i,j) == arg) return getCookie1(j);
i = document.cookie.indexOf(" ",i) + 1;
if (i == 0) break;
}
return null;
}
function setCookie(name,value,exptime,domain){
var domain = domain ? domain:"ie.sogou.com";
var exp = new Date();
exp.setTime(exp.getTime() + exptime);
document.cookie = name + "=" + value + ";
path=/;
expires=" + exp.toGMTString() + ";
domain=" + domain + ";
";
}
var PingbackApp = function(){
var pingServerUrl = "http://sc.chinaz.com/";
var n = new Date().getTime();
var c = escape(n*1000+Math.round(Math.random()*1000));
this.getUid = function(){
var uid = "";
if(getCookie2("SMYUV") != null){
uid = getCookie2("SMYUV");
}
else{
uid = c;
setCookie("SMYUV",uid,2592000000,"sogou.com");
}
return uid;
}
this.getYYID = function(){
var yyid = "";
if(getCookie2("YYID") != null){
yyid = getCookie2("YYID");
}
else{
yyid = "";
}
return yyid;
}
this.refurl = document.referrer == ""? "":encodeURIComponent(document.referrer);
//pl(page location)this.pl = encodeURIComponent(window.location.href);
var u = this.getUid();
this.getPv = function(index){
var pvImg =document.createElement('img');
pvImg.src = pingServerUrl + "pv.GIF?t="+c+"&u="+ u +"&r="+this.refurl+"&pl="+this.pl+"&page="+index;
}
this.refresh = function(){
var pvImg =document.createElement('img');
pvImg.src = pingServerUrl + "pv.GIF?t="+c+"&u="+ u +"&r="+this.refurl+"&pl="+this.pl+"&type=refresh";
}
}
//png透明处理if (!window.XMLHttpRequest){
window.attachEvent("onload",enableAlphaImages);
}
function enableAlphaImages(){
for (var i=0;
i<document.all.length;
i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null){
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"',sizingMethod='crop')";
obj.style.background = "none";
}
else if (img && img.src.match(/\.png$/i) != null){
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"',sizingMethod='crop')"img.src = "../images/features4.2preview/pixel.gif";
}
}
}
分享到QQ
分享到微博
微信扫一扫
