Div+CSS无缝滚动终极版
来源：互联网 发布：小超市进销存软件 编辑：程序博客网 时间：2024/06/02 05:27
向左滚动
<!--//向左滚动代码开始-->
<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://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
向上滚动
<!--//向上滚动代码开始-->
<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://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgTop();</script>
</div>
<!--//向上滚动代码结束-->
===================================
<!--
############################################################################################
# 备注：此向左<span class="highlight">无缝滚动</span>的代码完全采用Div+Css架构，滚动区域大小完全只要设置CSS即可。 #
# 代码由『一网传媒』进行二次开发，转载请注明出处 #
# 『一网传媒』http://new.qzone.qq.com/49272490/ #
############################################################################################
-->
<!--CSS代码段-->
<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>
<!--JS代码段-->
<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">
<!--
//图片滚动核心代码
function ScrollImg(ScrollType){
/*ScrollType参数有：top,bottom,left,right*/
var speed=5 //值越大速度越小
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 (ScrollType=="left"){
if (!ScrollType||ScrollType=="left"){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}else if (ScrollType=="top"){
if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}else if (ScrollType=="bottom"){
if(scroll_begin.offsetTop-scroll_div.scrollTop>=0)
scroll_div.scrollTop+=scroll_end.offsetHeight
else
scroll_div.scrollTop--
}else if (ScrollType=="right"){
if(scroll_div.scrollLeft<=0)
scroll_div.scrollLeft+=scroll_end.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 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://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" alt="『一网传媒』" /></a></li>
<li><a href="http://new.qzone.qq.com/49272490//"><img src="http://new.qzone.qq.com/49272490//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>
无缝图片滚动，图片个数不够也可以正常使用
<!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">
<!--
img {border:0;}
td{font-size:12px;}
body{margin:0px auto;padding:0; background-color:#B92222}
A{COLOR:#000; TEXT-DECORATION: none;}
A:hover{COLOR:#000; TEXT-DECORATION: none;}
A:visited{text-decoration:none;color:#000;}
-->
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:600px;margin:0px auto; background:#ffffff;" align="center">
<div id="mainTable">
<div id="marquePic1">
<table width=100% border="0" cellspacing="0" id="cTable">
<tr>
<td align=center>
<a href="http://new.qzone.qq.com/49272490//" title="『一网传媒』" target="_blank"><img src="http://new.qzone.qq.com/49272490//images/main_logo.gif" style="margin:4px;"></a><br><a href="http://new.qzone.qq.com/49272490//" target="_blank">『一网传媒』</a>
</td>
<td align=center>
<a href="http://new.qzone.qq.com/49272490//blog/" title="+博客界+" target="_blank"><img src="http://new.qzone.qq.com/49272490//blog/images/logo.gif" style="margin:4px;"></a><br><a href="http://new.qzone.qq.com/49272490//blog/" target="_blank">+博客界+</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<input type=text name=ok id=ok value=""><input type=button onClick="demo.scrollLeft++;" value="向左">
<script type="text/javascript">
//函数1,插入列，必须用到Table
function copyTable(){
var cTableTdLength=cTable.rows[0].cells.length;
for(n=0;n<cTableTdLength;n++){
var td=cTable.rows[0].insertCell();
td.innerHTML=cTable.rows[0].cells[n].innerHTML;
}
}
//函数2
function Marquee(){
var s1=demo.scrollLeft;
var s2=marquePic1.scrollWidth;
if(s1>=s2){
demo.scrollLeft=0;
}else{
demo.scrollLeft++;
}
if(s1==demo.scrollLeft){
copyTable();
}
document.getElementById('ok').value=demo.scrollLeft + " _ " + marquePic1.scrollWidth;
}
//主脚本...
copyTable(); //这句用来延长本不够宽度的表格,如果执地一次还不行,就反复执行,直至调试正常即可
var speed=10; //滚动速度，值越大越慢
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
- Div+CSS无缝滚动终极版
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- div+css+js无缝滚动代码
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox
- div+css+js实现无缝滚动类似marquee无缝滚动代码
- DIV的图片无缝滚动
- DIV的图片无缝滚动
- DIV的图片无缝滚动
- CSS动画案例-无缝滚动
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- css + js实现简单无缝滚动字幕
- html,css插入多张图使无缝滚动
- js无缝滚动(SIMPLE)版
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 动态改变CSS
- SQL语句
- 如何用SSIS包配置动态配置数据库连接？
- Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列 2
- 在Finder中显示隐藏文件／文件夹
- Div+CSS无缝滚动终极版
- 浮点数到整数的快速转换
- oracle之CLOB处理完整版
- 在linux中写txt文件
- Linux邮件服务系统的搭建（二）
- XPath 函数大全
- uClinux cmdline分析以及rootfs挂载
- 资源动态替换的详细步骤
- 使用WebService实现IP归属地查询源码
