首页 > 其他分享 >js实现文字左右轮播

js实现文字左右轮播

时间:2023-04-04 15:00:12浏览次数:40  
标签:文字 轮播 js ul 自动 var 滑动 elementId

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .textDiv{
                position: relative;
                width: 70%;
                margin: 0 auto;
            }
            
            ul>li {
                float: left;
                text-align: center;
                height: 38px;
                margin-top: 0;
                margin-left: 10px;
                list-style: none;
            }
            
            ul>li:hover {
                color: #18C0CF;
            }
        </style>
    </head>
    <body>
        <div class="textDiv">
                <span style="float:left;color: red;" id="warningTipSpan"></span>
                <div id="rotationDiv" style="width:90%;float: left;overflow: hidden;">
                    <div style="width:8000px;height: 30px; background:none;margin-left: 0;">
                        <ul style="float:left;">
                            <li>文字自动滑动1</li>
                            <li>文字自动滑动2</li>
                            <li>文字自动滑动3</li>
                            <li>文字自动滑动4</li>
                            <li>文字自动滑动5</li>
                            <li>文字自动滑动6</li>
                            <li>文字自动滑动7</li>
                            <li>文字自动滑动8</li>
                            <li>文字自动滑动9</li>
                            <li>文字自动滑动10</li>
                            <li>文字自动滑动11</li>
                            <li>文字自动滑动12</li>
                            <li>文字自动滑动13</li>
                            <li>文字自动滑动14</li>
                            <li>文字自动滑动15</li>
                        </ul>
                        <ul style="float:left;">
                        </ul>
                    </div>
                </div>
            </div>
            
            <script type="application/javascript">
                //文字左右轮播js
                
                //不知道什么原因,传递的是元素id,获取的element变成了obj对象
                function marquee(elementId, direction){
                    var obj = elementId;
                    var obj1 = document.querySelector("#"+elementId.id+" > div > ul:nth-child(1)");
                    var obj2 = document.querySelector("#"+elementId.id+" > div > ul:nth-child(2)");
                    if (direction == "up"){
                        if (obj2.offsetTop - obj.scrollTop <= 0){
                            obj.scrollTop -= (obj1.offsetHeight + 20);
                        }else{
                            var tmp = obj.scrollTop;
                            obj.scrollTop++;
                            if (obj.scrollTop == tmp){
                                obj.scrollTop = 1;
                            }
                        }
                    }else{
                        if (obj2.offsetWidth - obj.scrollLeft <= 0){
                            obj.scrollLeft -= obj1.offsetWidth;
                        }else{
                            obj.scrollLeft++;
                        }
                    }
                }
                
                function marqueeStart(elementId, direction){
                    var obj = document.getElementById(elementId);
                    var obj1 = document.querySelector("#"+elementId+" > div > ul:nth-child(1)");
                    var obj2 = document.querySelector("#"+elementId+" > div > ul:nth-child(2)");
                
                    obj2.innerHTML = obj1.innerHTML;
                    var marqueeVar = window.setInterval("marquee("+ elementId +", '"+ direction +"')", 30);
                    obj.onmouseover = function(){
                        window.clearInterval(marqueeVar);
                    };
                    obj.onmouseout = function(){
                        marqueeVar = window.setInterval("marquee("+ elementId +", '"+ direction +"')", 30);
                    };
                }
            
                marqueeStart("rotationDiv", "left");
            
            </script>
    </body>
</html>

 

标签:文字,轮播,js,ul,自动,var,滑动,elementId
From: https://www.cnblogs.com/yangjcBlog/p/17286425.html

相关文章

  • QT中文字符显示问题
    解决方案有两个(1)使用QString::fromLocal8Bit(constQByteArray&str)(2)直接在头文件加上#pragmaexecution_character_set("utf-8")此外将int类型转为QString的方式不是QString(num),这样转换在qDebug会输出unicode。正确方式为QString::number(num)......
  • 如何编写高质量的 JS 函数(2) -- 命名/注释/鲁棒篇
    vivo互联网技术微信公众号 作者:杨昆上篇《如何编写高质量的JS函数(1)--敲山震虎篇》介绍了函数的执行机制,此篇将会从函数的命名、注释和鲁棒性方面,阐述如何编写高质量的JS函数。(一)函数命名一、目前前端的函数命名存在什么问题从上图可以知道,命名和缓存是计算机科学中的......
  • Wiki.js配置LDAP认证
    安装好wikijs之后,可以进行进一步的详细配置.这里介绍LDAP认证的配置.在管理->身份验证->添加策略->选择LDAP/AD,如下:接下来进行详细配置:显示名称:按需修改是否启用:是LDAPURL:格式为:ldap://serverhost:389orldaps://serverhost:636Admin......
  • Wiki.js配置LDAP认证
    安装好wikijs之后,可以进行进一步的详细配置.这里介绍LDAP认证的配置.在管理->身份验证->添加策略->选择LDAP/AD,如下:接下来进行详细配置:显示名称:按需修改是否启用:是LDAPURL:格式为:ldap://serverhost:389orldaps://serverhost:636Admin......
  • Three.js 进阶之旅:全景漫游-初阶移动相机版
    Three.js进阶之旅:全景漫游-初阶移动相机版 声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交......
  • 老代码考古,seajs为什么能够和CMD一样同步模式的方式使用require()方法
    我们知道在服务端的node可以同步block的方式加载别的js库文件,在服务端使用会block的require()函数来加载,就是所谓的CMD、CommonJS规范。而在浏览器端里的js则因为网络延迟等各种因素,不能使用同步block方式加载js库,而是异步回调callback加载的方式,也就是所谓的AMD模块规范。那么......
  • element Plus 中el-tooltip 和 el-popover超出宽度显示文字提示 否则不提示
    说明:设置固定宽度。文字超出宽度,用...显示。鼠标悬停到文字上,用el-tooltip显示全部文字内容如果文字未超出宽度,el-tooltip、el-popover隐藏。html:1<el-tooltip:content="node.label"placement="bottom"effect="light":disabled="isShowTooltip">2<span......
  • JS中 filter()方法的使用
    一、作用filter用于对数组进行过滤。它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测、不会改变原始数组二、语法Array.filter(function(currentValue,indedx,arr),thisValue)  其中,函数function为必须,数组......
  • JS 字符串补0
    padStart用另一个字符串填充当前字符串(如果需要的话,会重复多次),以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。语法padStart(targetLength)padStart(targetLength,padString)参数targetLength当前字符串需要填充到的目标长度。如果这个数值小于当前字......
  • js 递归遍历树形结构数据,返回新的数组
    工作中,我们经常会遇到这样的情况:后端返回的数组,只需要取name、value生成新的数组,或者是将某个属性名修改,生成新的数组。递归是一种常见的解决问题的方法,即把问题逐渐简单化。“递归”的基本思想是:自己调用自己。实例如下handleDg(arrs,that){arrs.map((item,index)......