js小功能:定时器之滑动的ul

最新推荐文章于 2023-07-25 09:36:02 发布
最新推荐文章于 2023-07-25 09:36:02 发布
阅读量1k 收藏
点赞数

<!DOCTYPEhtml>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        ul{margin: 0;padding: 0;}

        li{list-style: none}

        .box{width: 100px;height: 150px;margin:100px auto;position: relative;overflow: hidden;}

        .box2{width: 112px;height:56px;position: relative;margin: 0 auto;border: 3px solid red;overflow: hidden;}

        .list2{position: absolute;width:400%;left: -56px;}

        .list2 li{float: left;width:56px;height: 56px;line-height: 56px;text-align: center;font-size:20px;font-weight: 600;}

        .list2 li:nth-child(even){background:#EBB440}

        .list2 li:nth-child(odd){background:#00A0E8}

        .box3{background: #EBB440;width:150px;margin: 30px auto;height: 35px;position: relative;overflow: hidden;}

        .list3{position: absolute;top:-35px;width: 100%}

        .list3 li{height: 35px;line-height:35px;text-align: center;}

    </style>

</head>

<body>

<divclass="box">

    <ul class="list">

        <li>111111</li>

        <li>222222</li>

        <li>333333</li>

        <li>444444</li>

        <li>555555</li>

        <li>666666</li>

        <li>777777</li>

        <li>888888</li>

    </ul>

</div>

 

<divclass="box2">

    <ul class="list2">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</div>

 

<divclass="box3">

    <ul class="list3">

        <li>滚动消息：666666</li>

        <li>滚动消息：111111</li>

        <li>滚动消息：222222</li>

        <li>滚动消息：333333</li>

        <li>滚动消息：444444</li>

        <li>滚动消息：555555</li>

    </ul>

</div>

<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

    (function () {

        var scrtime;

        $(".list").hover(function(){

            clearInterval(scrtime);

        },function(){

            scrtime = setInterval(function(){

                var $ul = $(".list");

                var liHeight =$ul.find("li:last").height();

                $ul.animate({marginTop :-liHeight+"px"},800,function(){

                   $ul.find("li:first").appendTo($ul);

                   $ul.find("li:last").hide();

                    $ul.css({marginTop:0});

                   $ul.find("li:last").fadeIn(1000);

                });

               $ul.find("li").eq(":first").fadeOut(1000);

            },2400);

        }).trigger("mouseleave");

    })();

    (function () {

        var scrtime;

        $(".list2").hover(function(){

            clearInterval(scrtime);

        },function(){

            scrtime = setInterval(function(){

                var $ul =$(".list2");

                var liHeight =$ul.find("li:last").width();

                $ul.animate({marginLeft :liHeight+"px"},800,function(){

                   $ul.find("li:last").prependTo($ul);

                   $ul.find("li:first").hide();

                    $ul.css({marginLeft:0});

                   $ul.find("li:first").fadeIn(1000);

                });

                $ul.find("li").eq(":last").fadeOut(1000);

            },2400);

        }).trigger("mouseleave");

    })();

    (function () {

        var scrtime;

        $(".list3").hover(function(){

            clearInterval(scrtime);

        },function(){

            scrtime = setInterval(function(){

                var $ul =$(".list3");

                var liHeight =$ul.find("li:last").height();

                $ul.animate({marginTop :liHeight+"px"},800,function(){

                   $ul.find("li:last").prependTo($ul);

                   $ul.find("li:first").hide();

                    $ul.css({marginTop:0});

                   $ul.find("li:first").fadeIn(1000);

                });

               $ul.find("li").eq(":last").fadeOut(1000);

            },2400);

        }).trigger("mouseleave");

    })();

</script>

</body>

</html>

需要web前端课程工具和电子书，可以加君羊120342833

fanyuenan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript——滑动翻页功能（缓慢移动+无缝衔接）
我是我
07-28 3184
1. 需求+效果 展示 最近做开发时有这样一个需求，滚动播放列表，数据有限，当这些数据滚动播放结束后再重头开始，做完之后的效果是这样的 2. 实现代码(带标注) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
设置ul li内容自动上下滚动
03-03
可以设置的内容上下滚动，很好的东西哦
jquery-iscroll.js鼠标控制ul左右滑动
12-31
jquery-iscroll.js鼠标控制ul左右滑动
js 定时器滚动条
︶￣城南花已开
06-24 424
js 定时器滚动条 滚动广播
JavaScript定时器——无缝滚动
weixin_45762143的博客
08-04 164
物体运动基础 1.offsetLeft——获取物体的左边距 offsetTop——获取物体的上边距 offsetWidth——获取物体的宽度 offsetHeight——获取物体的高度 代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>无缝滚动</title> <style>
js定时器（五）无缝滚动
Naro7L的博客
08-03 562
一.要实现的效果1.点击按钮实现左右滚动 2.鼠标放上去实现清除定时器二.效果图片三.代码1.css<style type="text/css"> #div1{ margin:50px; width:800px; height:200px; background:pink; position:relative; overflow:hidden; }
JS中定时器的用法以及窗口的滚动条函数
CHALLENG_EVERYTHING的专栏
09-01 1647
在JS中定时器由setInterval函数设置，第一个参数为定时器的回调函数，第二个参数为间隔，单位为毫秒
原生JS无缝滑动轮播图
10-16
【原生JS无缝滑动轮播图】是一种常见的网页动态效果，用于展示一系列图片或内容。在本实例中，我们将探讨如何使用纯JavaScript实现一个淡入淡出的无缝轮播图，无需依赖任何外部库如jQuery。以下是实现该功能的关键...
javascript经典特效分享 手风琴、轮播图、图片滑动
10-21
轮播图的实现涉及到JavaScript定时器（如`setInterval`）的使用，以及图片元素的切换控制。基本原理是通过定时器周期性地改变图片索引，并更新显示的图片内容。此外，轮播图还常伴有指示器、自动播放、鼠标悬停暂停...
【JavaScript源代码】js实现滑动轮播效果.docx
12-29
JavaScript 滑动轮播效果是一种常见的网页动态展示方式，常用于展示多个图像或内容，让用户在有限的空间内浏览更多的信息。以下是如何使用 JavaScript 实现这一功能的详细步骤和相关知识点： 1. **HTML 结构**： ...
js实现从左向右滑动式轮播图效果
10-19
- 可以添加自动播放功能，即定时器控制图片每隔几秒自动移动到下一张。 5. 自定义及优化： - 根据实际需求，可以调整轮播图的尺寸、切换速度等参数，以达到最佳展示效果。 - 可以为轮播图添加前后切换按钮，或者...
jQuery使用animate实现ul列表项相互飘动效果示例
10-21
主要介绍了jQuery使用animate实现ul列表项相互飘动效果,结合实例形式分析了jQuery使用animate动画切换的操作技巧,需要的朋友可以参考下
Js 自动滚动功能
fanfanjin的专栏
08-19 852
New Document           ul,li{margin:0;padding:0;font-size:12px;color:#999;} ul{height:100px;overflow:hidden;} ul li{line-h
JS滚动条自动滚动
最新发布
weixin_73473804的博客
07-25 1020
设置了一个定时器，每隔一段时间执行一次滚动操作。滚动的逻辑是：判断滚动条是否到达底部，如果到达底部且不是因为被选中而停止滚动，则在1秒后将滚动条位置重置为顶部；否则，如果允许滚动且未被选中，则将滚动条向下滚动1个单位。函数通过监听鼠标移动事件和鼠标离开事件来控制滚动的开始和停止。当鼠标在滚动元素上移动时，将禁止滚动；当鼠标离开滚动元素时，将允许滚动。表示滚动的延迟时间（默认为50毫秒）。这段代码实现了一个自动滚动的函数。属性来控制滚动的开始和停止。表示要滚动的元素的选择器，
js实现table或ul的自动滚动
MF180214的博客
01-03 1656
【代码】js实现table或ul的自动滚动。
JS,图片上下滚动（主要是定时器的熟练运用）
sunling的专栏
11-25 2672
Home   -->      *{     margin:0;     padding: 0;   }   #demo {     width: 512px;     height: 400px;     margin: 100px auto;     border: 1px solid #f00;     overflow: hidden;     positio
DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
lzl8609的专栏
05-05 5823
（含上下左右滚动代码） <!-- UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; overflow: hidden; }
js获取ul的方法
01-09 6708
在js里获取div下的ul标签 首先要找到div的id var oDiv=document.getElementById("id"); var oUl=oDiv.getElementsByTagName("ul")[0]; oUl就是ul要获取的标签
JQuery animate ul列表项相互飘动
limlimlim的专栏
07-05 2308
body{font-size:12px;maring:0px;padding:0px;}         #main{width:600px;margin:auto;background-color:gold;}         ul{float:left;margin:30px;width:80px;height:140px;padding:2px;background-color:#009
JavaScript特效实战：手风琴、轮播图与图片滑动
相比之下，如果使用JavaScript来实现类似功能，可能需要编写更多的事件监听和状态管理逻辑，代码量和复杂度相对较高。 接下来，文档可能会进一步探讨轮播图和图片滑动的实现方法，这些特效通常涉及到时间轴...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值