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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
拥抱模块化的JavaScript
2012/03/07 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
javascript中this的四种用法
2015/05/11 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
python任务调度实例分析
2015/05/19 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
Linux文件系统类型
2012/02/15 面试题
海量信息软件测试笔试题
2015/08/08 面试题
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python