今天要实现抽奖名单在首页滚动展示的效果，就用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. CodeForces 703B(容斥定理)

    题目链接:http://codeforces.com/contest/703/problem/B 解题思路: 第一次写 先求出每个点到其他点的价值,并将其记录 dp[i][j]=1(i<j),然 ...

  2. Linux下web目录权限设置

    1.nginx和php-fpm运行用户为www 2.我们假设web目录所属着为web_owner 3.将web目录的用户和用户组设置为web_owner和www,如下命令:chown -R web_o ...

  3. c#之Redis实践list，hashtable

    写在前面 最近公司搞了一个活动,用到了redis的队列,就研究了下redis的相关内容.也顺手做了个demo. C#之使用Redis 可以通过Nuget安装Reidis的相关程序集.安装之后发现会引入 ...

  4. Linux建立软连接

    实例:ln -s /home/gamestat    /gamestat linux下的软链接类似于windows下的快捷方式 ln -s a b 中的 a 就是源文件,b是链接文件名,其作用是当进入 ...

  5. RHEL6.4记录一次添加一块新分区的操作

    首先看了下挂载点及目录 fdisk /dev/sda [root@box ~]# fdisk /dev/sda WARNING: DOS-compatible mode is deprecated. ...

  6. java的一段对象数据类型映射的代码

    try { List<GateMetaPO> listGateInfoPO = majorGateReaderService.queryForAggregateBy( chapter); ...

  7. HDU 2577 How to Type（dp题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2577 解题报告:有一个长度在100以内的字符串,并且这个字符串只有大写和小写字母组成,现在要把这些字符 ...

  8. 【转】使用genstring和NSLocalizedString实现App文本的本地化

    原地址:http://www.cnblogs.com/U-tansuo/p/IOS_NSLocalizedString.html iOS提供了简便的方法来实现本地化,其中用的最多的就是NSLocali ...

  9. Instance Variables in ruby

    Dogs have many shared characteristics, like the abilities to wag their tails and drink water from a ...

  10. [Educational Codeforces Round 16]C. Magic Odd Square

    [Educational Codeforces Round 16]C. Magic Odd Square 试题描述 Find an n × n matrix with different number ...