精华内容
参与话题
问答
  • 向上滚动

    2016-12-07 17:40:03
    向上滚动 demo *{margin:0;padding:0;} ul,li,img{margin:0;padding:0;border:0;list-style-type:none;} #luanbo{border:1px solid red;overflow:hidden;height:24px;} #info li{height:24px;line-h


    向上滚动

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" charset="utf-8" />
        <meta http-equiv="content-type" content="text/html" />
        <title>demo</title>
    </head>
    <style type="text/css">
    *{margin:0;padding:0;}
    ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
    #luanbo{border:1px solid red;overflow:hidden;height:24px;}
    #info li{height:24px;line-height:24px;}
    </style>
    <body>
        <div id="luanbo">
           <ul id="info">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
            <li>ccccccccccc</li>
            <li>ddddddddddd</li>
            <li>eeeeeeeeeee</li>
            <li>fffffffffff</li>
           </ul>
        </div>
    
    
    <script type="text/javascript">
    var odiv=document.getElementById("luanbo");
    var oul=document.getElementById("info");
    var oli=document.getElementById("info").getElementsByTagName("li");
    var iNow=0;
    function move(obj,tg){     //运动框架
    clearInterval(dt);
    var dt=setInterval(function(){
        var speed=2;
        if(tg-obj.scrollTop<speed){
            tg=obj.scrollTop;
            clearInterval(dt);
        }else{
            obj.scrollTop+=speed;
        }
    },30);    
    }
    oul.innerHTML+=oul.innerHTML;
    function star(){
    clearInterval(tm);
    var tm=setInterval(function(){
        iNow++;
        if(odiv.scrollTop>=(oli[0].offsetHeight*oli.length)/2){
            odiv.scrollTop=0;
            iNow=0;
        }else{
        var get=oli[0].offsetHeight*iNow;
        move(odiv,get);                     //运动框架
        }
    },2000); 
    }
    star();
    
    
    </script>
    </body>
    </html>


    展开全文
  • vue表格向上滚动1.开发环境 vue.js+element+ts2.电脑系统 windows 10 专业版3.在开发的过程中,我们经常会做一些表格向上滚动的效果!本次是自己总结的方法,希望对你有所帮助。3-1: 使用的插件:datav轮播表使用事例,...

    vue表格向上滚动

    1.开发环境 vue.js+element+ts

    2.电脑系统 windows 10 专业版

    3.在开发的过程中,我们经常会做一些表格向上滚动的效果!本次是自己总结的方法,希望对你有所帮助。

    3-1: 使用的插件:datav轮播表使用事例,地址是:

    http://datav.jiaminghi.com/gu...

    3-2:我们找到 轮播表,点击进入轮播表。

    3-2-1:在终端执行命令:npm install @jiaminghi/data-view

    3-2-2:在main.js中添加如下代码:// 将自动注册所有组件为全局组件

    import dataV from '@jiaminghi/data-view'

    Vue.use(dataV)

    3-3:在template 中添加如下代码:

    :rowNum="12"

    :config="configdisplacementofDam"

    style="width: 100%; height: 100%"

    />

    3-4:在methods中添加如下代码://上部分轮播表的方法

    chenlunbobiao(): void {

    this.configdisplacementofDam = {

    data: this.datadisplacementofDam, // 表数据

    header: this.headerdisplacementofDam, // 表头数据

    rowNum: 6, // 表行数

    // headerBGC: '#fff', // 表头背景色

    // oddRowBGC: '#fff', // 奇数行背景色

    // evenRowBGC: '#fff', // 偶数行背景色

    waitTime: 1000, // 轮播时间间隔(ms)

    align: "center",

    };

    },

    3-5:在mouted中添加如下代码:this.chenlunbobiao();

    3-6:在return中添加如下代码:return {

    // 轮播表数据

    headerdisplacementofDam: [

    "异常设备",

    "异常原因",

    "持续时间",

    "横偏(X)",

    "纵偏(Y)",

    ],

    datadisplacementofDam: [

    ['石马1', "6.36", "6.36", "6.36", "6.36"],

    ["石马2", "6.36", "6.36", "6.36", "6.36"],

    [

    "石马3",

    '6.36',

    "6.36",

    "6.36",

    "6.36",

    ],

    ["石马4", "6.36", "6.36", "6.36", "6.36"],

    ["石马5", "6.36", "6.36", "6.36", "6.36"],

    ["石马6", "6.36", "6.36", "6.36", "6.36"],

    ["石马7", "6.36", "6.36", "6.36", "6.36"],

    ["石马8", "6.36", "6.36", "6.36", "6.36"],

    ["石马9", "6.36", "6.36", "6.36", "6.36"],

    ["石马10", "6.36", "6.36", "6.36", "6.36"],

    ["石马11", "6.36", "6.36", "6.36", "6.36"],

    ["石马12", "6.36", "6.36", "6.36", "6.36"],

    ],

    configdisplacementofDam: {},

    };

    4.你会看到类似这样的效果:

    5.这一块的内容是向上不断的滚动。

    6.本期的教程到了这里就结束啦,是不是很简单,是不是很棒,让我们一起努力走向巅峰!在这个领域,希望你不要低头,不要认输。

    展开全文
  • 向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧,接下来为大家介绍下jquery实现无缝间歇滚动,感兴趣的朋友可以参考下哈,希望可以帮助到你们
  • <div><p>昨天的BUG #165 ,...但当滚动到底部时后便无法使用鼠标滚轮向上滚动,必须拖拽滚动条才可进行滚动</p><p>该提问来源于开源项目:ant-design/ant-design-landing</p></div>
  • js文字向上滚动轮播

    2018-10-29 10:30:52
    支持文字向上滚动轮播,采用jquery动画,可以添加点击事件,并且可以轮播点击,如果有需要可以for循环去生成<li></li>,文字循环向上滚动,实现文字轮播。
  • Flash文字滚动,向上滚动效果带源文件,编码问题,文字都乱码了,这个不要紧,用时候你改成中文后就正常了。这个Flash文字滚动其实效果还是挺不错的,文字排成行,一行三列向上滚动,自动循环滚动,带Flash8源文件。
  • 今天有个朋友问到怎么判断鼠标向上滚动或者向上滚动触发不同的事件,因为之前也想过,但当时使用了jquery.mousewheel.js这个插件,可能也有一些朋友用到的,那今天就把之前写过的一个小demo分享一下。也许网上也有很...

    今天有个朋友问到怎么判断鼠标向上滚动或者向上滚动触发不同的事件,因为之前也想过,但当时使用了jquery.mousewheel.js这个插件,可能也有一些朋友用到的,那今天就把之前写过的一个小demo分享一下。也许网上也有很多小demo,也会给大家推荐一些插件,主要用起来方便顺手能满足需求就好,自己写也好,用插件也好,这个个人喜好吧。这个只是个很简单的判断逻辑。请往下看。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>判断鼠标向下向上滚动的demo</title>
    <style>
    body{
        height: 3333px;
    }
    </style>
    <body>
        
    </body>
    <script>
    //这里主要考虑兼容的问题
    var agent = navigator.userAgent;
    if (/.*Firefox.*/.test(agent)) {
        document.addEventListener("DOMMouseScroll", function(e) {
            e = e || window.event;
            var detail = e.detail;
            if (detail > 0) {
                console.log("鼠标向下滚动");
            } else {
                console.warn("鼠标向上滚动");
            }
        });
    } else {
        document.onmousewheel = function(e) {
            e = e || window.event;
            var wheelDelta = e.wheelDelta;
            if (wheelDelta > 0) {
                console.log("鼠标向上滚动");
            } else {
                console.warn("鼠标向下滚动");
            }
        }
    }
    </script>
    </head>
    
    </html>
    View Code

     

    很简单,也很简洁,希望以后遇到的人找到自己的解决方案,或者自己动手写出合适自己的解决方法。

    转载于:https://www.cnblogs.com/zwp06/p/8398657.html

    展开全文
  • jQuery文字无缝向上滚动,jQuery图片无缝向上滚动,jQuery鼠标悬浮停止滚动,鼠标离开后,继续向上滚动
  • 不间断向上滚动的效果,想必大家都有见到过吧,本文也为大家准备一个使用js实现的不间断向上滚动效果,感兴趣的朋友可以参考下
  • jQuery带按钮向上滚动向下滚动代码是一款jqScroll.js插件实现的,调用简单,代码注释很清楚。
  • JS不间断向上滚动.rar

    2019-07-05 00:05:18
    JS不间断向上滚动
  • 产品滚动,可控制,点击向上滚动,点击向上滚动

     

    实现效果如上图

     

    源码下载地址:http://download.csdn.net/source/2818968

    展开全文
  • 本文主要分享了js实现文字无缝向上滚动的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 订单向上滚动展示代码,可显示下单时间,名字,地区,产品名称,和评价描述。 这个是我自己的网站使用的订单展示模板,下载后,打开index.html等待一下就可以看到效果
  • 文字向上滚动效果.rar文字向上滚动效果.rar文字向上滚动效果.rar文字向上滚动效果.rar文字向上滚动效果.rar文字向上滚动效果.rar
  • JQuery实现的文字列表一条一条向上滚动的效果
  • 下面小编就为大家分享一篇仿京东快报向上滚动的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下
  • jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动 jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动
  • 这是一款经过样式美化的jQuery表格信息自动向上滚动代码,鼠标悬停表格行高亮显示,并停止滚动。
  • view向上滚动

    2016-12-19 11:10:00
    之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向上滚动,也就是类似淘宝首页头条的那种滚动,所以就按照...
  • 使用jquery实现的文字向上滚动效果多的不计其数吧,间歇向上滚动却不是那么的多,所以本文简单的实现了一个,感兴趣的朋友可以参考下哈
  • jQuery排名文字无缝循环向上滚动代码,鼠标悬停时会暂停滚动,适用于抽奖显示中奖人信息、排行信息列表文字上下滚动轮播展示效果。
  • 最近给朋友帮忙的时候遇到一个列表向上滚动无缝连接功能的需求,整理了下思路,把这个功能草草的做出来了,尚未做优化完善,先记录一下吧~Html代码{{item.accountName}}{{item.accountName}}Data数据x: 0, //list1...

空空如也

1 2 3 4 5 ... 20
收藏数 3,541
精华内容 1,416
关键字:

向上滚动