banner鼠标移动图片跟随滚动css代码

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

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

以下是 banner鼠标移动图片跟随滚动css代码的示例演示效果:

当前平台(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>banner鼠标移动图片跟随滚动</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.smart3d.js"></script>
<style type="text/css">
#mindscape {
	width: 750px;
	height: 174px;
	overflow: hidden;
}
#monsteck_variketch {
	width: 750px;
	height: 200px;
	overflow: hidden;
}
</style>

<script type="text/javascript">
$(function() {
	$('#mindscape').smart3d(850);
	$('#monsteck_variketch').smart3d(850);
});
</script>

</head>
<body>

<div style="width:850px;margin:0 auto;">
	<h3>Demo 1</h3>
	<ul id="mindscape">
		<li><img src="mindscape/mindscape1.png" /></li>
		<li><img src="mindscape/mindscape2.png" /></li>
	</ul>
	
	<h3>Demo 2</h3> 
	<ul id="monsteck_variketch">
		<li><img src="monsteck_variketch/1.png" /></li>
		<li><img src="monsteck_variketch/2.png" /></li>
	</ul>
</div>
</body>
</html>

JS代码(jquery.smart3d.js):

/** * @name jquery-smart3d.js * @author Kotelnitskiy Evgeniy (http://4coder.info) * @version 0.2 * @date December 18,2009 * @category jQuery plugin * @license GPL * @example Visit http://4coder.info/en/jquery-smart3d-en/ for more informations about this jQuery plugin**/
(function($){
	$.fn.smart3d = function(frame_width,first_is_static,last_is_static){
	var jQueryMatchedObj = this;
	var width = jQueryMatchedObj.width();
	var offset = frame_width - width;
	if (last_is_static == undefined)last_is_static = false;
	if (first_is_static == undefined)first_is_static = false;
	jQueryMatchedObj.css('padding','0');
	jQueryMatchedObj.css('overflow','hidden');
	jQueryMatchedObj.css('position','relative');
	jQueryMatchedObj.css('list-style','none');
	var lis = jQueryMatchedObj.find('li');
	lis.css('padding','0');
	lis.css('margin','0');
	lis.css('position','absolute');
	lis.css('top','0');
	lis.css('width',frame_width);
	lis.css('left',(width - frame_width) / 2);
	jQueryMatchedObj.pos = 0;
	jQueryMatchedObj.mousemove(function(e){
	var x = e.clientX - jQueryMatchedObj.offset().left;
	jQueryMatchedObj.pos = x / width * offset - offset / 2;
}
);
	function _jpvol_animate(){
	for (var i=1;
	i<=lis.length;
	i++){
	if ((last_is_static) && (i == lis.length))continue;
	if ((first_is_static) && (i == 1))continue;
	var cur_l = parseFloat(jQuery(lis[i-1]).css('left'));
	var new_l = jQueryMatchedObj.pos * (i / lis.length) - offset / 2;
	//if (Math.abs(cur_l - new_l) > 1)jQuery(lis[i-1]).css('left',(new_l + cur_l*6) / 7);
}
}
setInterval(_jpvol_animate,40);
	return this;
}
;
}
)(jQuery);

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