• 注册
热门标签
↑ 收起导航

基于wordpress固定无抖动的rss.xml数据调用

直接上代码,算是备份。

<!-- 固定漂浮 -->
<!-- 要放在其它样式后面加载 -->
<!--[if ie 6]>
<style>
	/*text.txt for IE6 防抖*/
	body { background-image:url(text.txt); background-attachment:fixed; }
	/*置底*/
	#haibor_fix_bar { width:100%; bottom:0; position:absolute; top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); }
	/*置顶*/
	/*#haibor_fix_bar { width:100%; top:0; position:absolute; top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+"px"); }*/
</style>
<![endif]-->

<script type="text/javascript">
//obj:div元素id,height:滚动高度,animate:滚动速度,3000为延迟、停顿的时间
function AutoScroll(obj,height,animate){
	$(obj).find("ul:first").animate({ //要滚动的元素
		marginTop:"-"+height+"px"	// 元素上边距为 -height ,产生向上滚动的效果
	},animate,function(){
		$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); // 加到最后
	});
}
$(document).ready(function(){
	$('#haibor_info').css('width',$(window).width() - $('#haibor_sns').outerWidth() -50);
	timer=setInterval('AutoScroll("#haibor_info",35,500)',3000);
	//鼠标悬停,停止滚动
	$('#haibor_info').hover(function(){
		clearInterval(timer);},function(){timer=setInterval('AutoScroll("#haibor_info",35,500)',3000);
	});
});
</script>

<div id="haibor_fix_bar">
	<div id="haibor_sns">
		<ul>
			<li><a rel="external nofollow" id="sns_tencent" href="http://t.qq.com/haibor" target="_blank" title="腾讯微博"></a></li>
			<li><a rel="external nofollow" id="sns_sina" href="http://weibo.com/coolove" target="_blank" title="新浪微博"></a></li>
			<li><a rel="external nofollow" id="sns_rss" title="订阅本站" target="_blank" href="http://feed.yangjunwei.com"></a></li>
			<!-- <li><a id="sns_close" href="javascript:void(0)" onclick="$('#haibor_fix_bar').slideUp('slow');" title="关闭">×</a></li> -->
		</ul>
	</div>

	<div id="haibor_info">
	<?php
	function haibor_info($num = 5){
		date_default_timezone_set('PRC');
		require_once (ABSPATH . WPINC . '/class-feed.php');
		$feed = new SimplePie();
		$feed->set_feed_url( 'http://yangjunwei.com/t/rss.xml' );// feed地址
		$feed->set_file_class('WP_SimplePie_File');//使用wordpress扩展的File类
		$feed->set_cache_duration( 3600 );//缓存时间,3600秒,检测是否有更新
		$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/cache/'); //缓存的目录
		$feed->init();
		$feed->handle_content_type();
		$items = $feed->get_items( 0, $num );
		echo '<ul>';
		foreach ($items as $item) {
			echo '<li><a title="杨俊伟 - 微博:'.strip_tags($item->get_date('j F Y | g:i a')).'" href="'.$item->get_permalink().'" target="_blank">'.strip_tags($item->get_content()).'</a></li>';
		}
		echo '</ul>';
	}
	haibor_info( 10 );//输出数量
	?>
	</div>
</div>

CSS样式部分:

/* 滚动调用 */
#haibor_fix_bar { background:#464646; border-top:3px solid #383838; text-align:left; z-index:1000; position:fixed; bottom:0;/*置顶top:0*/ left:0; width:100%; height:35px; line-height:35px; overflow:visible; /* opacity:.80;filter:alpha(opacity=80); -moz-opacity:.8;*/ }
	#haibor_sns { float:right; text-align:right; margin:0; padding:10px 10px 0px 0px }
		#haibor_sns li { float:left; margin:0 5px; display:inline; list-style-type:none; }
			#haibor_sns li a { width:20px; height:20px; display:block; background:url(images/sns_icon.png) no-repeat; text-indent:-9999em; }
			#haibor_sns li a:hover {  }
			#haibor_sns #sns_close { background-position:0 -300px; }
			#haibor_sns #sns_fav{background-position:0 0;}
			#haibor_sns #sns_mail{background-position:0 -25px;}
			#haibor_sns #sns_rss{background-position:0 -50px;}
			#haibor_sns #sns_sohu{background-position:0 -75px;}
			#haibor_sns #sns_twitter{background-position:0 -100px;}
			#haibor_sns #sns_sina{background-position:0 -125px;}
			#haibor_sns #sns_net163{background-position:0 -150px;}
			#haibor_sns #sns_baidu{background-position:0 -175px;}
			#haibor_sns #sns_douban{background-position:0 -200px;}
			#haibor_sns #sns_facebook{background-position:0 -225px;}
			#haibor_sns #sns_tencent{background-position:0 -250px;}
			#haibor_sns #sns_digu{background-position:0 -275px;}
	#haibor_info { float:left; background:url(images/notice_ico.gif) no-repeat 0px 8px; height:35px; overflow:hidden; margin-left:5px; margin-bottom:0px; padding-left:30px; }
		#haibor_info ul li{ list-style-type:none; color:#000000; font:13px/30px Arial,SimSun;}
			#haibor_info ul li a{ height:35px; line-height:35px; color:#CCCCCC; font-size:14px; letter-spacing:1px; text-decoration:none;}
			#haibor_info ul li a:hover{color:#CCCCCC;}

效果图:

推荐阅读:

纯CSS代码实现页面底部固定无抖动漂浮特效

页面底部固定无抖动调用公告特效

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/987.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册