今天要实现抽奖名单在首页滚动展示的效果，就用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. php验证是否是中文

    header("content-type:text/html;charset=utf-8");$str = "编";if (preg_match("/ ...

  2. 实时获取UITextField内容

    在UISearchBar中,当输入信息改变时,它就会调用textDidChange方法, 但是UITextField没有这个功能,要实现就得手动addTarget,其实controlevent里还有很 ...

  3. 多线程 用户级线程和内核级线程 from C++多核高级编程

    转 http://book.51cto.com/art/201006/206946.htm 6.1.1 用户级线程和内核级线程 2010-06-21 20:37 齐宁/董泽惠 译 清华大学出版社 字号 ...

  4. LUA的编译、环境等

    Lua的环境.编译等 Lua命令行 lua命令行选项: -i:进入交互式 -e:执行lua代码 -l:加载库文件 例如使用下面的命令启动lua解释器,可以重新定义lua提示符. lua -i -e & ...

  5. 修改php执行用户，并使其拥有root权限

    useradd apachephp vi /etc/httpd/conf/httpd.conf 将组和用户修改成apachephp,重启apache,然后用lsof -i:80查看apache的执行用 ...

  6. Linux下修改计算机名

    SuSe操作系统: 1.  修改/etc/HOSTNAME 文件  ,其内容为计算机名. 输入命令:vi /etc/HOSTNAME 使用键盘上的 x 键一个一个删除所有内容 ,然后使用键盘上的 i ...

  7. BlockingQueue详解

    本例介绍一个特殊的队列:BlockingQueue,如果BlockingQueue是空的,从BlockingQueue取东西的操作将会被阻断进入 等待状态,直到BlockingQueue进了东西才会被 ...

  8. property中的strong 、weak、copy 、assign 、retain 、unsafe_unretained 与autoreleasing区别和作用详解

    iOS5中加入了新知识,就是ARC,其实我并不是很喜欢它,因为习惯了自己管理内存.但是学习还是很有必要的. 在iOS开发过程中,属性的定义往往与retain, assign, copy有关,我想大家都 ...

  9. matlab怎么定义一个数组

    A=[];n=input('n=');%数组的长度for i=1:n fprintf('a%.0f=',i); x=input('');%分别输入各个数的值 A=[A,x];endA就可以得到长度为n ...

  10. HDU 4864 Task (贪心+STL多集（二分）+邻接表存储）（杭电多校训练赛第一场1004）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4864 解题报告:有n台机器用来完成m个任务,每个任务有一个难度值和一个需要完成的时间,每台机器有一个可 ...