JS仿QQ空間鼠標停在長圖片時候圖片自動上下滾動效果

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();
            });
        });
    }
 };

Demo下載