一个挺有新意的图片展示方式

今天偶然在qq空间上看到了一个关于大图展示的效果,如下所示：

一个挺有新意的图片展示方式

上面的这个图片很长，大概有这么大：

一个挺有新意的图片展示方式

原始的展示方式应该效果很差，所以qq空间上用了自动滚动的效果，鼠标移动到不同的位置（相对于图片中间的上半部分还是下半部分）分别使图片上下滚动。看了qq空间里的实现，好像有css3 动画的影子。不过原理应该是差不多的，在一个固定大小的div中，不停的调整图片的margin-top 让图片实现上下滚动的效果，下面的一个是使用比较原始的方式来实现的：

<html>
	<head>
		<title>图片滚动</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<style type="text/css">
			#imgbox{
				overflow: hidden;
				height:300px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				var isUp = true;
				var imgBoxH = 300,
					imgBoxTop = $('#imgbox').offset().top,
					imgBoxLeft = $('#imgbox').offset().left;

				$('#img').mousemove(function(e){
					var cX = e.clientX,
						cY = e.clientY;
					var centerV = imgBoxH/2+imgBoxTop;
					if(cY>centerV){
						isUp = true;
					}else{
						isUp = false;
					}
				});
				setInterval(function(){
					var mTop = $('#img').css('margin-top');
					var mtopV = parseInt(mTop.substr(0,mTop.indexOf('px')));
					var nextMTop = 0;
					if(isUp){
						nextMTop = mtopV - 10;
					}else{
						nextMTop = mtopV + 10;
					}
					nextMTop = nextMTop > 0 ? 0 : nextMTop ;
					$('#img').css('margin-top',nextMTop+'px');
				},300);
			});

		</script>
	</head>
	<body>
		<div id='imgbox'>
			<img id='img' src="./psb.jpg" style="width:321px;margin-top:0px;"/>
		</div>
	</body>
</html>

一个挺有新意的图片展示方式

相关推荐