注册 登录
编程论坛 → ASP.NET技术论坛

怎么使用jquery实现走马灯

t765159796 发布于 2011-03-17 19:36， 1507 次点击
怎么使用jquery实现走马灯，走马灯的文字内容是系统当前时间，时间要能每秒变动一次。请高手指点
8 回复
#2
yms1232011-03-18 14:23
这个功能不使用JQuery使用Javascript直接写也是能实现的，LZ要的是状态栏的走马灯效果？
#3
t7651597962011-03-18 16:07
回复 2楼 yms123
不是，在一个网页的左下角显示时间 时间有一个走马灯的效果，然后 时间能每秒钟变一下
#4
dadongzicool2011-03-19 21:31
晕 那不就是状态栏么
#5
t7651597962011-03-21 08:45
回复 4楼 dadongzicool
额，有何高见
#6
yms1232011-03-21 16:46
程序代码：
<!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
t7651597962011-03-21 22:08
回复 6楼 yms123
谢谢
#8
gwljp2011-05-20 14:08
以下是引用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
gwljp2011-05-20 14:08
以下是引用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>

   

这个可以是实现走马灯的效果吗？我也不会啊，我学习学习
1
©2025, BC-CN.NET
电脑版