前面引用:
<iframe width="960" height="140" scrolling="no" frameborder="0" src="scroll.html" marginwidth="0" hspace="0" allowtransparency="true"></iframe>
引用页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>百度世界之窗</title>
<style type="text/css">
body{margin:0;}
form,h1,h2,h3,h4,ul,li,dl,dt,dd{margin:0;padding:0}
body,div,td,th{font-family:Arial;}
div{text-align:left}
img{border:0}
ul{list-style:none}
.slide{margin:0;}
#slide_left{width:30px;height:164px;}
#slide_right{width:30px;height:164px;}
#slide_left b{display:block;width:100%;height:100%;cursor:pointer;background:url(http://60.baidu.com/resource/r/60/img/slide_left.jpg) no-repeat 7px 35px;}
#slide_right b{display:block;width:100%;height:100%;cursor:pointer;background:url(http://60.baidu.com/resource/r/60/img/slide_right.jpg) no-repeat 7px 35px;}
#slide_left .arr_left{background:url(http://60.baidu.com/resource/r/60/img/slide_left.jpg) no-repeat 7px 35px;}
#slide_right .arr_right{background:url(http://60.baidu.com/resource/r/60/img/slide_right.jpg) no-repeat 7px 35px;}
.slide_mask{width:900px;overflow:hidden;height:122px;}/* 显示区域的宽度 */
.slide_mask ul{float:left;margin:0}
.slide_mask li{float:left;width:132px;display:inline;text-align:center;padding:0 23px;font-size:12px}
.slide_mask li a{text-decoration:none;color:#000;}
.slide_mask img{border:1px solid #d50000;margin-bottom:3px}
.slide_mask a{font-size:12px;line-height:20px;}
.slide_holder{width:4000px;height:122px}
.col1{color:#e10601}
</style>
<script type="text/javascript">
function G(id){ return document.getElementById(id); }
var flag=0;
var Msg_loopNum = 5;
function showMsg(){
if (typeof(redmsg)!= 'undefined') {
if (!redmsg || redmsg.length < 1) { return; }
document.getElementById('mnum').innerHTML = redmsg;
}
else
{
if(Msg_loopNum > 0) {setTimeout(function(){showMsg();},100);Msg_loopNum--;}
}
}
function g(){var ls=location.search;if(ls.indexOf("q=")!=-1){try{var q=(ls.match(new RegExp("q=[^&$]*")).toString());document.f1.word.value=decodeURIComponent(q.substr(2));}catch(e){}}}
function s(o,p){if(document.f1.word.value.length>0){var oh=o.href;var wd=encodeURIComponent(document.f1.word.value);if(oh.indexOf("q=")!=-1){o.href=oh.replace(new RegExp("q=[^&$]*"),"q="+wd);}else{var s=p?"&":"?";o.href=o.href+s+"q="+wd};}}
function cutText(jsonText,ffOnly) {
if (ffOnly) {
if (typeof(document.getElementsByTagName('body')[0].style.textOverflow)!='undefined' && typeof(window.opera)!='undefined') { return; }
}
for (var name in jsonText) {
var length=jsonText[name];
var elems=document.getElementsByName(name);
for (var i=elems.length-1; i>=0; i--) {
if (elems[i].scrollWidth>length) { elems[i].innerHTML+="..."; }
while (elems[i].scrollWidth>length) {
elems[i].innerHTML=elems[i].innerHTML.substr(0,elems[i].innerHTML.length-4)+"...";
}
}
}
}
function formatPic(jsonPic){
for (var name in jsonPic) {
var maxWidth=jsonPic[name].width;
var maxHeight=jsonPic[name].height;
var valign=jsonPic[name].valign;
var image=document.getElementsByName(name);
for(var i=0;i<image.length;i++)
{
if(image[i].width>0 && image[i].height>0){
var rate = (maxWidth/image[i].width < maxHeight/image[i].height)?maxWidth/image[i].width:maxHeight/image[i].height;
if(rate <= 1){
image[i].width = image[i].width*rate;
if (valign==1) { image[i].style.marginTop = (maxHeight-image[i].height)/2 + "px"; }
}
}
}
}
}
var sid=((new Date()).getTime()+"_"+Math.round(Math.random()*2147483637));
function sendPfScrollStat() { if(document.images){(new Image()).src='/js/blank.js?func=pfscroll&sid='+sid+'&t='+(new Date()).getTime();} }
</script>
</head>
<body bgcolor="transparent">
<table border="0" cellpadding="0" cellspacing="0" class="slide">
<tr valign="top">
<td valign="top"><div id="slide_left"><b id="arrow_left"></b></div></td>
<td valign="top">
<div class="slide_mask" id="slidePic">
<div class="slide_holder">
<ul id="holder1">
<li><a href="http://list.mp3.baidu.com/zt/2009/60years.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic1.jpg" alt="百度MP3 ——经典红歌 穿越音乐华章" title="百度MP3 ——经典红歌 穿越音乐华章"></div>经典红歌 穿越音乐华章</a></li>
<li><a href="http://tieba.baidu.com/f?kz=637667104" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic2.jpg" alt="百度贴吧 ——让中国红红遍贴吧" title="百度贴吧 ——让中国红红遍贴吧"></div>让中国红红遍贴吧</a></li>
<li><a href="http://news.baidu.com/z/60years/" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic3.jpg" alt="百度新闻 ——新闻专题 红赞 " title="百度新闻 ——新闻专题 红赞 "></div>新闻专题 红赞 </a></li>
<li><a href="http://www.baidu.com/search/baike/zhuti-guoqing60/" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic4.jpg" alt="百度百科、知道 ——祖国60年光辉历程" title="百度百科、知道 ——祖国60年光辉历程"></div>祖国60年光辉历程</a></li>
<li><a href="http://hi.baidu.com/%B0%D9%B6%C8%BF%D5%BC%E4/blog/item/203cf8dcc38146a8cd1166e8.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic5.jpg" alt="百度空间 ——祝福祖国 全球Hier行动起来" title="百度空间 ——祝福祖国 全球Hier行动起来"></div>祝福祖国 全球Hier行动起来</a></li>
<li><a href="http://hi.baidu.com/baiduhi/blog/item/0e8bcd95df6424027bf480dc.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/image/2009-09-25/ea0cc09b4cc74e8422a7c236e876f46f.jpg" alt="传承中国心,共贺祖国60华诞" title="传承中国心,共贺祖国60华诞"></div>百度Hi 共贺祖国60华诞</a></li>
<li><a href="http://yule.baidu.com/zt/star/china60/index.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/image/2009-09-26/901d4b6b7b80f71f54327c743f5d810d.jpg" alt="百度娱乐迎国庆特别策划" title="百度娱乐迎国庆特别策划"></div>百度娱乐迎国庆特别策划</a></li>
<li><a href="http://news.baidu.com/z/60years/" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic3.jpg" alt="百度新闻 ——新闻专题 红赞 " title="百度新闻 ——新闻专题 红赞 "></div>新闻专题 红赞 </a></li>
<li><a href="http://baike.baidu.com/task/688" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic4.jpg" alt="百度百科、知道 ——祖国60年光辉历程" title="百度百科、知道 ——祖国60年光辉历程"></div>祖国60年光辉历程</a></li>
<li><a href="http://hi.baidu.com/%B0%D9%B6%C8%BF%D5%BC%E4/blog/item/203cf8dcc38146a8cd1166e8.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/image/2009-09-18/0426360a189e670f0db6f001a404f1a4.jpg" alt="百度空间 ——祝福祖国 全球Hier行动起来" title="百度空间 ——祝福祖国 全球Hier行动起来"></div>祝福祖国 全球Hier行动起来</a></li>
<li><a href="http://list.mp3.baidu.com/zt/2009/60years.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic1.jpg" alt="百度MP3 ——经典红歌 穿越音乐华章" title="百度MP3 ——经典红歌 穿越音乐华章"></div>经典红歌 穿越音乐华章</a></li>
<li><a href="http://hi.baidu.com/baiduhi/blog/item/0e8bcd95df6424027bf480dc.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/image/2009-09-25/ea0cc09b4cc74e8422a7c236e876f46f.jpg" alt="传承中国心,共贺祖国60华诞" title="传承中国心,共贺祖国60华诞"></div>百度Hi 共贺祖国60华诞</a></li>
<li><a href="http://yule.baidu.com/zt/star/china60/index.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/image/2009-09-26/901d4b6b7b80f71f54327c743f5d810d.jpg" alt="百度娱乐迎国庆特别策划" title="百度娱乐迎国庆特别策划"></div>百度娱乐迎国庆特别策划</a></li>
<li><a href="http://baike.baidu.com/task/688" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic4.jpg" alt="百度百科、知道 ——祖国60年光辉历程" title="百度百科、知道 ——祖国60年光辉历程"></div>祖国60年光辉历程</a></li>
<li><a href="http://hi.baidu.com/%B0%D9%B6%C8%BF%D5%BC%E4/blog/item/203cf8dcc38146a8cd1166e8.html" target="_blank"><div><img name="slidepic" src="http://60.baidu.com/resource/r/60/img/scroll_pic5.jpg" alt="百度空间 ——祝福祖国 全球Hier行动起来" title="百度空间 ——祝福祖国 全球Hier行动起来"></div>祝福祖国 全球Hier行动起来</a></li>
</ul>
<script type="text/javascript">cutText({pftitle:72},1);</script>
<ul id="holder2">
</ul>
</div>
</div></td>
<td><div id="slide_right"><b id="arrow_right"></b></div></td>
</tr>
</table>
<script type="text/javascript">
var Slider=(function() {
var speed = 12;
var space = 6;
var slideWidth = 176;
var moveLock = false;
var moveTimer;
var dist = 0;
var slideTimer=null;
var isScroll = false;
var holder1 = G("holder1");
var slidePic = G("slidePic");
G("holder2").innerHTML = holder1.innerHTML;
slidePic.scrollLeft = holder1.scrollWidth;
function slidePlay(){
clearInterval(slideTimer);
slideTimer = setInterval(function(){slideDown();slideStopDown();},3000);
}
function slideStop(){
clearInterval(slideTimer);
}
function slideUp(){
if(moveLock) return;
clearInterval(slideTimer);
moveLock = true;
moveTimer = setInterval(function(){scrollUp();},speed);
}
function slideStopUp(){
if(isScroll);
clearInterval(moveTimer);
if(slidePic.scrollLeft % slideWidth != 0){
dist = -(slidePic.scrollLeft % slideWidth);
setDist();
}else{
moveLock = false;
}
slidePlay();
}
function scrollUp(){
if(slidePic.scrollLeft <= 0){slidePic.scrollLeft = holder1.offsetWidth}
slidePic.scrollLeft -= space;
}
function slideDown(){
clearInterval(moveTimer);
if(moveLock) return;
clearInterval(slideTimer);
moveLock = true;
scrollDown();
moveTimer = setInterval(function(){scrollDown();},speed);
}
function slideStopDown(){
if(isScroll);
clearInterval(moveTimer);
if(slidePic.scrollLeft % slideWidth != 0 ){
dist = slideWidth - slidePic.scrollLeft % slideWidth;
setDist();
}else{
moveLock = false;
}
slidePlay();
}
function scrollDown(){
if(slidePic.scrollLeft >= holder1.scrollWidth){slidePic.scrollLeft = 0;}
slidePic.scrollLeft += space ;
}
function setDist(){
if(dist == 0){
moveLock = false;
isScroll = false;
return;
}
var num;
var tempSpeed = speed,tempDist = space;
if(Math.abs(dist)<slideWidth/5){
tempDist = Math.round(Math.abs(dist/5));
if(tempDist<1){tempDist=1};
}
if(dist < 0){
if(dist < -tempDist){
dist += tempDist;
num = tempDist;
}else{
num = -dist;
dist = 0;
}
slidePic.scrollLeft -= num;
setTimeout(function(){setDist();},tempSpeed);
}else{
if(dist > tempDist){
dist -= tempDist;
num = tempDist;
}else{
num = dist;
dist = 0;
}
slidePic.scrollLeft += num;
setTimeout(function(){setDist();},tempSpeed);
}
}
function init() {
var p=G('slidePic');
p.οnmοuseοver=function(){Slider.stop();};
p.οnmοuseοut=function(){Slider.play();};
var l=G('slide_left'),r=G('slide_right');
l.οnmοuseοver=r.οnmοuseοver=function(){Slider.stop();this.className='arr_bg';};
l.οnmοuseοut=r.οnmοuseοut=function(){this.className='';Slider.play();};
var lb=G('arrow_left');
lb.οnmοusedοwn=function(){this.className='arr_left';Slider.up();};
lb.οnmοuseup=function(){Slider.stopUp();};
lb.οnmοuseοut=function(){Slider.stopUp();this.className='';};
var rb=G('arrow_right');
rb.οnmοusedοwn=function(){this.className='arr_right';Slider.down();};
rb.οnmοuseup=function(){Slider.stopDown();};
rb.οnmοuseοut=function(){Slider.stopDown();this.className='';};
lb.οnclick=rb.οnclick=function(){setTimeout(sendPfScrollStat,1000);};
slidePlay();
}
return {
init:init,
play:slidePlay,
stop:slideStop,
up:slideUp,
stopUp:slideStopUp,
down:slideDown,
stopDown:slideStopDown
}
})();
window.οnlοad=function() {
Slider.init();
}
</script>
</body>
</html>