公告向左慢慢滚动

$(function(){ 
    var timer = setInterval(autoplay,50); 
    var leftnow = parseFloat($(".box_div ul").css("left")); 
    var size = $(".box_div>ul").children().length;
    for(var i=0;i<size;i++){ 
        $(".box_div>ul").append($(".box_div>ul>li").eq(i).clone());
    }
    
    function autoplay(){ 
        var size = $('.box_div ul').find('li').length;
        var widths = size*381;
        $(".box_div ul").css("width",widths+"px");
        var leftnow = parseFloat($(".box_div ul").css("left")); 
        leftnow--; 
        $(".box_div ul").css({"left":leftnow+"px"}); 
        for(var i=0;i<size;i++){
            if(leftnow==i*-380){
                $(".box_div ul").find("li:first").appendTo($(".box_div ul"));
                $(".box_div ul").css({"left":"0px"});
            }
        }
    } 
    $(".box_div").mouseenter(function(){ 
        clearInterval(timer); 
    }); 
    $(".box_div").mouseleave(function(){ 
        timer = setInterval(autoplay,50); 
    }); 
});

 html部分

<div class="box_div">
    <ul>
        <li>公告内容</li>
    </ul 
</div
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目标检测(Object Detection)是计算机视觉领域的一个核心问题,其主要任务是找出图像中所有感兴趣的目标(物体),并确定它们的类别和位置。以下是对目标检测的详细阐述: 一、基本概念 目标检测的任务是解决“在哪里?是什么?”的问题,即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态,加上成像时光照、遮挡等因素的干扰,目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题: 分类问题:判断图像中的目标属于哪个类别。 定位问题:确定目标在图像中的具体位置。 大小问题:目标可能具有不同的大小。 形状问题:目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类: Two-stage算法:先进行区域生成(Region Proposal),生成有可能包含待检物体的预选框(Region Proposal),再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法:不用生成区域提议,直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列(YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等)、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例,YOLO将目标检测视为回归问题,将输入图像一次性划分为多个区域,直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征,使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层,通过卷积层提取图像特征,通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域,为人们的生活带来了极大的便利。以下是一些主要的应用领域: 安全监控:在商场、银行
可以使用jQuery和CSS来实现公告文字滚动。这里提供一个简单的示例代码: HTML: ```html <div class="notice"> <ul> <li>公告1</li> <li>公告2</li> <li>公告3</li> <li>公告4</li> <li>公告5</li> </ul> </div> ``` CSS: ```css .notice { width: 200px; height: 20px; overflow: hidden; } .notice ul { list-style: none; margin: 0; padding: 0; } .notice li { float: left; margin-right: 20px; } ``` JavaScript: ```javascript $(function() { var noticeWidth = $(".notice").width(); var ulWidth = 0; $(".notice li").each(function() { ulWidth += $(this).outerWidth(); }); $(".notice ul").width(ulWidth); function scrollNotice() { var scrollLeft = $(".notice ul").position().left - 1; if (scrollLeft < -ulWidth + noticeWidth) { scrollLeft += ulWidth; } $(".notice ul").css("left", scrollLeft); requestAnimationFrame(scrollNotice); } scrollNotice(); }); ``` 解释一下代码的实现过程: - 首先设置公告容器 `.notice` 的宽度和高度,并设置 `overflow: hidden`,这样公告文字就不会超出容器范围而显示滚动条。 - 然后设置公告列表 `.notice ul` 的样式,将列表项的样式设置为 `float: left`,这样列表项就可以水平排列。 - 在 JavaScript 中,首先计算出公告列表的总宽度,然后将公告列表的宽度设置为总宽度。这样公告列表的宽度就可以自适应文字长度。 - 接着使用 `requestAnimationFrame` 方法循环执行 `scrollNotice` 函数,实现公告文字的滚动效果。在 `scrollNotice` 函数中,先获取公告列表的侧位置,然后将其减去 1,实现向滚动的效果。当公告列表侧位置小于容器宽度减去列表总宽度时,将其重置为 0,实现循环滚动的效果。最后使用 `css` 方法将公告列表的侧位置设置为滚动后的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值