请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

js实现文字、图片向上向左无缝滚动

个人博客 2020-11-17 18:18 杨青青博客 57
文字或图片实现向上无缝滚动<divid="colee"style="overflow:hidden;height:80px;"><divid="colee1"><li><ahref="#">文字或图片实现向上无缝滚动</a></li><li><ahref="#">文...

文字或图片实现向上无缝滚动

html部分

<div id="colee" style="overflow:hidden;height:80px;">
    <div id="colee1">
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
        <li><a href="#">文字或图片实现向上无缝滚动</a></li>
    </div>
    <div id="colee2"></div>
</div>

js部分

var speedi=80;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
    //当滚动至colee1与colee2交界时
    if(colee2.offsetTop-colee.scrollTop<=0){
        colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
    }else{
        colee.scrollTop++
    }
}
var MyMar1=setInterval(Marquee1,speedi)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speedi)}

文字或图片实现向左无缝滚动

html部分

<div id="colee_left" style="overflow:hidden;width:200px;">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td id="colee_left1" valign="top" align="center">
                <table cellpadding="2" cellspacing="0" border="0">
                    <tr align="center">
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                        <td><a href="#">文字或图片实现向左无缝滚动</a></td>
                    </tr>
                </table>
            </td>
            <td id="colee_left2" valign="top"></td>
        </tr>
    </table>
</div>

js部分

//使用div时,请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
        colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
    else{
        colee_left.scrollLeft++
    }
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

本文转载:杨青青博客

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:js实现文字、图片向上向左无缝滚动

本文地址:https://www.cbing.net/daima/4.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1