html/js/javascript/jquery跑马灯代码特效滚动效果
页面html:
</>code
- <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后台代码:
</>code
- 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();
- }
数据库表:
</>code
- 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
实体类:
</>code
- 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
);
}
}
效果:
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