web前端滚动效果

这次写的是滚动字体，首先我的附上代码：

offsetWidth:width+padding+border的值。
offsetLeft:获取当前对象与父元素之间的距离.
scrollLeft：是该对象实现的内容与实际内容的距离，即当前滚动的距离。

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
  scroll_div.scrollLeft-=scroll_begin.offsetWidth;

如果字体已经滚出的长度大于scroll_end的原长度，就要使其减掉scroll_begin的长度，即复原。（因为这三者的长度都一样).

MyMar = setInterval(Marquee,speed);
即每过speed毫秒，实行一次这个函数。

clearInterval(MyMar);
即清除这个设置的timeout。

HTML代码：

欢迎光临本网站，你想要的这里都有哦!

js代码：

function ScrollImgLeft(){
  var speed=50;
  var MyMar = null;
 var scroll_begin = document.getElementById("scroll_begin");
 var scroll_end = document.getElementById("scroll_end");
 var scroll_div = document.getElementById("scroll_div");
 scroll_end.innerHTML=scroll_begin.innerHTML;
 function Marquee(){
  if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
   scroll_div.scrollLeft-=scroll_begin.offsetWidth;
  else
   scroll_div.scrollLeft++;
  }
 var MyMar=setInterval(Marquee,speed);
  scroll_div.onmouseover = function(){
　　　　　　　clearInterval(MyMar);
　　　　　}
 　scroll_div.onmouseout = function(){
　　　　　　　MyMar = setInterval(Marquee,speed); 　　　　
　　　　　}  
}

function ScrollImgLeft(){
  var speed=50;
  var MyMar = null;
 var scroll_begin = document.getElementById("scroll_begin");
 var scroll_end = document.getElementById("scroll_end");
 var scroll_div = document.getElementById("scroll_div");
 scroll_end.innerHTML=scroll_begin.innerHTML;
 function Marquee(){
  if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
   scroll_div.scrollLeft-=scroll_begin.offsetWidth;
  else
   scroll_div.scrollLeft++;
  }
 var MyMar=setInterval(Marquee,speed);
  scroll_div.onmouseover = function(){
　　　　　　　clearInterval(MyMar);
　　　　　}
 　scroll_div.onmouseout = function(){
　　　　　　　MyMar = setInterval(Marquee,speed); 　　　　
　　　　　}  

}

图片滚动：图片滚动跟上面差不多，特别的是如果是循环无缝滚动的话，要将ul的innerHTML设置为原来的两倍，这样在最后的出现时，第一个可以无缝衔接在最后一个后面。参考网址：http://www.jb51.net/article/78342.htm

var oDiv = document.getElementById('scroll');
      var oUl = document.getElementById('ul1');
      var speed = -1300;
      var oLi= document.getElementsByTagName('li');
       oUl.style.width = oLi.length*1300+'px';
       
       function move(){
        if(oUl.offsetLeft<=-(oUl.offsetWidth*3/4)){
           oUl.style.left = 0;
        }
        else{
 
        oUl.style.left = oUl.offsetLeft + speed + 'px';
          }
      }
 
      var timer = setInterval(move,3000);//全局变量 ，保存返回的定时器
 
      oDiv.addEventListener('mouseout', function () {
        timer = setInterval(move,3000);
      },false);
      oDiv.addEventListener('mousemove', function () {
        clearInterval(timer);//鼠标移入清除定时器

      },false);

右击出现自定义菜单：

代码：

e.clientX：被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。 客户区指的是当前窗口。

function click_right(){
  var wrap = document.getElementById('wrapper');  
  wrap.style.display = 'none';  
 
 document.getElementById("form1").oncontextmenu = function(event){
   var e = event || window.event;
   wrap.style.display = "block";
   wrap.style.left = e.clientX+'px';
   wrap.style.top = e.clientY +'px';
    return false;//取消右键点击的默认事件
 }
   document.getElementById("form1").οnclick= function(e){
       if(e.button==2)
       {
     wrap.style.display = 'block';
       }
       if(e.button==0)
       {
            wrap.style.display = 'none';
       }
  }

}

特别要注意的是，要让出现的菜单漂浮在div上，要将该div的position设置为relative，菜单的position设置为absolute。

最后就是实现点击上、下一张图片相应的变化，悬浮在响应的数字上图片也变化，鼠标移开，图片自动滚动，首先附上参考网址：https://blog.csdn.net/q908555281/article/details/70314080

附上我的代码：

html代码：

         

              

                   
• 

                   
• 

                   
• 

                   
• 

              

         

         

              

                   
• 1

                   
• 2

                   
• 3

                   
• 4

              

         

         

<

         

>

js代码：
function scroll(){
       var imgs_div=document.getElementById("imgs");
     var nav_div=document.getElementById("nav");  
     //获取到图片轮播的ul对象数组  
     var imgsUl=imgs_div.getElementsByTagName("ul")[0];
     imgsUl.style.left="0";
     //获取到远点的ul对象数组  
     var nav=nav_div.getElementsByTagName("ul")[0];  
     //上一个  
     var previous=document.getElementById("previous");  
     //下一个  
     var next =document.getElementById("next");
        var index=1;
     function btnShow(cur_index){
     var list=nav.children;  
     for(var i=0;i          nav.children[i].children[0].className="hidden";  
     }  
     nav.children[cur_index-1].children[0].className="current";  
    }  
      var animTimer;  
     previous.οnclick=function(){  
            index-=1;  
            if(index<1){  
                 index=4;  
            }  
            animate(1280);  
            btnShow(index);  

       } 

       next.οnclick=function(){
            index+=1;  
            if(index>4){  
                 index=1;  
            }  
            animate(-1280);  
            btnShow(index);  
       }  
      
       function animate(offset){
            var newLeft=parseInt(imgsUl.offsetLeft)+offset;
            if(newLeft>0){          //如果图片已经右滚到第一张，让它回到倒数第一张
                 show(-3840);      
            }else if(newLeft<-3840){  //如果图片已经左滚到最后一张，让它回到第一张
                 show(0);      
            }else{
                 show(newLeft);  
            }  
      
       }  
       function show(offset)
       {
          imgsUl.style.left=offset+"px";
       }
    var timer;  
    function play(){
         timer=setInterval(function(){  
          next.onclick();  
         },2000)  
    }  
      function initImgs(cur_index){    //点击上下或数字，不需要自动播放
      clearInterval(timer);  
      clearInterval(animTimer);  
      var off=cur_index*1280;  
      imgsUl.style.left=-off+"px";  
    }  
     
       for(var i=0;i         nav.children[i].index=i;  
         var sd=nav.children[i].index;  
         nav.children[i].οnmοuseοver=function(){
              var now_index=this.index;  
              //这里很重要，要让当前的图片的index的值等于鼠标选中的图片   
              index=this.index+1;  
              initImgs(this.index);  
              btnShow(this.index+1);  
         }  
          nav.children[i].οnmοuseοut=function(){  
               play();  
          }  
       }

  }

好了，就是这些了，我也不知道最后会不会被采取。