html/js/javascript/jquery跑马灯代码特效滚动效果
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 showAnimate(index) {
$(".m-countdown a").eq(index).css("display","block");
$(".m-countdown a").eq(index-1).animate(
{
"top": -height * nowimg
}
, animationTime
);
}
}
效果：
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
