用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 儿童节 23
2021年 端午节 36
2022年 元 旦 237
2022年 春 节 268
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现长图滚动效果

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'title定时器回顾/title/headbodybutton id='start'开启/buttonbutton id='stop'关闭/buttonscript type='text/javascript'var start = document.get......

      <!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>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/4/29 发布时间:16:42:00 点击:116 录入:齐天大圣
  • 上一篇:JavaScript使用canvas绘制坐标和线
  • 下一篇:没有了
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.1 Build 21.05.08(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021
    您正在使用IPV4(3.230.154.160)访问本站 您本次共访问本站 1 次