手机自适应网页ul li 列表滚动

最新推荐文章于 2021-10-07 10:16:21 发布
最新推荐文章于 2021-10-07 10:16:21 发布
阅读量447 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43503385/article/details/106719244
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>滚动列表</title>
</head>
<style>
	 .sp3 , .sp4{
        color: red;
    }
    a{
        color: black;
    }
    li {
        list-style-type:none;     /*隐藏li点*/
    }
    div {
        margin: 0 auto;
        display: block;
    }
    .box2{
        clear: both;
        padding: 0 10px;
    }
    .clearfix{
        zoom: 1;
    }
    .DhPriceBox{
        width: 100%;
        overflow: hidden;
    }
    .wai_box{
        width: 100%;
        float: left;
        background: #fff;
    }

    .title {
        width: 100%;
        height: 40px;
        float: left;
        background: #fbfbfb;
    }

    .title span {
        float: left;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
    }

    .t1 {
        width: 40%;
        text-indent: 5px;
    }

    .t2 {
        width: 20%;
    }

    .t3 {
        width: 20%;
    }

    .t4 {
        width: 20%;
    }

    .zhisuh_kuang {
        width: 100%;
        float: left;
        /* padding: 0 27px; */
    }

    .ul1 {
        margin: 0;
        padding: 0;
        border: none;
        list-style-type: none;
    }

    .dh_item {
        width: 100%;
        float: left;
    }

    .ul_kuang {
        float: left;
        width: 100%;
        line-height: 36px;
    }

    .ul_kuang span {
    	border-bottom: #f1f1f1 1px solid;
        float: left;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        text-overflow: ellipsis;
        /* 字体超出省略 */
        white-space: nowrap;
        overflow: hidden;
    }

    .sp1 {
        width: 40%;
        text-indent: 5px;
    }

    .sp2 {
        width: 20%;
    }

    .sp3 {
        width: 20%;
    }

    .sp4 {
        width: 20%;
    }
</style>

<body>
    <!-- 标题 -->
    <div class="box2 clearfix">
    <div class="DhPriceBox">
    <div class="wai_box">
    <div class="title">
        <span class="t1">标题1</span>
        <span class="t2">标题2</span>
        <span class="t3">标题3</span>
        <span class="t4">标题4</span>
    </div>
    <!-- 指数头部 -->
    
        <div class="zhisuh_kuang">
            <ul class="ul1">
                <div class="dh_item">
                    <div id="box" style="overflow: hidden; position: relative; height: 280px;">
                        <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()" style="height: 280px; position: relative; padding: 0px; margin: 0px; top: 0px;>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                 <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li><li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                 <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <li class="ul_kuang" style="height: 36px;">
                                <a href="#">
                                <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>
                                <span class="sp2">¥12333</span>
                                <span class="sp3">¥12333</span>
                                <span class="sp4">¥100.0%</span>
                                </a>
                            </li>
                            <!--<li class="ul_kuang" style="height: 36px;">-->
                            <!--    <a href="#">-->
                            <!--    <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>-->
                            <!--    <span class="sp2">¥12333</span>-->
                            <!--    <span class="sp3">¥12333</span>-->
                            <!--    <span class="sp4">¥100.0%</span>-->
                            <!--    </a>-->
                            <!--</li>-->
                            <!--<li class="ul_kuang" style="height: 36px;">-->
                            <!--    <a href="#">-->
                            <!--    <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>-->
                            <!--    <span class="sp2">¥12333</span>-->
                            <!--    <span class="sp3">¥12333</span>-->
                            <!--    <span class="sp4">¥100.0%</span>-->
                            <!--    </a>-->
                            <!--</li>-->
                            <!--<li class="ul_kuang" style="height: 36px;">-->
                            <!--    <a href="#">-->
                            <!--    <span class="sp1">呜呜呜撒擦擦擦擦的深V深V深V深V是大V深V深V深V是拭时擦出呜</span>-->
                            <!--    <span class="sp2">¥12333</span>-->
                            <!--    <span class="sp3">¥12333</span>-->
                            <!--    <span class="sp4">¥100.0%</span>-->
                            <!--    </a>-->
                            <!--</li>-->
                        </ul>
                        <ul id="con2" onMouseOut="Up()" onMouseOver="Stop()" style="height: 280px; position: relative; padding: 0px; margin: 0px; top: 0px;"></ul>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

    <!-- 指数结束 -->
</body>
<script type="text/javascript" charset="utf-8">
    var box=document.getElementById("box");
    var con1=document.getElementById("con1");
    var con2=document.getElementById("con2");
    var s=document.getElementsByTagName("a");

    var speed=50;
    con2.innerHTML=con1.innerHTML;
    function  ScrollUp(){
        if( box.scrollTop>=con1.scrollHeight){
            box.scrollTop=0;
        }else
           box.scrollTop++;
    }
    var i=setInterval("ScrollUp()",speed);
    function Stop(){
        clearInterval(i);
    }
    function Up(){
        i=setInterval("ScrollUp()",speed);
    }
