JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果，因为一张很长的图片不可能全部把他展示出来，所以外层用了一个容器给他一个高度，超过高度后隐藏掉。当我停留在长图片下部时候 他会自动向上滚动效果，同理 鼠标移到图片上部时候 会自动向下滚动。特地研究下。我们先来看看QQ空间的效果吧！如下图所示：
基本原理
实现他的原理很简单：就是页面一进来时候 在长图片下动态生成2个div 第一个绝对定位在图片的上部位置，第二个绝对定位在外层容器的高度1/2的地方，那么当我鼠标移到第二张图片时候 向上滚动 否则的话 移到第一张图片时候 向下滚动。为了更好的说明问题 我们可以先看看如下原理图：
其中：中间有个简单的时间算法问题：
1. 向上移动效果计算下时间。
先判断当前的图片有没有向上滚动(通过top来判断 默认情况下为0)，如果已经向上滚动的话
var time = （图片的总高度 - 已经滚动的top）/ 配置项的speed
注意：speed传进来的参数越大 那么滚动的越慢 默认为150.
否则的话 如果没有滚动的话 那么
var time = 图片的总高度 / 配置项的speed
那么接下来的动画animate 就是 ({top:-$imgHeight + $(tagParent).height()},$time * 1000,"linear");
记住：当前图片的高度一定要减去 - 父容器的高度 也就是说 在一定的时间内 滚动这么长的距离 减去父容器的高度目的是为了当滚动最后一个的高度的时候 就停止滚动 否则的话 他会一直滚动到最后 会留一个空白的页面(这不是我们想要的效果).
2. 向下移动效果计算下时间。
直接获取已经滚动的top 然后time的计算如下：
var time = 已经滚动的top/配置项的speed；
然后动画animate animate({top:0},$time * 1000,"linear")；
在规定的时间内 滚动到top为0的位置上。
jsfiddle 效果链接如下：
http://jsfiddle.net/longen/mf9Gk/9/embedded/result/ 可以复制 运行下
代码如下：
HTML
<div class="outDiv">
<div class="innerDiv" data-img = 'true'>
<img src="test.jpg" class="targetImg"/>
</div>
</div>
css
<style type="text/css">
*{padding:0px;margin:0px;list-style-type:none;}
.outDiv{border:1px solid #ddd;width:500px;height:500px;padding:20px;margin:20px auto;background:#7ce;}
.innerDiv{width:500px;height:500px;position:relative;background:#fff;overflow:hidden;}
</style>
JS
/**
* JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
* @date 2014-1-1
* @author tugenhua
* @email 879083421@qq.com
*/ function LongPicShow(options) { this.config = {
targetImg : '.targetImg', // 当前图片的元素
speed : 150 // 默认为150 值越小 执行的越慢 time = 图片height/speed
}; this.cache = { };
this.init(options);
} LongPicShow.prototype = { init: function(options) {
var self = this,
_config = self.config,
_cache = self.cache; // 插入div
self._insertDiv(); // 设置css样式
self._setCss(); // 鼠标移上去的事件
self._hover();
},
// 页面初始化 插入div
_insertDiv: function(){
var self = this,
_config = self.config; $(_config.targetImg).each(function(index,item){
var tagParent = $(item).parent();
$(tagParent).append('<div class="topDiv"></div><div class="bottomDiv"></div>');
});
},
// 设定css样式
_setCss: function(){
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.targetImg).each(function(index,item){
var tagParent = $(item).parent(),
parentWidth = $(tagParent).width(),
parentHeight = $(tagParent).height();
$(tagParent).css({
'position':'relative'
});
$('.topDiv',tagParent).css({
'height':parentHeight/2 + 'px',
'width':parentWidth + 'px',
'cursor':'pointer',
'background':'#fff',
'position':'absolute',
'filter':'alpha(opacity=0)',
'top': 0,
'opacity':0
});
$('.bottomDiv',tagParent).css({
'height':parentHeight/2 + 'px',
'width':parentWidth + 'px',
'cursor':'pointer',
'background':'#fff',
'position':'absolute',
'filter':'alpha(opacity=0)',
'opacity':0,
'top':parentHeight/2 + 'px'
}); });
},
/*
* 鼠标移上触发的事件
*/
_hover: function(){
var self = this,
_config = self.config,
_cache = self.cache; $(_config.targetImg).each(function(index,item){ var tagParent = $(item).parent();
// 向上移动 鼠标移到第二个div上
$($(tagParent).find('div')[1]).hover(function(){ var $imgHeight = $(item).height(),
topStr= $(item).css("top").split("px")[0],
$top,
$time;
if(topStr.split("-")[1]) {
$top = parseFloat(topStr.split("-")[1]);
$time = ($imgHeight-$top)/_config.speed;
}else {
$time = $imgHeight/_config.speed;
}
$(item).css('position','absolute');
$(item).animate({top:-$imgHeight + $(tagParent).height()},$time * 1000,"linear");
},function(){
$(item).stop();
}); // 向下移动 鼠标移到第一个div上
$($(tagParent).find('div')[0]).hover(function(){ var $imgHeight = $(item).height(),
topStr= $(item).css("top").split("px")[0],
$top,
$time; $top = parseFloat(topStr.split("-")[1]);
$time = $top/_config.speed;
$(item).css('position','absolute');
$(item).animate({top:0},$time * 1000,"linear");
},function(){
$(item).stop();
});
});
}
};