模仿凤凰网的可控制文字滚动效果，这个文字滚动特效常用来做网站公告栏，兼容当前主流浏览器。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>带按钮控制的文字定时滚动特效_武鸣人</title>
<!--[if IE 6]>
<script language="JavaScript" type="text/javascript">
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}
function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/img/20240319_www_wuming_ren_26.gif')";//替换透明PNG的图片
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "/img/20240319_www_wuming_ren_26.gif";//替换透明PNG的图片
}
}
}
}
</script>
<![endif]-->
<style type="text/css">
#www_wuming_ren{
width:600px;
height:30px;
overflow:hidden;
color:#FFF;
font-size:14px;
background:#C00;
position:relative;
}
#www_wuming_ren ul,#www_wuming_ren li{
margin:0;
padding:0;
list-style:none;
}
#www_wuming_ren ul{
display:block;
float:left;
width:400px;
}
#www_wuming_ren li{
width:400px;
overflow:hidden;
line-height:30px;
padding-left:5px;
}
span#prevId{}
span#nextId{}
#prevBtn, #nextBtn{
display:block;
width:20px;
height:10px;
position:absolute;
left:370px;
top:14px;
*top:22px;
}
#nextBtn{
top:26px;
*top:32px;
}
#prevBtn a, #nextBtn a{
display:block;
width:12px;
height:10px;
background:url(/img/20240319_www_wuming_ren_22.png) no-repeat 0 0;
}
#prevBtn a:hover{
display:block;
width:12px;
height:10px;
background:url(/img/20240319_www_wuming_ren_23.png) no-repeat 0 0;
}
#nextBtn a{
background:url(/img/20240319_www_wuming_ren_24.png) no-repeat 0 0;
}
#nextBtn a:hover{
background:url(/img/20240319_www_wuming_ren_25.png) no-repeat 0 0;
}
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript" src="/img/easySlider1.5.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$("#www_wuming_ren").easySlider({
orientation: 'vertical',
auto: true
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
// ]]>
</script>
</head>
<body>
<div id="www_wuming_ren">
<ul>
<li>仿凤凰网内容推荐的可控制文字展示条</li>
<li>武鸣人二号滚动</li>
<li>武鸣人三号滚动</li>
<li>武鸣人四号滚动</li>
<li>武鸣人五号滚动</li>
<li>武鸣人六号滚动</li>
</ul>
<span id="prevId"><a href="javascript:void(0);">up</a></span>
<span id="nextId"><a href="javascript:void(0);">down</a></span>
</div>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新后看效果。<br />
</body>
</html>本文来自武鸣人网站，转载请注明出处