jquery 文字滚动

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量345 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51188380/article/details/129266709
版权 
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=(device-dpi)/2" />



    <title>文字滚动</title>

    <style>
        @charset "utf-8";
        /* author lyc */

        * {
            margin: 0px;
            padding: 0px;
            font-family: '微软雅黑';
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        li {
            list-style: none
        }

        img {
            border: none
        }

        a {
            color: #fff;
            display: block;
            text-decoration: none;
        }


        body {}

        /* -------------------------摇奖排行榜-----------------------------------  */
        .Top_Record {}

        .record_Top {
            width: 90%;
            height: 50px;
            background-size: contain;
            text-align: center;
            line-height: 50px;
            margin: 30px auto 0px;
            color: #fff;
        }


        .topRec_List dl,
        .maquee {
            width: 90%;
            overflow: hidden;
            margin: 0 auto;
            color: #7C7C7C
        }

        .topRec_List dd {
            float: left;
            text-align: center;
            border-bottom: 1px solid #1B96EE;
            color: #1B96EE;
        }

        .topRec_List dl dd:nth-child(1) {
            width: 17%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(2) {
            width: 18%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(3) {
            width: 25%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(4) {
            width: 40%;
            height: 40px;
            line-height: 40px;
        }

        .maquee {
            height: 195px;
        }

        .topRec_List ul {
            width: 100%;
            height: 195px;
        }

        .topRec_List li {
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 12px;
            border-bottom: 1px dashed #aaa;
        }

        .topRec_List li div {
            float: left;
        }

        .topRec_List li div:nth-child(1) {
            width: 17%;
        }

        .topRec_List li div:nth-child(2) {
            width: 18%;
        }

        .topRec_List li div:nth-child(3) {
            width: 25%;
        }

        .topRec_List li div:nth-child(4) {
            width: 40%;
        }



        .apple,
        .aa {
            width: 90%;
            height: 50px;
            overflow: hidden;
            margin: 30px auto;
            border: 1px solid #1B96EE;
        }

        .apple a,
        .aa a {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            color: #1B96EE;
        }

        .aa {
            word-wrap: break-word;
            line-height: 50px;
            color: #1B96EE;
        }
    </style>
    <script src="https://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>



</head>



<body>







    <!-- -------------摇奖排行榜---------------  -->

    <div class="Top_Record">

        <div class="record_Top">
            <p>摇奖排行榜</p>
        </div>

        <div class="topRec_List">

            <dl>

                <dd>编号</dd>

                <dd>姓名</dd>

                <dd>奖项</dd>

                <dd>时间</dd>

            </dl>

            <div class="maquee">

                <ul>

                    <li>

                        <div>1</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>2</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>3</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>4</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>5</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>6</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>7</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                    <li>

                        <div>8</div>

                        <div>王**</div>

                        <div>中了30元</div>

                        <div>2014/12/30 14:20</div>

                    </li>

                </ul>

            </div>

        </div>

    </div>





    <div class="apple">

        <ul>

            <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>

            <li><a href="#" target="_blank">怎么爱你都不嫌多</a></li>

            <li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li>

            <li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li>

            <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>

            <li><a href="#" target="_blank">就像天边最美的云朵</a></li>

            <li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li>

            <li><a href="#" target="_blank">种下希望就会收获</a></li>

        </ul>

    </div>





    <div class="aa">



        <marquee direction="left">

            求赞求评论求好评球动力啊~~~ 抽空整理需要很大的耐心的= = 让我继续有无偿奉献(免jq币下载)的动力→_→

        </marquee>
    </div>

    <div class="aa" id="bb">
        <div class="fhtable" style="width: 2000px;background: red;display: flex;">
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
            <div style="width: 10px;margin-left: 10px;background-color: #7C7C7C;">123</div>
        </div>
    </div>



    <script type="text/javascript">

        function autoScroll(obj) {
            $(obj).find("ul").animate({

                marginTop: "-39px"

            }, 500, function () {
                $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);

            })

        }

        $(function () {
            setInterval('autoScroll(".maquee")', 3000);
            setInterval('autoScroll(".apple")', 2000);
        })

        $(document).ready(function () {

            $(".fhtable").each(function (index, element) {
                element.onwheel = function (event) {
                    var table = $(element).parents("#bb");
                    var right = $(element).width() - table[0].offsetWidth;
                    console.log(right)
                    if (table.scrollLeft() < right && event.deltaY > 0) {
                        event.preventDefault();
                        var left = (table.scrollLeft() + 50);
                        table.scrollLeft(left)
                    }
                    if (table.scrollLeft() > 0 && event.deltaY < 0) {
                        event.preventDefault();
                        var left = (table.scrollLeft() - 50);
                        table.scrollLeft(left)
                    }
                }
            })

        });

    </script>


</body>

</html>

桐浦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery--文字滚动
a432qbc的博客
06-29 764
文字滚动
jquery滚动条操作
weixin_44021910的博客
07-05 3897
在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。 面对这种问题，PC里使用了分页效果，将数据分成一页页，换页时请求当前页数据， 而屏幕较小的移动端，分页就不怎么好看了，常用的方法是滚动到底部时继续加载数据 滚动加载其实也是一种分页，只是不使用页码而已。 （一）、滚动事件的效果和原理 效果： 滚动到当前页的底部时...
html5+echarts全屏政务大数据共享交换平台可视化大屏幕展示模板
07-12
注：无后台 +echarts全屏政务大数据共享交换平台可视化大屏幕展示模板
JS特效第104弹：jQuery实现文字无缝滚动效果
weixin_38343072的博客
01-23 560
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
字幕横向滚动jq、原生js两种方法
weixin_44558497的博客
11-19 661
代码参考了别人的，但是都没有写原理或更详细的解释，在此总结一下。 jq-原理：元素position定位，然后控制left的值，让left从最右边开始 慢慢减少到最左边直到超过自身宽度后，left（重新赋值）又从最左边开始。 缺点：不用jq的animate的话闪屏比较严重，必须引入jq，如果是移动端用zepto则没有对应的animate方法。 <!DOCTYPE html>...
jquery实现文字的上下滚动效果
热门推荐
gengyudan的专栏
05-16 1万+
效果图：       jQuery插件版文字轮流滚动，一步一停                 function scroll_news(){     $(function(){     $('#dvmq li').eq(0).fadeOut('slow',function(){     //   alert($(this).clone().html());
jQuery文字滚动切换动画特效
06-24
"jQuery文字滚动切换动画特效"就是一个专门针对这一需求的解决方案。这个特效利用了jQuery库的强大功能，为文字展示带来富有吸引力的变化，使得信息传递更为生动有趣。 jQuery是一个轻量级、高性能的JavaScript库，...
jquery文字滚动效果无缝
11-19
以下是关于"jquery文字滚动效果无缝"的详细知识点： 1. **jQuery基础**：首先，你需要对jQuery的基本用法有所了解，如选择器（如$("#id")，$(".class")）、DOM操作（如$("#element").html()）和事件绑定（如$("#...
JQuery 文字滚动
09-12
**jQuery文字滚动**是一种网页动态效果，用于展示文本信息，特别是在有限的空间内显示大量内容时。这个技术使得网站能够以滚动的方式展示新闻标题、公告或者菜单等，吸引用户的注意力并节省网页空间。在本示例中，...
jQuery文字滚动鼠标点击停止特效特效代码
03-20
总结来说，jQuery文字滚动鼠标点击停止特效是一个结合了JavaScript事件处理和DOM操作的实例，它展示了jQuery在实现动态网页效果方面的强大能力。通过理解和实践这样的特效，开发者不仅可以提升自己的技能，也能为...
jQuery文字滚动显示
02-15
总结来说，jQuery文字滚动显示是通过选择器定位元素，结合动画方法来实现的。理解jQuery的基本用法和动画原理，可以轻松创建各种动态效果，提升网页的用户体验。在实际项目中，根据需求和场景灵活运用，将使页面更加...
JQuery实现文字无缝滚动效果(Marquee插件)
feifei20081014的专栏
08-15 2024
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。 此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。 官方演示，如下：  Demo 使用方法如下： 1、加载javascript。  type="text/javascript" src="js/jquery.js">   type="text/jav
使用jquery.scrollLeft实现文字水平滚动
weixin_41395648的博客
01-11 1546
一开始使用$("").css(“margin-left",num--) 但是这种方法经常会有一种卡顿的感觉，遂优化 使用jquery.scrollLeft优化后： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt
jquery实现名单滚动
weixin_30596343的博客
03-01 137
转：http://www.qdfuns.com/notes/25341/917d9cb031f835a086dd445b77b6e04e.html 介绍：记录滚动特效。就是那一排文字不停地滚啊滚啊滚得特效，在抽奖活动结果显示啦、报名结果显示上用的非常频繁。当年总是希望在抽奖结果面板上看到自己的名字，然而二十几年了都没见过一次2333，这个活动特效可以让结果显示看起来更加灵动，接下来我就说一下这个...
JQuery实现自定义滚动条
觉醒法师的专栏
05-05 3376
在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的，而且不同浏览器存在兼容问题，因此通过JS来实现滚动条在。的环境下也是有必要的。
JQuery文字滚动
kuangshi2008的专栏
11-05 1688
一单行滚动(ad:http://www.gz138.com) 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;paddin
jquery实现文字上下滚动
qq_18896247的博客
08-21 1040
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1388
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS的常见难见
weixin_62432037的博客
07-24 1196
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值