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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python创造虚拟环境方法总结
2019/03/04 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python实现多线程端口扫描
2019/08/31 Python
Python range与enumerate函数区别解析
2020/02/28 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python如何爬取动态网站
2020/09/09 Python
thinkphp5 路由分发原理
2021/03/18 PHP
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
求职信写作要突出重点
2014/01/01 职场文书
北京大学自荐信范文
2014/01/28 职场文书
2014年绿化工作总结
2014/12/09 职场文书
时尚女魔头观后感
2015/06/04 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
了解Redis常见应用场景
2021/06/23 Redis
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python