当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

通知公告循环向上滚动代码

热淘网8个月前 (11-06)源码技巧210

html代码如下

<div class="scroll-wrap" style="height: 16px; overflow: hidden;">
    <ul class="scroll-con fn-left" style="margin-top: 0px;">
        <li style="height: 16px; line-height: 16px; overflow: hidden;">
            <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家1</a>
        </li>
        <li style="height: 16px; line-height: 16px; overflow: hidden;">
            <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家2</a>
        </li>
        <li style="height: 16px; line-height: 16px; overflow: hidden;">
            <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家3</a>
        </li>
        <li style="height: 16px; line-height: 16px; overflow: hidden;">
            <a href="/intro/bulletin/.html">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww我的老家4</a>
        </li>


    </ul>
</div>

js代码如下:

引入jquery文件cdn

<script src="http://code.jquery.com/jquery-2.2.3.js"></script>
<script>
    /*公告滚动*/
    $(function(){
        var len = $(".scroll-con li").length;
        console.log(len);
        if(len > 1){
            textRoll=function(){
                $(".scroll-wrap").find(".scroll-con").animate({
                    marginTop : "-16px"
                },500,function(){
                    $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
                });
            };
            var roll= setInterval('textRoll()',1000);
            $(".scroll-con li").mouseenter(function() {
                clearInterval(roll);
            }).mouseout(function(){
                clearInterval(roll);
                roll= setInterval('textRoll()',1000);
            });
        }
    })
</script>



扫描二维码推送至手机访问。

版权声明:本文由网站标题发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1522.html

分享给朋友:

相关文章

友情链接代码

友情链接代码

[code]˂!--{eval $imglink .= "\n";}--˃˂!--{eval $txtlink .= "".$value[name]."\n";}--˃$imglink$txtlink...

在首页调用指定文章下的三级分类栏目名称

在首页调用指定文章下的三级分类栏目名称

[code]$value['name']: $value[name] [/code]...

一行代码解决模板兼容IE8 问题

一行代码解决模板兼容IE8 问题

前两天装了windows 7系统发现 用IE8上自己的站 边的乱七八糟在网上转了一下发现了一个简单的解决方案方法如下:只需要在页面中加入如下HTTP meta-tag: 只要IE8一读到这个标签,它就...

php使用TXT数据库(读取和修改文本)

php使用TXT数据库(读取和修改文本)

[code]文本数据库的例子本来太多,但是为了逻辑简化,最好通过专门接口实现文件与数据的转换,可以采用我下面的模板编写://文件最前面定义两个全局变量,数据库文件名和用户数组$pwd_db_file=...

模块创建使用技巧

模块创建使用技巧

在创建模块处。。如果你选择了只获取数据[b]使用获得的模板内部调用代码[/b]注:模板代码此处不赘述。将上面获取的代码复制到 SupeSite 的模板文件中(默认模板的目录为 templates/de...

在模版中直接写判断语句的格式举例

在模版中直接写判断语句的格式举例

[code] 会员登陆 注册你好:$_SGLOBAL[supe_username][/code]...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。