您现在的位置： 365建站网 > 365文章 > html/js/javascript/jquery跑马灯代码特效滚动效果

html/js/javascript/jquery跑马灯代码特效滚动效果

文章来源：365jz.com     点击数：382    更新时间：2017-12-04 14:33   参与评论

html/js/javascript/jquery跑马灯代码特效滚动效果

页面html：

</>code
  1. <div>
  2.             <div id="imgShows" runat="server" style="padding-bottom: 10px;">
  3.               <div id="demo" style="overflow: hidden; width: 100%; height: 190px">
  4.                 <table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
  5.                   <tr>
  6.                     <td id="demo1" valign="top" runat="server">
  7.                     </td>
  8.                     <td id="demo2" valign="top">
  9.                     </td>
  10.                   </tr>
  11.                 </table>
  12.               </div>
  13.               <script type="text/javascript">
  14.                 var speed = 10
  15.                 var demo = document.getElementById("demo");
  16.                 var demo1 = document.getElementById("demo1");
  17.                 var demo2 = document.getElementById("demo2");
  18.                 demo2.innerHTML = demo1.innerHTML
  19.                 function Marquee() {
  20.                   if (demo2.offsetWidth - demo.scrollLeft <= 0)
  21.                     demo.scrollLeft -= demo1.offsetWidth
  22.                   else {
  23.                     demo.scrollLeft++
  24.                   }
  25.                 }
  26.                 var MyMar = setInterval(Marquee, speed)
  27.                 demo.onmouseover = function () { clearInterval(MyMar) }
  28.                 demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } 
  29.               </script>
  30.             </div>
  31.           </div>

cs后台代码：

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

数据库表：

</>code
  1. USE [Enterprise]
  2. GO
  3. /****** 对象: Table [dbo].[Pics]  脚本日期: 03/17/2011 19:26:27 ******/
  4. SET ANSI_NULLS ON
  5. GO
  6. SET QUOTED_IDENTIFIER ON
  7. GO
  8. SET ANSI_PADDING ON
  9. GO
  10. CREATE TABLE [dbo].[Pics](
  11.  [Id] [int] IDENTITY(1,1) NOT NULL,
  12.  [ComId] [int] NOT NULL,
  13.  [Title] [varchar](50) COLLATE Chinese_PRC_CI_AS NULL,
  14.  [Href] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL,
  15.  [Src] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL,
  16. PRIMARY KEY CLUSTERED 
  17. (
  18.  [Id] ASC
  19. )WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
  20. ) ON [PRIMARY]
  21. GO
  22. SET ANSI_PADDING OFF

实体类：

</>code
  1. public class Pic
  2.   {
  3.     public int Id { set; get; }
  4.     public int ComId { set; get; }
  5.     public Model.CompanyModel CompanyModel { set; get; }
  6.     public string Title { set; get; }
  7.     public string Src { set; get; }
  8.     public string Href { set; get; }
  9.   }

很多项目中都会遇到有类似跑马灯效果的消息轮播展示，做了一个简单的消息轮播展示。
主要代码如下：
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="g-winner-roll">
    <img src="img/tongzhi.png">
    <div class="m-countdown">

    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>


css
 

.g-winner-roll{
    height: 30px;
    border-bottom: 1px solid #d3d3d3;
    background-color: #ffffff;
}

.g-winner-roll img{
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    display: block;
    width: 15px;
    height: 15px;
}
.m-countdown{
    margin-left: 25px;
    width: 100%;
    height: 30px;
}

.m-countdown > a{
    text-align: left;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    position:absolute;
    display: none;
}

.m-countdown > a:first-child{
    display: block;
}

.m-countdown > a >span{
    color: rgb(128,128,128);
    height: 30px;
}


index.js

/**
* Created by rayootech on 16/8/6.
*/
$(function(){
    var list = ["跑马灯效果数据1","跑马灯效果数据2","跑马灯效果数据3","跑马灯效果数据4","跑马灯效果数据5","跑马灯效果数据6"];
    var htmlString ="";
    for(var i=0;i<list.length;i++){
        htmlString += '<a href="#"><span>'+list[i]+'</span></a>';
    }
    $(".m-countdown").html(htmlString);
    showRollling();
});
function showRollling(){
    var height = 40;    //这个数字是轮播图片的高度
    var animationTime = 600; //这个数字是动画时间
    var marginTime = 2000; //这个数字是间隔时间
    var nowimg = 0;     //信号量
    var mytimer = null;
    //将图片列表中的第一个节点复制，然后追加到队列的最后。
    //$(".m-countdown a:first-child").clone().appendTo(".m-countdown");

    var mytimer = window.setInterval(
        function(){
            youanniu();
        }
        ,marginTime
    );
    <!--计时器暂停方法-->
    // window.clearInterval(mytimer);
    // mytimer = window.setInterval(
    function youanniu(){
        if(!$(".m-countdown a").is(":animated")){
            //折腾信号量
            if(nowimg < $(".m-countdown a").length - 1){
                nowimg = nowimg + 1;
                showAnimate(nowimg);
            }else{
                nowimg = 0;
                $(".m-countdown a").each(function(index){
                    if(index==0){
                        $(this).css("display","block");
                    }
                    else {
                        $(this).css("display","none");
                    }
                }).css("top","7px");
            }
        }
    }
    function sho![这里写图片描述](http://img.blog.csdn.net/20160807012707902)wAnimate(index) {
        $(".m-countdown a").eq(index).css("display","block");
        $(".m-countdown a").eq(index-1).animate(
            {
                "top": -height * nowimg
            }
            , animationTime
        );
    }
}


效果： 
这里写图片描述

 

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (382人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号