基于jquery實現頁面覆蓋動畫鼠標跟隨滑動效果



37 146 49



特效描述:基于jquery實現 頁面覆蓋動畫 鼠標跟隨滑動,基于jquery實現頁面覆蓋動畫鼠標跟隨滑動效果

代碼結構

1. 引入JS

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

2. HTML代碼

<div id="header">
	<a class="begin" href="http://51qianduan.com/"></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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子