css

最新推荐文章于 2025-08-11 19:52:03 发布

hnbk8

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

文章标签： function div filter javascript css

本文链接：https://blog.youkuaiyun.com/hnbk8/article/details/1546505

本文提供了多种网页特效代码，包括横式和竖式渐变效果、无缝向上滚动图片及文字的实现方式。通过这些代码，可以为网站增添丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

横式渐变

竖式渐变

无缝向上滚动图片代码

<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>

无缝向上滚动文字代码

<div >
<a href="#">你可曾有过无数的梦想，</a><br>
<br>
<a href="#">却在时光的流逝里幻灭 </a><br>
<br>
<a href="#">你可曾对未来期待憧憬，</a><br>
<br>
<a href="#">却在成长的岁月中迷失</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
Function("stopscroll=true");
Function("stopscroll=false");
}
document.write('<div style=";z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",10);
}
document.body.onload=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>