怎么使用jquery实现走马灯 - ASP.NET技术论坛

楼主

问题点数：0 回复次数：8

怎么使用jquery实现走马灯

怎么使用jquery实现走马灯，走马灯的文字内容是系统当前时间，时间要能每秒变动一次。请高手指点

搜索更多相关主题的帖子: 时间　

第 2 楼

得分:0

这个功能不使用JQuery使用Javascript直接写也是能实现的，LZ要的是状态栏的走马灯效果？

第 3 楼

得分:0

回复 2楼 yms123

不是，在一个网页的左下角显示时间时间有一个走马灯的效果，然后时间能每秒钟变一下

第 4 楼

得分:0

晕那不就是状态栏么

本人出售软件专业毕业设计（包括论文，代码）题目众多，价格从优联系方式：QQ
1635008514(寻找高校代理)

第 5 楼

得分:0

回复 4楼 dadongzicool

额，有何高见

第 6 楼

得分:0

程序代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>状态栏时间特效</title>
<script language="javascript">
//模板字符串
var t="现在的时间是{$Year}年{$Month}月{$Date}日 {$Hours}点{$Minutes}分{$Seconds}秒";
var t1="";//临时字符串
var a="m"; //临时模版字符串
var statusLen=0; //状态栏长度
var count=0; //临时计时变量
//显示状态栏
function ShowStatus()
{
    ShowTime();//获得当前时间
    getStatusLen();//获得移动最大距离
    var maxLen=statusLen;//最大移动距离为状态栏宽度
    count++;//当前移动距离增加
   
    //向右移动判断，移动距离count必须小于最大距离
    if(count>= 0 && count < maxLen)
    {
      a=" "+a;//字符串前加空格移动
      window.status = a.replace("m",t1);//替换时间给字符串  
   }
  
   //向左移动判断
   if(count>= maxLen)
   {
     a = jsright(a,a.length-1);//每次右取字符数减1
     window.status = a.replace("m",t1);
   }
  
   //判断向左移动是否到头
   if(window.status.length==0)
   {
        a="m"; 
        count=0;
   }
}

//获得时间
function ShowTime()
{
    var time=new Date();//创建Date对象
    t1=t;
    t1=t1.replace("{$Year}",time.getFullYear());  //返回date对象中的四位数年份
    t1=t1.replace("{$Month}",eval(time.getMonth()+1));  //返回date对象中的月份数
    t1=t1.replace("{$Date}",time.getDate());  //返回date对象中的月份中的天数
    t1=t1.replace("{$Hours}",time.getHours());  //返回date对象中的小时数
    t1=t1.replace("{$Minutes}",time.getMinutes());  //返回date对象中的分钟数
    t1=t1.replace("{$Seconds}",time.getSeconds());  //返回date对象中的秒数
}
//窗体大小调整事件
function Window_resize()
{
    getStatusLen();
}
//获得状态栏长度
function getStatusLen()
{
    findDimensions() ;
    statusLen=Math.floor(winWidth/12);
    //除以12是因为字符串默认大小是12px总宽度除以字符宽度取整获得移动最大宽度
}
window.setInterval("ShowStatus()",100);
window.onresize=Window_resize;
</script>
<script language='javascript'>
//左取字符串
function jsleft(lefts,leftn)
{
  var sl=lefts;
  sl=sl.substring(0,leftn);
  return sl;
}
//右取字符串
function jsright(rights,rightn)
{
  var sr=rights;
  sr=sr.substring(sr.length-rightn,sr.length);
  return sr;
}
</script>
<script type="text/javascript">