</script>
</html>
窩時妳嘚埃菲尔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设置ul li内容自动上下滚动
03-03
可以设置的内容上下滚动，很好的东西哦
jsp ul 下的li 标签循环滚动
04-16
在`jsp`页面中，我们经常会遇到需要实现元素动态效果的需求，例如`ul`（无序列表）下的`li`（列表项）标签进行循环滚动。这种效果可以增强用户界面的交互性和吸引力，常见于新闻滚动、公告栏或者菜单导航等场景。 ...
ul、li替换el-table并使用定时器实现列表自动滚动效果
code_ING的博客
10-07 1165
ul、li替换el-table并使用定时器实现列表自动滚动效果使用ul、li替换el-table并加入列表自动滚动效果ul、li替换el-table使用定时器实现列表自动滚动 使用ul、li替换el-table并加入列表自动滚动效果 ul、li替换el-table 存在以下两个问题： 为什么要使用ul、li替换el-table？ el-table是饿了么的表格组件，存在一定的局限性。首先 （1）不一定所有的前端项目都是用vue和饿了么，加上饿了么组件安装后会使得项目比较大，在单页面简单应用中性价比不是
vue—ul.li列表滚动
bad___man的博客
08-24 3421
vue—ul.li列表滚动 直接上干货 安装插件 npm install vue-seamless-scroll -s 引入插件 import vueSeamlessScroll from 'vue-seamless-scroll' 引用插件 components: { vueSeamlessScroll }, 使用插件 <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-opt
移动端手机自适应
精通PHP,JAVA,上海话，广东话，英语，汉语等各种语言
10-29 316
<nav class="navbar navbar-default navbar-fixed-top"> <div class="headerlog"> <img src="/fcc/img/logo-01.png" alt="" class="img-responsive"> </div> ...
利用vue动画渲染实现ul中li标签的定时滚动效果
qq_36343904的博客
11-27 1840
利用vue动画渲染实现ul中li标签的定时滚动效果 近来公司业务新需求需要写一个大屏页面，由于大屏展示的数据量有限，因此很多地方需要用到页面的滚动效果，如图所示，以下两张图实际上都是动态的向上翻滚的效果，代码是以第一张图为例 vue官方文档====>vue关于动画的官方文档 1.DOM渲染 <template lang="pug"> .policyoutput .echarts-title span.dot span.echarts-titleL 末端空调状态
首页滚动图片自适应源码模板
05-17
在`index.html`文件中，你可以看到`<div>`标签被用来创建一个滚动图片的区域，`<ul>`和`<li>`标签则分别表示图片列表和每张图片。HTML代码可能会包含`data-*`属性，这些属性用于存储自定义数据，例如图片链接和描述...
仿新浪微博高度自适应无缝滚动
12-06
在网页设计中，实现“仿新浪微博高度自适应无缝滚动”的效果是一种常见的动态展示技术，它主要用于展示大量的内容，如微博、新闻或者评论等，让用户在有限的屏幕空间内浏览到更多的信息。这种滚动方式能够提供良好的...
JQuery文字列表向上滚动的代码
10-26
3. **响应式设计**：根据不同屏幕尺寸自适应调整滚动速度和列表项的高度，确保在各种设备上都有良好的显示效果。 综上所述，通过以上步骤和方法，我们可以使用 JQuery 轻松地实现实时滚动的文字列表效果，不仅增强...
html嵌入html，高度自适应，标签切换。
02-08
在HTML中，li是列表项的标签，常用于`<ul>`（无序列表）或`<ol>`（有序列表）中。在这里，li可能被用作导航菜单的选项，每个li元素代表一个可切换的HTML页面。当用户点击某个li元素时，通过JavaScript或者jQuery来...
自动滚动+自适应+手机触屏滑动效果.rar
08-08
网上找了好久，难得找到的代码，能滚动的不能自动，能自动的不能滑屏，本代码，集自适应，自动滚动，手机触屏于一体。精心改良，可以完美兼容。奉献给大家了
手机网站列表HTML5页面
11-03
手机网站列表HTML5页面 手机网站列表HTML5页面 手机网站列表HTML5页面
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
10-19
主要介绍了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),需要的朋友可以参考下
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
10-09
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
一款很酷的li列表美化实例
06-21
一款很酷的li列表美化实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
html %3cli水平,响应式布局、移动端适配
weixin_39789094的博客
06-17 272
导读适配问题，是前端开发中经常会遇到的，里面可能会遇到非常多的问题，比如：1px 问题UI 图完美适配方案iPhone 适配方案横屏适配高清屏图片模糊问题...上面这些问题有的人可能已经知道如何解决了，但是问题产生的原理，以及解决方案的原理可能会模糊不清或者一知半解。而在探寻这些问题的过程中，我们会遇到非常多的概念，比如：像素、分辨率、PPI、DPI、DP、DPR、视口扽等，这些概念往往分不清。这...
利用JQuery对被隐藏的列表(ul)元素(li)强制进行滚动(Scroll)的办法
weixin_33768481的博客
02-01 147
问题描述： ul列表中包含多个li行元素。ul容器的整体高度是固定的，当li数量较多时ul会出现滚动条，如果用户默认选中的元素不在显示区域中（可能因为位置靠后而被隐藏了），那么此时就需要通过Js函数让ul强制滚动以便显示出默认选中的元素。 解决思路： 通过JQuery通过获取整个ul的高度后计算出需要滚动的距离 实现办法： $('#yourUL').scrollTop($('...
使ul li中宽度自适应
O-DIO的博客
10-13 979
在样式中加入以下内容 ul{ float:left; width:auto;} li{width:auto; white-space:nowrap;}
ElementUI实现列表滚动展示
q879936814的博客
07-27 7468
想要的效果是将列表滚动展示，滚动到底就回到第一个，继续滚动。 思路：肯定要用scrollTop(往上滚动)，然后用定时器来控制它，鼠标悬浮就清除定时器，移开就重启！ Ok上代码 这是我想滚动的部分 <div ref="message" class="messages"> <div ref="infobord1" class="content-issue"> <p v-for="(item,index) in messages" :class=
div+css 横向滚动公告 自适应公告长度
最新发布
06-02
要实现自适应长度的横向滚动公告，可以使用CSS3的flex布局和marquee标签。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值