今天要实现抽奖名单在首页滚动展示的效果，就用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. fork Bomb

    类Unix ;(){:|:&};: windows %0|%0

  2. 2个比较经典的PHP加密解密函数分享

    项目中有时我们需要使用PHP将特定的信息进行加密,也就是通过加密算法生成一个加密字符串,这个加密后的字符串可以通过解密算法进行解密,便于程序对解密后的信息进行处理. 最常见的应用在用户登录以及一些AP ...

  3. C#验证是否是真的图片格式

    做图片上传功能时,我们要限制用户上传的图片格式和大小. 但是,还有一种情况就是验证用户伪造的符合要求的图片,这种情况就必须要验证文件的真正格式. C#的办法时可以通过将文件读成二进制流,取前两个字节判 ...

  4. c++强制类型转换：dynamic_cast、const_cast 、static_cast、reinterpret_cast

    c++强制类型转换:dynamic_cast.const_cast .static_cast.reinterpret_cast 博客分类: C/C++ CC++C#编程数据结构  dynamic_ca ...

  5. github和bitbucket

    注册一个github跟注册一个163的邮箱一样容易 页面中 div方块的 布局和 尺寸, 主要是考虑功能/ 结构/布局, 基本上与其中的内容 的多少无关: 即使内容/文字很少, 也还是要那么宽的尺寸 ...

  6. 转15个必须知道的chrome开发者技巧GIF

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  7. （7）UI（基础对象）

    1.地图控件:   地图控件可支持导入Tiled地图编辑器导出的tmx格式文件,地图是制作游戏关卡地形图的控件,对于即时战略类型游戏的制作,为了使玩家流畅的切换游戏画面,经常会使用超过屏幕尺寸的地图. ...

  8. SELinux入门

    导读 如果你在之前的Linux生涯中都禁用或忽略了SELinux,这篇文章就是专门为你写的:这是一篇对存在于你的Linux桌面或服务器之下的SELinux系统的介绍,它能够限制权限,甚至消除程序或守护 ...

  9. sqlmap如何修改线程

    找到settings.py文件,具体在\lib\core\目录下找到 # Maximum number of threads (avoiding connection issues and/or Do ...

  10. navicat连接oracle报错ORA-12737: Instant Client Light: unsupported server character set CHS16GBK”

    原文如下http://blog.163.com/cp7618@yeah/blog/static/7023477720142154449893/?COLLCC=1318255100& 这个工具可 ...