偷师学艺之截取鲜果网的图片新闻幻灯效果
偶然之间发现鲜果网（http://www.xianguo.com）， 第一眼就被其首页上的图片新闻幻灯效果所深深吸引。于是决定偷师学艺，截取下来为我所用。
第一步，查看网页源文件，取我所需
用IE进入到鲜果网后，直接右键查看源文件，将其整个拷贝出来慢慢研究。
打开源文件后，看到其内容很清爽，看上去感觉代码很规范，于是想到了去W3C（http://jigsaw.w3.org/css-validator/）验证一下，得到的结果是CSS版本2.1，经过校验后，还是不完全规范。但对于我们学习来说，应该够用了。
通过本人对HTML的了解，先从HEAD区研究起，也就是下面这部分的内容
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鲜果热点 让阅读流行起来</title> <meta name="keywords" content="RSS RSS阅读器 Feed 阅读器 在线阅读器 博客订阅 Blog 鲜果"/> <meta name="description" content="鲜果 中国领先的RSS阅读分享平台,RSS阅读器"/> <link rel="alternate" type="application/rss+xml" href="http://feed.feedsky.com/xianguoblog" title="鲜果日志" /> <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" /> <link rel="stylesheet" type="text/css" href="http://xgres.com/sns-static/v2/css/common.css?v=36" /> <link rel="stylesheet" type="text/css" href="http://xgres.com/sns-static/v2/css/classic.css?v=52"/> <link rel="stylesheet" type="text/css" href="http://xgres.com/sns-static/v2/css/hot.css?v=26" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> </head>
首先，这三个CSS是必须的，HEAD区结尾部分的JS代码应该也是必须的，都需要下载下来。
再来研究BODY区的内容。因为本人只需要图片新闻的幻灯效果那部分，所以要去掉其他暂时不需要的内容，需要慢慢剥离。使用EDITPLUS来对BODY区的内容进行分析，29行~67行定义的Header区不是我们需要的。68行开始的那段脚本是搜索框所需要的，这里也不需要。
接下来这段CSS代码是需要的，是用于显示页面背景图的。同时，需要从其网站上下载FOCUS.PNG这张图。
<style type="text/css">
#main{
background:#fff url(/static/v2/images/focus.png) repeat-x scroll 0 -360px;
}
</style>
再往下来看，这就是我们所需要的图片新闻幻灯效果区的内容了，通过EDITPLUS打开后，是149行~370行中的内容，也就是下面这部分内容。（由于内容较多，只截取了其中两段图片新闻，并加以注释以便分析其结构）
<div id="cycle-slide-wrap">
<div id="cycle-slide-wrapper">
<div id="cycle-slide">
<div id="cycle-slide-show">
<!-- 单个新闻起始处 -->
<div class="cycle-item-wrap">
<!-- 新闻图片区 -->
<div class="cycle-thumb"><a target="_blank" href="http://item.feedsky.com/~feedsky/dongxinet/~8172838/586585094/6276617/1/item.html"><img src="http://xgres.com/xianguo_com/topitem/82/p_1323832382.jpg" /></a></div>
<!-- 结束新闻图片区 -->
<div class="cycle-item">
<div class="item">
<div class="with_round_rect">
<!-- 新闻标题区 -->
<div class="item_title">
<h4><a target="_blank" href="http://item.feedsky.com/~feedsky/dongxinet/~8172838/586585094/6276617/1/item.html" style="font-size:16px;" title="【纽约时报】北京人，你现在看到烟雾了吗？">【纽约时报】北京人，你现在看到烟雾了吗？</a></h4>
</div>
<!-- 结束新闻标题区 -->
<!-- 新闻摘要区 -->
<div class="summary">
<a href="/1078667" class="item-feed" title="东西网" target="_blank">东西网</a>
这个星期，在北京我的房东给我打电话说：北京由于大雾高速关闭，飞机延误。他还说：污染太严重了，别打开窗户，也不要做户外活动。一个月前，我把一个洗衣机大小的空气净化机推进我的客厅时，这个房东还很疑惑的看着我。因为像我这种2000美元一台的空气净化机，在中国人的家中并不是很常见。这几个星期的严重污染使北京的两类人携起手来：住在北京的外国人和坚忍的当地人。我在我的小区也碰到过这样一些中国人。 <a style="color:#c0c0c0;" target="_blank" href="http://item.feedsky.com/~feedsky/dongxinet/~8172838/586585094/6276617/1/item.html">查看原文»</a>
<span class="item-time">今天11:13</span>
</div>
<!-- 结束新闻摘要区 -->
<div class="item-operation clearfix">
<a class="icon-add" href="/doing/1go5B#formComment">评论</a>
</div>
</div>
</div>
</div>
<div class="c"></div>
</div>
<!-- 单个新闻结束处 -->
<div class="cycle-item-wrap">
<div class="cycle-thumb"><a target="_blank" href="http://go.rss.sina.com.cn/redirect.php?url=http://blog.sina.com.cn/s/blog_5054769e0102dvwc.html"><img src="http://xgres.com/xianguo_com/topitem/94/p_1323832294.jpg" /></a></div>
<div class="cycle-item">
<div class="item">
<div class="with_round_rect">
<div class="item_title">
<h4><a target="_blank" href="http://go.rss.sina.com.cn/redirect.php?url=http://blog.sina.com.cn/s/blog_5054769e0102dvwc.html" style="font-size:16px;" title="马未都：上海最具人气的老里弄">马未都：上海最具人气的老里弄</a></h4>
</div>
<div class="summary">
<a href="/1112418" class="item-feed" title="新浪文化博客" target="_blank">新浪文化博客</a>
先只知道时髦的新天地，谁知几年下来，时代在前进，如今时髦的是田子坊了。此地不分老幼中外都爱闲逛，游人如织。田子坊说起来是上海最典型老里弄，还是那种很拥挤里弄，没有一处阔气的地方。与早些年开发的新天地比较起来，一个村姑，一个大家闺秀。用上海话说，不好比的。但就是这个谁也瞧不上的村姑，今天成了上海最具人气的景观，用“摩肩接踵”形容一点儿不过分。朋友和我说这个业态是自然形成的，没有规划和 <a style="color:#c0c0c0;" target="_blank" href="http://go.rss.sina.com.cn/redirect.php?url=http://blog.sina.com.cn/s/blog_5054769e0102dvwc.html">查看原文»</a>
<span class="item-time">今天11:11</span>
</div>
<div class="item-operation clearfix">
<a class="icon-add" href="/doing/1glDv#formComment">评论</a>
</div>
</div>
</div>
</div>
<div class="c"></div>
</div>
</div>
<div id="cycle-slide-prev">
<div class="cycle-sthumb"></div>
<div class="cycle-shadow"></div>
<a href="javascript:void(0);"><</a>
</div>
<div id="cycle-slide-next">
<div class="cycle-sthumb"></div>
<div class="cycle-shadow"></div>
<a href="javascript:void(0);">></a>
</div>
<div id="cycle-slide-pager"></div>
</div>
</div>
</div>
做到这一步，新闻幻灯效果区的内容应该已经是完全搞定了。但如果你将上述内容复制到新建的HTML文件中，并不能看到动态效果。其原因在于在BODY区的最后，有两段JS脚本，这个才是动态效果的关键所在。其代码如下：
<script type="text/javascript" src="js/sns-xianguo-release_sns_2011-12-09-16-52-04.js"></script>
<script type="text/javascript">
(function($){
$('#goTopButton').click(function(event){
$('html, body').animate({scrollTop:0}, 300);
});
$(window).scroll(function(event){
if($(this).scrollTop() > 0){
if($.browser.ie6){
$('#goTopButton').css('top', $(this).scrollTop() + $(this).height() - 170);
}
if($('#goTopButton').css('display') == 'none'){
$('#goTopButton').fadeIn();
}
}else{
$('#goTopButton').fadeOut();
}
//顶部消息框位置
var dis = 10 - $(this).scrollTop();
if( 0<dis && dis<=10 ){
$("#header-noti").css("top",dis+"px");
}else{
$("#header-noti").css("top","0");
}
});
})(jQuery);
</script>
<script type="text/javascript">
(function($){
$doings.init({
nowShowDoingBox:false,
defaultValue:'记录瞬间 分享精彩 ...',
currentPage:'0',
startDoingsId:'',
needLogin:true });
})(jQuery);
function cycleScroll(currSlideElement, nextSlideElement, options, forwardFlag){
var total = options.slideCount;
var currIndex = options.currSlide;
var prevIndex = currIndex - 1;
var nextIndex = currIndex + 1;
if (prevIndex < 0) {
prevIndex = total - 1;
}
if (nextIndex >= total) {
nextIndex = 0;
}
var prevImg = $('#cycle-slide-show .cycle-item-wrap').eq(prevIndex).find('.cycle-thumb img').attr('src');
var nextImg = $('#cycle-slide-show .cycle-item-wrap').eq(nextIndex).find('.cycle-thumb img').attr('src');
$('#cycle-slide-prev .cycle-sthumb').html('<img src="' + prevImg + '" \/>');
$('#cycle-slide-prev .cycle-sthumb img').reflect({
height: 30,
opacity: 0.5
});
$('#cycle-slide-next .cycle-sthumb').html('<img src="' + nextImg + '" \/>');
$('#cycle-slide-next .cycle-sthumb img').reflect({
height: 30,
opacity: 0.5
});
}
(function($){
var idsList = [],
descMap = {},
loadDescQueue = [],
loading = false,
maxWidth = 588;
var $hotDoings = window.$hotDoings = {
init:function(){
$('#timeline .entry').each(function(){
var doingsId = this.getAttribute('doingsId');
var elem = $(this);
var registed = elem.data('registed');
if (registed) {
return;
}
elem.data('registed', true);
idsList.push(doingsId);
itemClick(elem.find('.text-title-wrap'), elem.find('.entry_content'), doingsId);
});
}
};
function itemClick(elem, elem2, doingsId){
var desc = $('#doings-desc-' + doingsId),
summary = $('#doings-summary-' + doingsId),
item = $('#doings-' + doingsId);
var oriBgcolor = elem.css('background-color');
elem.mouseover(function(){
this.style.backgroundColor = '#EEF6FF';
}).mouseout(function(){
this.style.backgroundColor = oriBgcolor;
}).click(function(event){
if (event.target.tagName.toLowerCase() == 'a') {
event.stopPropagation();
return;
}
if (desc.css('display') == 'none') { //展开全文
if (desc.html() == '') {
loadItemDesc(doingsId, function(content){
desc.html(content).find('img').load(resizeImage);
summary.hide();
desc.show();
});
} else {
summary.hide();
desc.show();
}
} else { //合上全文
summary.show();
desc.hide();
var top = item.offset().top;
if (top < $(document).scrollTop()) {
$(document).scrollTop(top);
}
}
});
elem2.dblclick(function(event){
if (desc.css('display') == 'none') { //展开全文
if (desc.html() == '') {
loadItemDesc(doingsId, function(content){
desc.html(content).find('img').load(resizeImage);
summary.hide();
desc.show();
});
} else {
summary.hide();
desc.show();
}
} else { //合上全文
summary.show();
desc.hide();
var top = item.offset().top;
if (top < $(document).scrollTop()) {
$(document).scrollTop(top);
}
}
});
}
function loadItemDesc(doingsId, callback){
if (loading) {
if ($.inArray(doingsId, loadDescQueue) == -1) {
loadDescQueue.push(doingsId);
}
return;
}
if (!(doingsId in descMap)) {
loading = true;
var loadIds = [], maxNum = 5;
var pos = $.inArray(doingsId, idsList);
if (pos == -1) {
loading = false;
return;
}
var begin = (parseInt(pos / maxNum)) * maxNum;
var end = Math.min(begin + maxNum, idsList.length);
for (var i = begin; i < end; i++) {
loadIds.push(idsList[i]);
}
if (loadIds.length > 0) {
$.ajax({
dataType:'json',
type:'post',
url:'/hot/ajax',
data:{
type:'loadDesc',
doingsIds:loadIds.join(',')
},
success:function(data){
if(data.c == 0){
$dialog.hint(data.e);
return false;
}
data = data.d;
descMap[doingsId] = true;
callback(data[doingsId]);
delete data[doingsId];
$.each(data, function(key, value){
descMap[key] = value;
});
$.each(loadDescQueue, function(i, s){
loadItemDesc(s);
});
loading = false;
}
});
} else {
loading = false;
}
} else {
callback(descMap[doingsId]);
descMap[doingsId] = true;
}
}
function resizeImage(){
if (this.width > maxWidth) {
var _w = this.width;
var _h = parseInt(this.height * maxWidth / _w);
this.width = maxWidth;
this.height = _h;
}
}
})(jQuery);
$(document).ready(function($){
$('#cycle-slide-show').cycle({
fx: 'scrollHorz',
prev: '#cycle-slide-prev',
next: '#cycle-slide-next',
timeout: 20000,
pager: '#cycle-slide-pager',
activePagerClass: 'current',
before: cycleScroll,
after: cycleScroll
});
if (!$.browser.msie) {
$('#cycle-slide-prev a,#cycle-slide-next a').mouseover(function(){
$(this).animate({
'opacity': 0
});
}).mouseout(function(){
$(this).animate({
'opacity': 1
});
});
}
if (screen.width < 1200) {
$('#cycle-slide-prev').hide();
$('#cycle-slide-next').hide();
}
});
var tagId = '0';
var totalPage = parseInt('2103');
var currPage = 0;
var nextPage = 1;
var maxAutoload = 2;
function _loadMoreItems(times, isScroll){
isScroll = isScroll || 1;
if (currPage == nextPage) {
return false;
}
if (nextPage >= totalPage) {
return false;
}
if (isScroll == 1 && currPage >= maxAutoload) {
return false;
}
currPage = nextPage;
$('#more-items-loading').show();
$('#more-items-button').hide();
$.ajax({
dataType: 'json',
url: "/hot/ajax",
data: {
type: 'loadMore',
tagId: tagId,
pi: nextPage
},
success: function(data){
if(data.c == 0){
$dialog.hint(data.e);
return false;
}
$('#timeline').append(data.d.html);
nextPage += 1;
$('#more-items-loading').hide();
if (currPage >= maxAutoload) {
$('#more-items-button').css('display', 'block');
}
$hotDoings.init();
}
});
}
(function($){
$hotDoings.init();
$('#more-items-button').click(function(e){
_loadMoreItems(0, 2);
});
$(document).endlessScroll({
bottomPixels: 100,
callback: _loadMoreItems
});
})(jQuery);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9142976-6']);
_gaq.push(['_setDomainName', '.xianguo.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
其中第一段链接的JS代码用于显示图片新闻，第二段内嵌的JS代码用于显示动态效果。至此，你就能够得到一个完整的图片新闻幻灯效果了。
第二步，分析展示区内容，做自己想做的
通过上述代码可知，图片新闻展示区在CSS中定义为cycle-slide-wrap区域
（未完，待续。。。）