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.源代码下载>>猛击<<