您的位置：首页 > 其它

实用的文本和图片无缝滚动效果

2015-10-21 19:31 459 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-综合特效-实用的文本和图片无缝滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
html,body,div,img,h1,h2,h3,h4,h5,h6{
vertical-align:baselinebaseline;
font-family:inherit;
font-weight:inherit;
font-style:inherit;
font-size:100%;
outline:0;
padding:0;
margin:0;
border:0;
}
body{
font-family:"宋体";
background:#e0e3ec url(http://www.zzsky.cn/effect/images/20123/272250/bg.jpg) repeat top left;
font-weight:400;
font-size:15px;
color:#393b40;
}
a{
color:#333;
text-decoration:none;
}
.container{
width:100%;
position:relative;
text-align:center;
}
h1{
line-height:60px;
font-size:22px;
clear:both;
}
h2{
padding-top:20px;
line-height:40px;
font-weight:bolder;
}
.main{
width:1001px;
margin: 10px auto 30px auto;
}
.content{
background:#FFFFFF;
border:1px solid #eaeaea;
padding:20px 0;
}
#newsbox{
height:150px;
overflow:hidden;
border:1px solid #e1e1e1;
width:350px;
margin:0 auto;
}
#newslist li{
line-height:25px;
text-align:left;
padding-left:15px;
}
table{
margin:0 auto;
border:1px solid #e1e1e1;
}
#probox{
width:700px;
overflow:hidden;
height:190px;
padding:15px 0;
}
#prolist{
width:1500px;
}
#prolist li{
float:left;
text-align:center;
line-height:25px;
}
#left,#right{
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20123/272250/chaomao.js"></script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="container">
<div class="main">
<h1>无缝滚动</h1>
<h2>无缝滚动实例1</h2>
<div class="content">
<div id="newsbox">
<ul id="newslist">
<li>我是javasscript100插件无缝滚动功能</li>
<li>我是无缝滚动的哦</li>
<li>我的滚动间隔是3秒</li>
<li>我没有拖动按钮</li>
<li>我的滚动方向是从上向下滚动的</li>
<li>我是javasscript100插件无缝滚动功能</li>
<li>我是javasscript100插件无缝滚动功能</li>
<li>我是javasscript100插件无缝滚动功能</li>
<li>我是javasscript100插件无缝滚动功能</li>
<li>我是javasscript100插件无缝滚动功能</li>
</ul>
</div>
</div>
<h2>无缝滚动实例2</h2>
<div class="content">
<table align="center">
<tr>
<td id="left"><img src="http://www.zzsky.cn/effect/images/20123/272250/left.jpg"></td>
<td>
<div id="probox">
<ul id="prolist">
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad1</li>
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad2</li>
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad3</li>
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad4</li>
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad5</li>
<li><a href="#"><img src="http://www.zzsky.cn/effect/images/20123/272250/pic.jpg"></a><br>Ipad6</li>
</ul>
</div>
</td>
<td id="right"><img src="http://www.zzsky.cn/effect/images/20123/272250/rihgt.jpg"></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
js100(function(){
Javascript100.scroll({box:"newsbox",list:"newslist",direction:"top",spacing:3000});
Javascript100.scroll({box:"probox",list:"prolist",advanceArrow:"left",retreatArrow:"right"});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航