js pour obtenir des compétences de défilement transparentes effect_javascript

L'exemple de cet article présente les fonctions dont js a besoin pour obtenir des effets de défilement fluides, ainsi que le code clé js, et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

Opération de rendu :

En combinaison avec les connaissances apprises ci-dessous, réalisez un exercice étendu complet simulé~~ La fonction générale est la suivante :

• 1. Après avoir cliqué sur le html, l'image se déplacera et s'affichera automatiquement
• 2. Cliquez sur les directions gauche et droite pour changer la direction du mouvement de l'image (changer la valeur de gauche, positive ou négative)
• 3. Une fois que la souris entre et sort de l'image, l'image se met en pause (setInterval, clearInterval)
• 4. Déplacez la souris sur l'image et mettez-la en surbrillance (a:hover)
• 5. Cliquez sur la petite image, la grande image ci-dessous changera
• 6. La zone de texte change à mesure que l'image change (sans succès, doit être améliorée)

Code spécifique :

window.onload = function(){

　　//声明部分( 现在的习惯是要写什么声明什么， 一起写容易搞忘了。。也不知道好不好这样)

　　var oDiv = document.getElementById('box');

　　var oUl = oDiv.getElementsByTagName('ul');

　　var oLi = oUl.getElementsByTagName('li');

　　var speed = 2;

　　var timer = null;

　　　

　　//让ul的内容增一倍，从而实现无缝滚动

　　oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

　　oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

　　//move函数

　　function move(){
　　　　oUl.style.left = oUl.offsetLeft + speed + 'px';
　　　　//控制左
　　　　if(oUl.offsetLeft < -oUl.offsetWidth/2){
　　　　oUl.style.left = 0;
　　　　}

　　　　//控制右
　　　　if(oUl.offsetLeft > 0){
　　　　oUl.style.left = -oUl.offsetWidth/2 + 'px';
　　　　}

　　}

　　　　//图标点击~ 控制移动方向

　　　　var oLeft = document.getElementById('jt_left');
　　　　var oRight= document.getElementById('jt_right');

　　　　oLeft.onclick = function(){
　　　　speed = -2;
　　　　}

　　　　oRight.onclick = function(){
　　　　speed = 2;
　　　　}

　　　　//鼠标移入移出效果

　　　　oDiv.onmouseover = function(){
　　　　　　clearInterval(timer);
　　　　}

　　　　oDiv.onmouseout = function(){
　　　　　　timer = setInterval(move,20);
　　　　}
　　　　timer = setInterval(move,20); 

　　　　//点击获取大图

　　　　

　　　　var aA = oDiv.getElementsByTagName('a');
　　　　for(var i=0;i<aA.length;i++){
　　　　　　aA[i].onclick = function(){
　　　　　　　　showPic(this);
　　　　　　　　return false;
　　　　　　}
　　　　}
　　　　
　　　　function showPic(whichpic){
　　　　　　var source = whichpic.href;
　　　　　　var placeholder = document.getElementById('placeholder');
　　　　　　placeholder.src = source;
　　　　}

}

Pour l'effet final de remplacement de texte, je voulais utiliser des images pour faire changer les chiffres correspondant à la zone de texte~~ Cela a échoué, je ne connais pas la raison. Cet aspect doit encore être amélioré. J'espère que tout le monde pourra. fournir de bonnes suggestions. Cependant, le défilement transparent dans js est toujours implémenté normalement. J'espère que cela pourra être utile à tout le monde.