Div+CSS无缝滚动终极版 -- 叁柒設計_三七设计 Three Seven Design Workroom -- 日志展示

HTML代码

<style type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style:none;}
.sqBorder {width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/*设置ul和li横排*/
</style>
<script language="javascript">
function ScrollImgLeft(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center">向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">

<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>

</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

向上滚动

HTML代码

<style type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style:none;}
.sqBorder {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
</style>
<script language="javascript">
function ScrollImgTop(){
var speed=20
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center">向上滚动</h2>
<div style="text-align:center">
<div class="sqBorder">

<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>

</div>
<script type="text/javascript">ScrollImgTop();</script>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<style type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style:none;}
.sqBorder_left {width:620px; height:62px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div_left {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div_left img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}
.scroll_div_left #scroll_begin, .scroll_div_left #scroll_end, .scroll_div_left #scroll_begin ul, .scroll_div_left #scroll_end ul, .scroll_div_left #scroll_begin ul li, .scroll_div_left #scroll_end ul li{display:inline;}/*设置ul和li横排，此行样式重要*/
.sqBorder_top {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div_top {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div_top img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
</style>

<script language="JavaScript">
//正则得到地址栏传递参数的函数
function getPara(paraName){
var url = location.href;
var str="(?:\\?|&){1}"+paraName+"=([^&]*)"
var re=new RegExp(str,"gi");
re.exec(url);
return RegExp.$1;
}
//设置CSS
function setScroll(mode){
if(!mode||mode=="left"||mode=="right"){
document.getElementById("sqBorder").className="sqBorder_left";
document.getElementById("scroll_div").className="scroll_div_left";
}else if(mode=="top"||mode=="bottom"){
document.getElementById("sqBorder").className="sqBorder_top";
document.getElementById("scroll_div").className="scroll_div_top";
}
}
//设置滚动
function PicScroll(mode){
window.location.href="?action="+mode+"";
return false;
}
</script>
<script language="javascript">

</script>
<h2 align="center">玩转四向区域滚动,请保存到本地测试。</h2>
<div align="center"><input type="button" value="←向左滚动" onClick="PicScroll('left');">  <input type="button" value="向右滚动→" onClick="PicScroll('right');">  <input type="button" value="↑向上滚动" onClick="PicScroll('top');">  <input type="button" value="向下滚动↓" onClick="PicScroll('bottom');"></div><br />
<div style="text-align:center">
<div id="sqBorder" class="sqBorder_left">

<div id="scroll_div" class="scroll_div_left">
<div id="scroll_begin">
<ul>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://www.1netmedia.net/"><img src="http://www.1netmedia.net/images/main_logo.gif" alt="『一网传媒』" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>

</div>
<script type="text/javascript">setScroll(getPara("action"));ScrollImg(getPara("action"));</script>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

无缝图片滚动，图片个数不够也可以正常使用
但需使用table来完成，而且FF不支持。
作者：经典_明皓apc001
原文地址：http://bbs.blueidea.com/thread-2758058-1-1.html

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script language="javascript">
var $ = function (d){
typeof d == "string" &&(d = document.getElementById(d));
return $.fn.call(d);
};
$.fn = function (){//附加2个方法
this.$ADD = function (fn){CLS.add(this,fn)};
this.addEvent = function (sEventType,fnHandler){
if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
else {this["on" + sEventType] = fnHandler;}
}
this.removeEvent = function (sEventType,fnHandler){
if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
else { this["on" + sEventType] = null;}
}
return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
initialize: function(id,name,out,speed) {
this.name = name;
this.box = $(id);
this.out  = out;
this.speed = speed;
this.d = 1;
this.box.style.position = "relative";
this.box.scrollTop = 0;
var _li = this.box.firstChild;
while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
this.lis = this.box.getElementsByTagName(_li.tagName);
this.len = this.lis.length;
for(var i=0;i<this.lis.length;i++){//计算该复制多少节点，保证无缝滚动，没必要的就不复制
var __li = document.createElement(_li.tagName);
__li.innerHTML = this.lis[i].innerHTML;
this.box.appendChild(__li);
if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
}
this.Start();
this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
this.box.addEvent("mouseout",Bind(this,this.Start,[]));
},
Start:function (){
clearTimeout(this.timeout);
this.timeout = setTimeout(this.name+".Up()",this.out*1000)
},
Up:function(){
clearInterval(this.interval);
this.interval = setInterval(this.name+".Fun()",10);
},
Fun:function (){
this.box.scrollTop+=this.speed;
if(this.lis[this.d].offsetTop <= this.box.scrollTop){
clearInterval(this.interval);
this.box.scrollTop = this.lis[this.d].offsetTop;
this.Start();
this.d++;
}
if(this.d >= this.len + 1){
this.d = 1;
this.box.scrollTop = 0;
}
}
};
$(window).addEvent("load",function (){
marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码，
});
</script>
</head>
<body>
<div id="nli_con">
<dl>
<dt><a href=http://www.hwj123.com/'blog/post/10.html' target='_blank'><strong>1. 域名与网址有什么区别？</strong></a></dt>
<dd>一个完整网址范例如下： http://www.hwj123.com....</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/8.html' target='_blank'><strong>2. 什么是虚拟主机？ </strong></a></dt>
<dd>虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/45.html' target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt>
<dd> 中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果，本站整理了多年对中小企业服务的经验...</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/42.html' target='_blank'><strong>4. 为什么要建立网站标准？什么是网站标准？</strong></a></dt>
<dd>　 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/22.html' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>
<dd> 企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"...</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/30.html' target='_blank'><strong>6. 2009牛年，网站怎样发展好</strong></a></dt>
<dd>　　第一，选择做网站内容， 制定网站内容，根据你的团队工作能力，工作量接受范围度等等，制定一个框架性的简单的方案。　　最好能发挥自己的专长，如果你是三国里的张飞...</dd>
</dl>
<dl>
<dt><a href='http://www.hwj123.com/blog/post/13.html' target='_blank'><strong>7. Internet域名是什么??</strong></a></dt>
<dd>Internet域名，是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有一个重复的域名。域名的形式是以若干个英文字母和数字组成，由...</dd>
</dl>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]