[jQuery]Bing图片故事实现

Bing的图片故事挺不错的，之前曾为朋友做过一个类似的实现；今天不是很忙，故将其整理出来与大家分享。

前言
如果您关注Bing图片故事的原汁原味的实现，你可以停止继续往下看。因为本文是基于鄙人的思路去实现的；
如果您想在自己的项目中引用，请务必自己做测试。因为本人仅仅能保证代码处于演示水平质量；
如果你熟悉jQuery，css和html那么你可以继续，否则也请不要浪费你宝贵的时间。

 

正文
1. Bing图片故事分析
(1)鼠标在故事容器上移动的时候，根据鼠标的位置，触发是否显示/隐藏故事小方框；
(2)小方块显示，鼠标移动到小方块内，该方块的具体故事内容将呈现；离开方块，图片故事消失。【请注意，显示具体内容的时候，（1）将会disabled】

2. 实现
(1) 创建一个json数组，将图片故事放入该数据中。每个故事对象包含一些基本的属性；其中最重要的是每个故事方块的位置。

 

var bannerStory = [
            { 'ID': '1001', 'Top': '170', 'Left': '300', 'Story': 'This is the first story, which is a old story; it describes that a love story of one prince and petty girl; ' },
            { 'ID': '1002', 'Top': '320', 'Left': '100', 'Story': 'This is the second story, nothing is interesting;' },
            { 'ID': '1003', 'Top': '260', 'Left': '260', 'Story': 'This is the third story, every day is funny;' },
            { 'ID': '1005', 'Top': '160', 'Left': '590', 'Story': 'This is the fifth story, every day is funny;' },
            { 'ID': '1004', 'Top': '290', 'Left': '660', 'Story': 'This is the third story, last lay;' }            
        ];

(2) 将这些故事插入到其容器中；注意这里有两个div。第一个div用来作为故事背景图片的容器；第二个用来作为图片故事的容器。

 

<div id="header"></div>
<div id="header-story"></div>

将json数组的内容加载到图片故事容器中

 $.each(bannerStory, function (index) {
                var storyIcon = $('<ul class="icon" tag=' + bannerStory[index].ID + '></ul>');
                var story = $('<li class="text" tag=' + bannerStory[index].ID + '>' + bannerStory[index].Story + ' <br /> <a href="JavaScript:void(0);">view more details</a></li>');
                storyIcon.append(story);

                storyIcon.css({ 'margin-top': parseInt(bannerStory[index].Top) - 80, 'margin-left': parseInt(bannerStory[index].Left) });
                $('#header-story').append(storyIcon);
            });

(3) 注册鼠标移动事件；请注意当鼠标接近方块的时候，方块将会显示；【有可能同时出现两个方块，这个是合理的】

$('#header-story').bind('mousemove', function (e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;

                $(this).find('ul.icon').each(function () {
                    var item = $(this);
                    var iconX = item.css('marginLeft');
                    var iconY = item.css('marginTop');

                    var intIconX = parseInt(iconX.substring(0, iconX.indexOf('px')));
                    var intIconY = parseInt(iconY.substring(0, iconY.indexOf('px')));

                    if (MouseInTarget(mouseX, mouseY, intIconX, intIconY)) {
                        if (item.css('display') == "none") {
                            item.fadeIn(300);
                        }
                        else
                            return;
                    }
                    else {
                        if (item.css('display') != "none")
                            item.css('display', 'none');
                        return;
                    }
                });
                $('#cont-test').html('');
            });
            
            

        });

        function MouseInTarget(mouseX, mouseY, targetX, targetY) {
            if ((targetX + 100 > mouseX && targetX - 100 < mouseX)
                && (targetY + 100 > mouseY && targetY - 100 < mouseY))
                return true;
            return false;
        }

函数MouseInTarget，用以判断鼠标的位置是否在某一个故事方块上下左右距离在100px之内；

 

(4) 当方块显示后，如果鼠标移动到方块上；将显示该故事的详细内容；

$('#header-story ul.icon').each(function () {
                $(this).bind('mouseover', function () { $(this).find('li').css('display', 'block'); });
                $(this).bind('mouseout', function () { $(this).find('li').css('display', 'none'); });
            });

(5)当鼠标移动到详细的故事内容范围内的时候，disable鼠标移动事件

// remove mouse move event when user move mouse to one content
            $('#header-story ul.text').each(function () {
                $('#header-story').unbind('mousemove');
            });

3. 最终效果

4.源代码下载>>猛击<<

转载于:https://www.cnblogs.com/yang_sy/archive/2011/01/19/Picture_Story_of_Bing.html