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

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

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

HTML/js/JavaScript/jQuery跑马灯代码特效滚动效果

页面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; }
  }

很多项目中都会遇到有类似跑马灯效果的消息轮播展示,做了一个简单的消息轮播展示。
主要代码如下:
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
        );
    }
}


效果: 
这里写图片描述

 

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


发表评论 (127人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------