JavaScript实现长图滚动效果

本文实例为大家分享了JavaScript之长图滚动的具体代码，供大家参考，具体内容如下

长图的滚动会涉及定时器：

我们先来回顾下定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器回顾</title>
</head>
<body>
    <button id="start">开启</button>
    <button id="stop">关闭</button>
    <script type="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var num = 0,timer = null;

        start.onclick = function (){
            // 使用定时器的时候 先清除原有定时器 再开启定时器 可以试着将下边的clearInterval(timer);注释掉然后多次点击开启按钮对比效果
            clearInterval(timer);
            timer = setInterval(function (){
                num++;
                console.log(num);
            },1000)
        }
        stop.onclick = function (){
            clearInterval(timer);
        }
    </script>
</body>
</html>

温习完定时器内容后，来看长图滚动的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长图滚动效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
   background-color: #000;
  }
        #box{
   width: 658px;
   height: 400px;
   border: 1px solid #ff6700;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
  }
        #box img{
   position: absolute;
   top: 0;
   left: 0;
  }
        #box span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #box #top{
   top: 0;
  }
  #box #bottom{
   bottom: 0;
  }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1.获取事件源
        var box = document.getElementById('box');
  var pic = document.getElementsByTagName('img')[0];
  var divTop = document.getElementById('top');
  var divBottom = document.getElementById('bottom');

        // 2.添加事件
        var num = 0,timer = null;
        divBottom.onmouseover  = function  () {
            // 清除之前的加速效果
   clearInterval(timer);
   //  让图片向下滚动
   timer = setInterval(function  () {
     num -= 10;
     // 这个-3666是根据图片自己调控的
    if(num >= -3666){
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },50);
  }
  divTop.onmouseover  = function  () {
   clearInterval(timer);
   //  让图片向上滚动
   timer = setInterval(function  () {
     num += 10;
    if(num <= 0){
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },100);
  }
  // 鼠标移开则停止滚动
  box.onmouseout = function () {
   clearInterval(timer);
  }
    </script>
</body>
</html>

这里不放效果图了，需要可以自己试试（记得找长图）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

  • JS实现长图上下滚动效果

    本文实例为大家分享了JS实现长图上下滚动的具体代码,供大家参考,具体内容如下 案例描述 将一张长图放在某一固定长宽的盒子里,当鼠标置于盒子的上半部分时,图片向下滑直到到达图片的底部停止:当鼠标置于盒子的下半部分时,图片向上滑直到到达图片的顶部停止. 案例图示 HTML <div id="box"> <img id="pic" src="./program1/images/1.jpg" alt=""> &

  • JS图片无缝、平滑滚动代码

    非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

  • js实现图片左右滚动效果

    js实现图片左右滚动效果

    需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同. 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerMo

  • 用js实现的一个Flash滚动轮换显示图片代码生成器

    复制代码 代码如下: <!--文件头模板--> <SCRIPT src=top.js></SCRIPT> <SCRIPT language=javascript>     writeTop('Flash滚动显示图片代码生成','2006-10-18'); </SCRIPT> <!--以下为内容--> <SCRIPT> //运行代码 function runEx(cod1)  {      cod=document.getE

  • js jquery做的图片连续滚动代码

    核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){ $(".bannerbutton li").each(                       function(){                              $(this).click(        

  • JS实现图片横向滚动效果示例代码

    JS实现图片横向滚动效果示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现图片无缝滚动特效

    js实现图片无缝滚动特效

    首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter

  • div+css布局的图片连续滚动js实现代码

    html布局代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • JS实现div内部的文字或图片自动循环滚动代码

    复制代码 代码如下: <style type="text/css"> .content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} dl{width:400px;height:30px;border:1px solid black;} </style> <div class

随机推荐