`
jsntghf
  • 浏览: 2526243 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

跑马灯效果

JavaScriptGoogleCSSXHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<div class="rollBox"> 
  <div class="LeftBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div> 
  <div class="Cont" id="ISL_Cont"> 
    <div class="ScrCont"> 
      <div id="List1"> 
        <div class="pic" > 
          <a href="http://www.google.cn" target="_blank"><img src="xiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /></a> 
          <a href="http://www.google.cn" target="_blank">谢雯琇</a> 
        </div> 
        <div class="pic"> 
          <a href="http://www.baidu.com" target="_blank"><img src="lvge.jpg" width="109" height="87" alt="吕铬" /></a> 
          <a href="http://www.baidu.com" target="_blank">吕铬</a> 
        </div>       
        <div class="pic"> 
          <a href="http://www.sina.com" target="_blank"><img src="zhengru.jpg" width="109" height="87" alt="贾正如" /></a> 
          <a href="http://www.sina.com" target="_blank">贾正如</a> 
        </div> 
      </div> 
      <div id="List2"></div> 
    </div> 
  </div> 
  <div class="RightBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" ></div> 
</div> 
<style type="text/css"> 
  .rollBox{width:904px;overflow:hidden;padding:12px 0 5px 6px;} 
  .rollBox .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
  .rollBox .RightBotton{height:52px;width:20px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
  .rollBox .Cont{width:663px;overflow:hidden;float:left;} 
  .rollBox .ScrCont{width:10000000px;} 
  .rollBox .Cont .pic{width:132px;float:left;text-align:center;} 
  .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} 
  .rollBox .Cont .pic p{line-height:26px;color:#505050;} 
  .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;} 
  .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} 
  .rollBox #List1,.rollBox #List2{float:left;} 
</style> 
<script language="javascript" type="text/javascript"> 
  var Speed = 10; //速度(毫秒) 
  var Space = 5; //每次移动(px) 
  var PageWidth = 132; //翻页宽度 
  var fill = 0; //整体移位 
  var MoveLock = false; 
  var MoveTimeObj; 
  var Comp = 0; 
  var AutoPlayObj = null; 
  GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
  GetObj('ISL_Cont').scrollLeft = fill; 
  GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 
  GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 
  AutoPlay(); 
  function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 
  function AutoPlay(){ //自动滚动 
    clearInterval(AutoPlayObj); 
    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间 
  } 
  function ISL_GoUp(){ //上翻开始 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
  } 
  function ISL_StopUp(){ //上翻停止 
    clearInterval(MoveTimeObj); 
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ 
      Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
  } 
  function ISL_ScrUp(){ //上翻动作 
    if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} 
    GetObj('ISL_Cont').scrollLeft -= Space ; 
  } 
  function ISL_GoDown(){ //下翻 
    clearInterval(MoveTimeObj); 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    ISL_ScrDown(); 
    MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
  } 
  function ISL_StopDown(){ //下翻停止 
    clearInterval(MoveTimeObj); 
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ 
      Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
  } 
  function ISL_ScrDown(){ //下翻动作 
    if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} 
    GetObj('ISL_Cont').scrollLeft += Space ; 
  } 
  function CompScr(){ 
    var num; 
    if(Comp == 0){MoveLock = false;return;} 
    if(Comp < 0){ //上翻 
      if(Comp < -Space){ 
        Comp += Space; 
        num = Space; 
      }else{ 
        num = -Comp; 
        Comp = 0; 
      } 
      GetObj('ISL_Cont').scrollLeft -= num; 
      setTimeout('CompScr()',Speed); 
    }else{ //下翻 
      if(Comp > Space){ 
        Comp -= Space; 
        num = Space; 
      }else{ 
        num = Comp; 
        Comp = 0; 
      } 
      GetObj('ISL_Cont').scrollLeft += num; 
      setTimeout('CompScr()',Speed); 
    } 
  } 
</script>

 

分享到：
| Mac OS X 操作系统上的水波屏幕保护LotsaW ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    unity实现简单跑马灯效果

    在Unity游戏引擎中，跑马灯效果是一种常见的UI动态效果，通常用于滚动显示文本或图像。这个效果在很多游戏和应用中都能见到，比如显示排行榜、公告或者新闻更新。本教程将详细介绍如何使用C#脚本来实现这一效果，并...

    jQuery 跑马灯效果

    **jQuery跑马灯效果**是一种常见的网页动态展示技术，它通过自动循环滚动或切换内容，如图片、文字或链接，来吸引用户注意力并提供信息。在网页设计中，这种效果通常用于广告展示、新闻滚动或者产品展示等场景。在本...

    Qt 实现的跑马灯效果

    【Qt实现的跑马灯效果】是一种常见的GUI编程技术，主要应用于信息滚动显示，常见于电子显示屏、信息提示框等场景。Qt是一个跨平台的C++图形用户界面应用程序开发框架，它提供了丰富的API和工具，使得开发者能够方便...

    Delphi实现透明跑马灯效果

    在Delphi中实现透明跑马灯效果涉及到图形用户界面（GUI）编程，特别是与控件、事件处理和自定义绘图相关的技术。跑马灯效果通常是指文本或图像在界面上按照某种方式循环滚动，而透明则涉及到控件的背景处理和颜色...

    Android文字跑马灯效果

    在Android开发中，"文字跑马灯效果"是一种常见的用户界面设计，主要用于显示较长的文本内容，当空间有限时，可以实现文本的自动循环滚动，给人一种动态的效果，类似传统电子显示屏上的跑马灯。这种效果通常用在通知...

    老罗视频代码textview跑马灯效果

    【跑马灯效果】在Android开发中，通常指的是TextView中的滚动文字效果，也称为Marquee效果，这种效果会让过长的文字在控件宽度内不断滚动，就像跑马灯一样。在老罗的视频中，他可能讲解了如何通过代码实现这一效果。...

    RecyclerView上下自动无限滚动，跑马灯效果

    设置合适的滚动速度和间隔时间，可以模拟出连续、平滑的跑马灯效果。 3. 两种效果： - 每次移动距离是一个item的高度：这可以通过计算出item高度并作为滚动距离来实现。在自定义LayoutManager中，获取item高度，...

    Swift.跑马灯效果UIView

    Swift中的跑马灯效果通常指的是文字或图片在视图中循环滚动的现象，这种效果常见于广告栏或通知提示。在iOS开发中，我们可以自定义一个UIView子类来实现这一功能。这里，我们关注的文件是`MarqueeView.swift`，它...

    使用TextView实现跑马灯效果

    跑马灯效果可以让文本在文本框内循环滚动，给人一种连续阅读的视觉感受，尤其适用于标题或提示信息的展示。 本教程主要围绕如何在Android中使用`TextView` 实现跑马灯效果展开。首先，我们需要了解`TextView` 的...

    跑马灯效果的多种实现

    跑马灯效果，又称滚动字幕或走马灯，是一种常见的UI设计元素，常用于显示过多信息无法一次性完全展示的情况，如网站公告、新闻标题滚动等。在IT领域，跑马灯效果可以通过多种编程语言和技术来实现。下面，我们将详细...

    android跑马灯效果，失去焦点也可以实现

    标题提到的"android跑马灯效果，失去焦点也可以实现"意味着即使控件没有获取到焦点，仍然可以保持滚动效果。这在设计用户界面时特别有用，因为有时候我们希望信息能够持续吸引用户的注意力，而不仅仅是当用户交互时...

    Android 实现水平、垂直方向文字跑马灯效果demo

    在Android开发中，实现文字跑马灯效果是一种常见的动态UI设计，可以吸引用户注意力并提供信息展示。本示例——"Android 实现水平、垂直方向文字跑马灯效果demo"，将详细介绍如何在Android应用中创建这样的效果。跑马...

    跑马灯效果的图片变换

    在Android开发中，"跑马灯效果的图片变换"是一种常见的动画效果，它通常用于创建引人注目的视觉展示，比如广告轮播、通知提示或者界面装饰等。这种效果通过连续切换图片，使得图片看起来像在移动，形成一种动态流动...

    js实现上下滚动跑马灯效果

    在前端开发中，跑马灯效果是一种常见的动态展示方式，常用于新闻滚动、广告轮播等场景。在HTML5时代，`&lt;marquee&gt;`标签曾是实现这种效果的简便手段，但由于它缺乏语义化、性能不佳且不支持现代Web标准，逐渐被淘汰。...

    实现textView 跑马灯效果

    要实现TextView的跑马灯效果，通常需要结合Android的属性和自定义布局来完成。以下是详细步骤和相关知识点： 1. **设置Ellipsize属性**： TextView有一个名为`ellipsize`的属性，它允许我们在文本过长时添加省略号...

    iOS 跑马灯效果

    跑马灯效果，通常在移动应用开发中用于显示滚动文本，尤其当文本内容过多无法一次性完全展示时。在iOS开发中，我们可以利用UILabel这一UI组件来实现这种效果。本篇文章将详细探讨如何在iOS中创建跑马灯效果，以及...

    jQuery无缝滚动跑马灯效果

    jQuery无缝滚动跑马灯效果是一种常见的网页动态展示技术，它利用JavaScript库jQuery的高效特性，为网站添加一种吸引用户注意力的视觉效果。这种效果通常应用于新闻更新、广告展示或者产品介绍等区域，使得信息能够以...

    简单的textview 跑马灯效果 可直接使用

    "跑马灯效果"（Marquee）是TextView的一种特殊滚动效果，它允许文本在TextView的边界内无限循环滚动，给人一种连续移动的视觉效果。 实现TextView的跑马灯效果主要涉及到以下知识点： 1. **属性设置**： - `...

    js实现跑马灯效果

    跑马灯效果是一种常见的网页动态展示方式，常用于新闻标题滚动、广告轮播等场景。在JavaScript中实现跑马灯，主要涉及到定时器、数组、DOM操作和CSS样式控制等技术。下面我们将深入探讨如何使用JavaScript来实现这种...

Magicbox
Global site tag (gtag.js) - Google Analytics