Maison > interface Web > js tutoriel > Exemple de code pour implémenter un défilement transparent vers le haut de la liste d'actualités basé sur les compétences JS_javascript

Exemple de code pour implémenter un défilement transparent vers le haut de la liste d'actualités basé sur les compétences JS_javascript

WBOY
Libérer: 2016-05-16 15:18:53
original
1239 Les gens l'ont consulté

Lorsqu'il y a beaucoup de nouvelles et qu'elles sont limitées sans précédent, l'utilisation du défilement est un bon choix. Ce chapitre présentera comment obtenir cet effet à travers des exemples de code.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>文字列表无缝向上滚动代码</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
body{font-size:12px}
#demo{
overflow:hidden;
height:80px;
width:280px;
margin:90px auto;
position:relative;
}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
#demo2 li{
list-style-type:none;
height:22px;
text-align:left;
text-indent:15px;
}
</style>
<script type="text/javascript"> 
var speed=40 
window.onload=function(){
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo.scrollTop>=demo1.offsetHeight){
demo.scrollTop=0; 
}
else{ 
demo.scrollTop=demo.scrollTop+1;
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 
}
</script>
</head>
<body>
<div id="demo">
<ul id="demo1">
<li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
<li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
<li><a href="#" target="_blank">没有人一开始就是高手,都是从菜鸟开始</a></li>
<li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
<li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
<li><a href="#" target="_blank">今天你写代码了吗</a></li>
<li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
</ul>
<div id="demo2"></div>
</div>
</body>
</html> 
Copier après la connexion

Le code ci-dessus implémente l'effet de défilement de la liste d'actualités. Le processus d'implémentation est présenté ci-dessous :

1.Principe de mise en œuvre :

Le principe général est le suivant. Il y a deux sous-éléments dans l'élément demo, demo1 et demo2, et le contenu de demo1 est stocké dans demo2. La raison en est que demo2 puisse suivre demo1 lors du défilement vers le haut. Sinon, il ne s'agira pas d'un défilement transparent, mais d'un défilement transparent. Lorsque le contenu de demo1 est complètement bloqué, c'est-à-dire lorsque demo1 défile complètement vers le haut, demo2 sera exactement à la position où demo1 commence à défiler, puis le scrollTop. La valeur de la démo sera réinitialisée, laissez le défilement recommencer, obtenant ainsi un effet de défilement transparent.

Ceci est un exemple de code pour implémenter un défilement transparent vers le haut de la liste d'actualités basé sur JS. J'espère que vous pourrez appliquer ce code en fonction de vos besoins réels.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal