jquery搜狗浏览器5.0预览页滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery搜狗浏览器5.0预览页滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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搜狗浏览器5.0预览页</title>
<style type="text/css">
*{margin:0px;}
a{cursor:pointer;display:block;}

#cont_box{width:100%;height:900px;overflow-y:hidden;}
#header{width:970px;height:320px;margin:auto;position:absolute;left:50%;margin-left:-485px;}
#header .slogan{background:url(images/slogan.png) no-repeat;top:105px;left:185px;width:595px;height:71px;position:absolute;}
#header .logo{position:absolute;left:0px;top:15px;width:216px;height:48px;background:url(images/logo.png) no-repeat;}
#header .begin{position:absolute;left:790px;top:23px;width:153px;height:37px;background: url(images/begin.png) no-repeat}

#cont_left{width:100%;height:100%;}
#cont_box p{width:5px;height:100%;display:block;float:left;}
#cont_box p.demo{background-image:url(images/img_bg.png);background-repeat:no-repeat;}
</style>

<script type="text/javascript" src="js/jquery_1.7.2.js"></script>

</head>
<body>

<div id="header">
	<a class="begin" href="#"></a>
	<div class="slogan"></div>
</div>

<div id="cont_box"></div>

<script type="text/javascript">
var debounce = function(func, wait, immediate) {
	var timeout, args, context, timestamp, result;
	
	return function() {
		context = this;
		args = arguments;
		timestamp = new Date();
		var later = function() {
			var last = (new Date()) - timestamp;
			if (last < wait) {
				timeout = setTimeout(later, wait - last);
		} else {
			timeout = null;
			if (!immediate) result = func.apply(context, args);
		}
	};
	
	var callNow = immediate && !timeout;
	if (!timeout) {
		timeout = setTimeout(later, wait);
	}
	if (callNow) result = func.apply(context, args);
		return result;
	};
};

function render(mouseX){
	for(var i=1;i<winwidth;i++){
		if(i<=mouseX){

			//if(i-margin>100&&i-margin<150){
			//console.log(i-margin);
			//}
			
			$("#img"+i).css("background-color","#3a87cd");
			$("#imgx"+(i-margin)).css({"background-position":"-"+(i-margin)+"px 0px","background-color":"#3a87cd"});
			
			//console.log(i-margin);
			//$(".img"+i+".demo").css("background-image","url(images/left.png)");
			//$(".img"+i+".demo").css("background-position","");
			//console.log(i);
		}else{
			$("#img"+i).css("background-color","#67be65");
			$("#imgx"+(i-margin)).css({"background-position":"-"+(i+926-margin)+"px 0px","background-color":"#67be65"});
			//$(".img"+i+".demo").css("background-image","url(images/right.png)");
		}
	}
}

var margin=0;
var winwidth;
var winheight;

$(document).ready(function(){
	//showtime();
	init();
	initImg();
	slide(0);
	$(window).resize(function(){
		init();
		initImg();
		render(parseInt(winwidth/2));
	});
});

function bindmonse(){
	$("body").mousemove(debounce(function(event){
		var mouseX = event.clientX;
		//var mouseY = event.clientY;
		render(mouseX);
		// });
	},0));
}

function slide(i){
	if(i-10>winwidth){
		bindmonse()
		return;
	}
	//render(i);
	debounce(function(){
		render(i);
	},0)();
	setTimeout(function(){
		i=i+10;
		slide(i);
	},0);
}

function init(){
	winwidth = Math.floor($(window).width());
	margin =winwidth-920>0?parseInt((winwidth-920)/2):0;
	winheight = $(window).height()>900?Math.floor($(window).height()):900;
	if(winwidth>920){
		$("body").css("overflow-x","hidden");
	}
}

function initImg(){
	var html ="";
	for(var i=1,j=0;i<=winwidth;i=i+5){
		if(i<=margin){
			html +='<p id="img'+i+'"></p>';
		}else{
			if(j<=920){
				html +='<p id="imgx'+j+'" class="demo"></p>';
				j=j+5;
			}else{
				html +='<p id="img'+i+'"></p>';
		}
	}
}

	$("#cont_box").html(html);
	$("#cont_box").css("height",winheight);
}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)