今天要实现抽奖名单在首页滚动展示的效果，就用js写了一个，代码如下：

html代码：

<style type="text/css">

*{margin:;padding:;list-style-type:none;}

a,img{border:;}

a,a:visited{color:#5e5e5e; text-decoration:none;}

a:hover{color:#b52725;text-decoration:underline;}

.clear{display:block;overflow:hidden;clear:both;height:;line-height:;font-size:;}

body{font:12px/% Arial, Helvetica, sans-serif;}

/* ranklist */

.ranklist{height:200px;overflow:hidden;}

.ranklist li{height:26px;line-height:26px; padding-bottom:10px;  overflow:hidden;position:relative;padding: 70px  30px;}

.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:;top:;text-align:center;font-style:normal;color:#;}

.ranklist li em{background-position: -16px;}

.ranklist li.top em{background-position: ;color:#fff;}

.ranklist li .num{position:absolute;right:;top:;color:#;}

</style>

</head>

<body>

    <div class="ranklist" id="ranklist">

        <ul style="margin-top:0px;">

            <li class="top">

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span>

            </li>

            <li class="top">

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span>

            </li>

            <li class="top">

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span>

            </li>

            <li>

                <em></em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span>

            </li>

        </ul>

    </div>

js代码：

<script type="text/javascript">

    var scrtime;

    function scrollTextList() {

        /// <summary>

        /// 滚动文字列表

        /// </summary>

        scrtime = window.setInterval(function () {

            var $ul = $("#ranklist ul");

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

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

                $ul.find("li:first").insertAfter($ul.find("li:last"));

                $ul.css({ marginTop:  });

            });

        }, );

    }

    $(function () {

        scrollTextList();

        $("#ranklist").mouseover(function () {

            clearInterval(scrtime);

        }).mouseout(function () {

            scrollTextList();

        });

    });

</script>

js 实现文字列表滚动效果的更多相关文章

  1. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  2. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  5. Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  6. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  7. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  8. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  9. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

随机推荐

  1. resharper安装后,一不小心点错了（选择了object browser）

    打开Resharper,选择Options,然后选择Tools中的External Sources,你的情况是选择了Navigation to Object Brower这一项了,换成第一个Defau ...

  2. Unity3d三大光照渲染介绍

      重要:在目前市面上常见的游戏引擎中,主要采用以下三种灯光实现方式: 顶点照明渲染路径细节 Vertex Lit Rendering Path Details 正向渲染路径细节 Forward Re ...

  3. python -os、sys

    个人还不是很懂 os操作文件目录.sys针对系统环境的交互.大概是这样 使用os.system函数运行其他程序 os模块中的system()函数可以方便地运行其他程序或者脚本.其函数原型如下所示. o ...

  4. Oracle 客户端配置

    nstantclient-basic-nt-12.1.0.1.0\instantclient_12_1下面新建NETWORK文件夹,NETWORK下新建ADMIN文件夹,ADMIN下新建tnsname ...

  5. JAVA命令大全

    1.java.exe:======================运行java程序,这个相信每一位用Java的人知道了. 2.javac.exe:======================编译的Ja ...

  6. jquery基础总结

    什么是jQuery?        就是一个JavaScript函数库,开源的.jQuery能做什么        JavaScript是做什么的,jQuery就是做什么的,Jquery是对javas ...

  7. POJ 3020 Antenna Placement

    Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5645 Accepted: 2825 Des ...

  8. Valid Pattern Lock(dfs + 暴力）

    Valid Pattern Lock Time Limit: 2 Seconds      Memory Limit: 65536 KB Pattern lock security is genera ...

  9. SSDT Hook实现简单的进程隐藏和保护【转载】

    原文链接:http://www.blogfshare.com/ssdthook-hide-protect.html 原文作者:AloneMonkey SSDT Hook实现简单的进程隐藏和保护 Alo ...

  10. request-log-analyzer日志分析

    (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 日志分析是常见的工作,方法如下: 使用工具:request-log-analyzer安装:$ ...