//获得窗口实际宽度
var winWidth = 0;
var winHeight = 0;
// 函数：获取尺寸
function findDimensions()
{
  // 获取窗口宽度
  if (window.innerWidth)
      winWidth = window.innerWidth;

 else if ((document.body) && (document.body.clientWidth))
     winWidth = document.body.clientWidth;

 // 获取窗口高度
 if (window.innerHeight)
    winHeight = window.innerHeight;

 else if ((document.body) && (document.body.clientHeight))
   winHeight = document.body.clientHeight;

 // 通过深入 Document 内部对 body 进行检测，获取窗口大小
 if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

 {
    winHeight=document.documentElement.clientHeight;
    winWidth=document.documentElement.clientWidth;
  }
}
//-->
</script>
</head>
<body>
</body>
</html>

[ 本帖最后由 yms123 于 2011-3-21 16:53 编辑 ]

第 7 楼

得分:0

回复 6楼 yms123

谢谢

第 8 楼

得分:0

以下是引用yms123在2011-3-21 16:46:26的发言：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>状态栏时间特效</title>
<script language="javascript">
//模板字符串
var t="现在的时间是{$Year}年{$Month}月{$Date}日 {$Hours}点{$Minutes}分{$Seconds}秒";
var t1="";//临时字符串
var a="m"; //临时模版字符串
var statusLen=0; //状态栏长度
var count=0; //临时计时变量
//显示状态栏
function ShowStatus()
{
    ShowTime();//获得当前时间
    getStatusLen();//获得移动最大距离
    var maxLen=statusLen;//最大移动距离为状态栏宽度
    count++;//当前移动距离增加

    //向右移动判断，移动距离count必须小于最大距离
    if(count>= 0 && count < maxLen)
    {
      a=" "+a;//字符串前加空格移动
      window.status = a.replace("m",t1);//替换时间给字符串
   }

   //向左移动判断
   if(count>= maxLen)
   {
     a = jsright(a,a.length-1);//每次右取字符数减1
     window.status = a.replace("m",t1);
   }

   //判断向左移动是否到头
   if(window.status.length==0)
   {
        a="m";
        count=0;
   }
}

//获得时间
function ShowTime()
{
    var time=new Date();//创建Date对象
    t1=t;
    t1=t1.replace("{$Year}",time.getFullYear());  //返回date对象中的四位数年份
    t1=t1.replace("{$Month}",eval(time.getMonth()+1));  //返回date对象中的月份数
    t1=t1.replace("{$Date}",time.getDate());  //返回date对象中的月份中的天数
    t1=t1.replace("{$Hours}",time.getHours());  //返回date对象中的小时数
    t1=t1.replace("{$Minutes}",time.getMinutes());  //返回date对象中的分钟数
    t1=t1.replace("{$Seconds}",time.getSeconds());  //返回date对象中的秒数
}
//窗体大小调整事件
function Window_resize()
{
    getStatusLen();
}
//获得状态栏长度
function getStatusLen()
{
    findDimensions() ;
    statusLen=Math.floor(winWidth/12);
    //除以12是因为字符串默认大小是12px总宽度除以字符宽度取整获得移动最大宽度
}
window.setInterval("ShowStatus()",100);
window.onresize=Window_resize;
</script>
<script language='javascript'>
//左取字符串
function jsleft(lefts,leftn)
{
  var sl=lefts;
  sl=sl.substring(0,leftn);
  return sl;
}
//右取字符串
function jsright(rights,rightn)
{
  var sr=rights;
  sr=sr.substring(sr.length-rightn,sr.length);
  return sr;
}
</script>
<script type="text/javascript">

//获得窗口实际宽度
var winWidth = 0;
var winHeight = 0;
// 函数：获取尺寸
function findDimensions()
{
  // 获取窗口宽度
  if (window.innerWidth)
      winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
     winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
    winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
   winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
    winHeight=document.documentElement.clientHeight;
    winWidth=document.documentElement.clientWidth;
  }
}
//-->
</script>
</head>
<body>
</body>
</html>

这个可以是实现走马灯的效果吗？我也不会啊，我学习学习

第 9 楼

得分:0

这个可以是实现走马灯的效果吗？我也不会啊，我学习学习