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的文件是什么文件
Dec 06 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
Vue实现购物车功能
Apr 27 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
Angular6笔记之封装http的示例代码
Jul 27 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
使用 php4 加速 web 传输
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
PHP如何防止SQL注入
2014/05/03 面试题
生产主管岗位职责
2013/11/10 职场文书
智能电子应届生求职信
2013/11/10 职场文书
应届生自荐书
2014/06/23 职场文书
教师见习报告范文
2014/11/03 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
个人原因辞职信模板
2015/05/13 职场文书
公司酒会致辞
2015/07/30 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers