Javascript实现跑马灯效果的简单实例


Posted in Javascript onMay 31, 2016

页面html:

<div>
            <div id="imgShows" runat="server" style="padding-bottom: 10px;">
              <div id="demo" style="overflow: hidden; width: 100%; height: 190px">
                <table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
                  <tr>
                    <td id="demo1" valign="top" runat="server">
                    </td>
                    <td id="demo2" valign="top">
                    </td>
                  </tr>
                </table>
              </div>
              <script type="text/javascript">
                var speed = 10
                var demo = document.getElementById("demo");
                var demo1 = document.getElementById("demo1");
                var demo2 = document.getElementById("demo2");
                demo2.innerHTML = demo1.innerHTML
                function Marquee() {
                  if (demo2.offsetWidth - demo.scrollLeft <= 0)
                    demo.scrollLeft -= demo1.offsetWidth
                  else {
                    demo.scrollLeft++
                  }
                }
                var MyMar = setInterval(Marquee, speed)
                demo.onmouseover = function () { clearInterval(MyMar) }
                demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } 
              </script>
            </div>
          </div>

cs后台代码:

private void BindPics(int comId)
  {
    List<Model.Pic> pic = DAO.PicDao.GetPics(comId);
    StringBuilder sb = new StringBuilder();
    if (pic == null || pic.Count < 1)
    {
      imgShows.InnerHtml = string.Empty;
      return;
    }
    sb.Append("<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\"cellspacing=\"10px\"><tr>");
    for (int i = 0; i < pic.Count; i++)
    {
      Model.Pic p = pic[i];
      sb.Append(" <td width=\"200\"><a href=\"" + p.Href + "\"><img src=\"../" + p.Src + "\" border='0' title=\"" + p.Title + "\" alt=\"" + p.Title + "\"></a></td>");
    }
    sb.Append("</tr></table>");
    demo1.InnerHtml = sb.ToString();
  }

数据库表:

USE [Enterprise]
GO
/****** 对象: Table [dbo].[Pics]  脚本日期: 03/17/2011 19:26:27 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Pics](
 [Id] [int] IDENTITY(1,1) NOT NULL,
 [ComId] [int] NOT NULL,
 [Title] [varchar](50) COLLATE Chinese_PRC_CI_AS NULL,
 [Href] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL,
 [Src] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL,
PRIMARY KEY CLUSTERED 
(
 [Id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

实体类:

public class Pic
  {
    public int Id { set; get; }
    public int ComId { set; get; }
    public Model.CompanyModel CompanyModel { set; get; }
    public string Title { set; get; }
    public string Src { set; get; }
    public string Href { set; get; }
  }

以上这篇Javascript实现跑马灯效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
jQuery 联动日历实现代码
May 31 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
javascript实现简易计算器的代码
May 31 #Javascript
javascript实现任务栏消息提示的简单实例
May 31 #Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 #Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 #Javascript
javascript事件模型介绍
May 31 #Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
javascript事件处理模型实例说明
May 31 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
ES6的新特性概览
2016/03/10 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
jquery检测上传文件大小示例
2020/04/26 jQuery
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python Logging 日志记录入门学习
2018/06/02 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python 表格打印代码实例解析
2019/10/12 Python
python编写计算器功能
2019/10/25 Python
PyTorch中permute的用法详解
2019/12/30 Python
如何基于Python实现自动扫雷
2020/01/06 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python跨文件使用全局变量的实现
2020/11/17 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
市场拓展计划书
2014/05/03 职场文书
政府采购方案
2014/06/12 职场文书
2015年商场工作总结
2015/04/27 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python