可指定时间间隔图片文字向上滚动代码
可指定时间间隔图片文字向上滚动代码_文字向上滚动代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>文本向上滚动可指定间隔时间-素材之家sc.158pic.com-psd素材免费下载</title>
<head>
<style type="text/css">
<!--
/*滚动样式*/
#scrolllayer {float:left;overflow:hidden;height:18px;width:100%; display:block; margin-top:3px; border:1px red solid;}
#scrollmessage {float:left;text-align:left;width:100%;font-size:12px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {line-height:18px;color:#FF0000;}
#scrollmessage li a{color:#FF0000; text-decoration:none;}
-->
</style>
</head>
<body>
<div id="scrolllayer">
<div id="scrollmessage">
<ul>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">素材之家sc.158pic.com-psd素材免费下载</a></li>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">素材之家sc.158pic.com-psd素材免费下载</a></li>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">图片素材</a></li>
<li><a href="http://www.jianbihuadq.com/Web/js/index.html/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">js特效代码</a></li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript">
<!--
//以下参数酌情修改
try{
var marqueesHeight = 18; //高度
var stopscroll = false;
var scrollElem = document.getElementById("scrolllayer");
with(scrollElem){
style.width = 500;//宽度
style.height = marqueesHeight;
style.overflow = 'hidden';
noWrap = true;
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 15); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 19) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 220) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>
</body>
</html>
查看演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>文本向上滚动可指定间隔时间-素材之家sc.158pic.com-psd素材免费下载</title>
<head>
<style type="text/css">
<!--
/*滚动样式*/
#scrolllayer {float:left;overflow:hidden;height:18px;width:100%; display:block; margin-top:3px; border:1px red solid;}
#scrollmessage {float:left;text-align:left;width:100%;font-size:12px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {line-height:18px;color:#FF0000;}
#scrollmessage li a{color:#FF0000; text-decoration:none;}
-->
</style>
</head>
<body>
<div id="scrolllayer">
<div id="scrollmessage">
<ul>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">素材之家sc.158pic.com-psd素材免费下载</a></li>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">素材之家sc.158pic.com-psd素材免费下载</a></li>
<li><a href="/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">图片素材</a></li>
<li><a href="http://www.jianbihuadq.com/Web/js/index.html/" target="_blank" title="素材之家sc.158pic.com-psd素材免费下载">js特效代码</a></li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript">
<!--
//以下参数酌情修改
try{
var marqueesHeight = 18; //高度
var stopscroll = false;
var scrollElem = document.getElementById("scrolllayer");
with(scrollElem){
style.width = 500;//宽度
style.height = marqueesHeight;
style.overflow = 'hidden';
noWrap = true;
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 15); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 19) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 220) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>
</body>
</html>
查看演示
主题测试文章，只做测试使用。发布者：绘画吧，转转请注明出处：http://www.huitu8.com/sucai/wangyesucai/20200908/142140.html
版权声明：文中所以图片均来源于网络，图片如有侵权可联系网站进行修改或删除。
主页仅供美术绘画爱好者学习交流,所有绘画作品及文字版权于著作权归原作者所有，如用于商业及其他营利目的，责任自负！
本文链接: 可指定时间间隔图片文字向上滚动代码
欢迎关注:【绘图吧,学画画网】http://www.huitu8.com/
