博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页上无缝滚动的实现
阅读量:7129 次
发布时间:2019-06-28

本文共 474 字,大约阅读时间需要 1 分钟。

无缝滚动:

1.实现原理:在一个固定大小的div里面(div需要设置overfloow:hidden溢出部分隐藏!)改变图片的offsetleft或者offsetright的值!从而实现图片移动(需要给图片加position:absolute)!

2.改变left或right的值,则需要用到定时器setInterval(调用的函数,调用的时间)

3.当图片的left或则right大于了图片的本身长度,这时候就会出现空白!解决的方法很简单就是复制一个本身!当left或righr大于或等于一般的时候就把left或right重新赋值为0.

代码如下:

 

       
  •    
    oul.style.left=oul.offsetLeft-sudu+"px";
    if(oul.offsetLeft<=-300){
            oul.style.left=0;
    }  

     

    转载于:https://www.cnblogs.com/12315-/p/4735178.html

    你可能感兴趣的文章
    Java 文件流操作.
    查看>>
    《11招玩转网络安全》之第三招:Web暴力破解-Low级别
    查看>>
    Eclipse快捷键大全
    查看>>
    Android实现TextView字符串波浪式跳动
    查看>>
    NumPy—random随机数生成函数总结
    查看>>
    第10章节-Python3.5-Django路由分发
    查看>>
    排序三 直接插入排序
    查看>>
    输入输出流体系图
    查看>>
    玩转报表排名
    查看>>
    《函数响应式领域建模》读后感
    查看>>
    一入前端深似海,从此红尘是路人系列第四弹之未来前端路该何去何从
    查看>>
    java笔记--笔试中极容易出错的表达式的陷阱
    查看>>
    第140天:前端开发中浏览器兼容性问题总结(一)
    查看>>
    socket编程的select模型
    查看>>
    智能医疗的春天在哪里?
    查看>>
    Kali Linux 无线渗透测试入门指南 第二章 WLAN 和固有的不安全性
    查看>>
    MyExcel 2.1.2 版本发布,重要 Bug 修复
    查看>>
    广汽与蔚来达成合作,将共同投资12.8亿元创立新能源汽车公司
    查看>>
    量子力学,整合了三种自然相互作用力
    查看>>
    亚马逊新专利,让无人机运送充电器为电动车充电
    查看>>