今天要实现抽奖名单在首页滚动展示的效果，就用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. js中改变不同的div属性值的操作

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

  2. Linux下web目录权限设置

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

  3. svn代码回滚命令

    代码回滚提交: 比如要把73回滚到68 svn merge -r 73:68 http://my.repository.com/my/project/trunk 然后commit就行了 svn com ...

  4. PHP array_intersect() 函数

    PHP Array 函数 定义和用法 array_intersect() 函数返回两个或多个数组的交集数组. 结果数组包含了所有在被比较数组中,也同时出现在所有其他参数数组中的值,键名保留不变. 注释 ...

  5. JavaScript初级教程（Jquery）

    序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

  6. 杭赛.Triangle(数学推导）

    Triangle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  7. WP_Image_Editor_Imagick 漏洞临时解决方法

    导读 阿里云推送的一条短信通知:存放在上面的WordPress程序有WP_Image_Editor_Imagick漏洞问题,需要登入后台补丁等等的暗示.当然,如果需要在线补丁则需要升级阿里云的安骑士专 ...

  8. PHP 基础语法实例及注意事项

    <?$varint = 1;$varinteger = "test";$varstring = "tes";$varbool = true;$varflo ...

  9. poj 3026 bfs+prim Borg Maze

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9718   Accepted: 3263 Description The B ...

  10. Linux Apache和Nginx网络模型详解

    进程阻塞和挂起的定义: 阻塞是由于进程所需资源得不到满足,并会最终导致进程被挂起     进程挂起的原因并不一定是由于阻塞,也有可能是时间片得不到满足,挂起状态是进程从内存调度到外存中的一种状态,若在 ...