基于jquery实现页面覆盖动画鼠标跟随滑动效果



32 127 43



特效描述:基于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

加群请备注:从官网了解到