jquery轻松实现li标签上下滚动的原理

在网站上我们常看到有滚动的文字或者图片,比如消息提醒,新闻列表,等等。那么这些效果是怎么形成的呢?经过查阅,找到一种十分方便的写法,经过改良,得出我自己的终极版滚动效果。

我先写个布局吧

<div class="scrollBox">
    <ul>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
            <li>母鸡母鸡母鸡母鸡</li>
            <li>DUCKDUCKDUCK</li>
     </ul>
</div>

正规且常见的布局。当然li标签里的内容根据项目需要进行修改,都是不影响效果的实现的,你可以加个图片或者图片文字都有的状态,例如

要想实现滚动,样式上需要注意以下几点

1.最外面的div要有具体的高度。

2.最外面的div必须加上overflow:hidden

3.因为是获取li标签的高度作为向上滚动的距离,所以li标签的样式里最好不要有padding或者margin,如果效果冲突的话可以在li标签里加个a标签,样式写在a标签里

下面是核心部分

<script>

    function autoScroll(obj){

        var n=$(obj).find("li").height();
        $(obj).find("ul").animate({
               marginTop:-n
    },500,function(){
         $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
    })

    $(function(){

       setInterval(‘autoScroll(".scrollBox")‘,3000)

    })

}

</script>

这样写代码的复用性比较强,在$(function(){})里面可以加入多条语句,从而实现页面多处滚动的效果。

对了,千万不要在页面中引入jquery了噢

时间: 2024-10-08 00:41:49

jquery轻松实现li标签上下滚动的原理的相关文章

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTML结构:设计三个li元素 <ul id="test"> <li>Glen</li> <li>Tane</li> <li>John</li> </ul> 2.css样式:设计一个类selected

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li').eq(0).html());3.alert($('ul>li:nth-child(1)').html()); 4.alert($('ul').children()[0].innerHTML);5.alert($('ul>li')[0].innerHTML);6.alert($('ul').fi

jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码

转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元素后插入指定的内容. 综合起来,核心代码为 $(".content li").click(function() {       // 点击li元素时     if($(this).next())                    // 如果存在下一个元素         $(this)

前端学习笔记(zepto或jquery)——对li标签的相关操作(三)

对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+":"+ item.innerHTML); }); $("ul>li").each(function(index,item){ alert(index+":"+ item.innerHTML); }); $("ul>li").ea

前端学习笔记(zepto或jquery)——对li标签的相关操作(五)

对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2</li> <li>3</li> <li>4</li> <li><p>5</p></li> <li>6</li> <li><p>7</p></

给li标签添加自定义属性

给li标签添加属性<ul> <li></li> <li></li> <li></li> <li></li></ul> 1.用jquery方法 $('ul').find('li').attr("index", function () {return $(this).index()}) 2.用js方法 var aLi = document.getElementsByTag

利用li标签做菜单

现在我们用一个ul li标签来做一个菜单 首先来看看ul li 的基本样式 代码如下 <html> <head> <title>ul li</title> </head> <body> <ul> <li>首页</li> <li>个人主页</li> <li>消息中心</li> <li>充值中心</li> <li>会员中

jquery 中 $(&#39;div&#39;,&#39;li&#39;)

要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有li,包括子级,孙子级,总之就是div里面所有li,不管有几层关系 还可以 $("#touristLists tr").each(function () { if ($("inpu