`
tenderuser
  • 浏览: 59325 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

阅读更多

今天偶然在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>

 

  • 大小: 180.1 KB
  • 大小: 18.7 KB
分享到：
操作符优先级
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics