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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
小程序调用微信支付的方法
2019/09/26 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python单元测试简单示例
2018/07/03 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python 列表推导式使用详解
2019/08/29 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
GWT都有什么特性
2016/12/02 面试题
党委班子对照检查材料
2014/08/19 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
北京爱情故事观后感
2015/06/12 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL