注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

linux 学习

 
 
 

日志

 
 

【引用】marquee无缝滚动(各个方向都有)  

2011-10-16 19:18:39|  分类: QT编程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>

图片下无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>


图片左无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

图片右无缝滚动
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="http://blog.163.com/#"><img src="http://blog.163.com/http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

============================================================================================

<TABLE width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
  
<TR>   
         <TD>
<div id="marquees">
      <% while not rs.eof%>
      ◎&nbsp;&nbsp; &nbsp;<A href="http://blog.163.com/viewcom.asp?cname=<%=rs("公司名称")%>" target="_blank"><%=rs("公司名称")%></A> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <%=rs("职能职位")%> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%=rs("承诺月薪")%> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%=formatdatetime(rs ("发布日期"),2)%> </p>
      <%
     rs.movenext
     wend
    rs1.close
      set rs1=nothing
    
      rs.movenext
      loop
      rs.close
      set rs=nothing
%> </DIV><!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",30);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

      </TD>
     </TR>     

  
  
      </TABLE>
 

  评论这张
 
阅读(1220)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018