<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Language" content="zh-CN">

<meta name="Keywords" content=",,">

<meta name="Description" content=" /">

<title>SuperSlide - 文字无缝滚动特效-上</title>

<!-- <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> -->

</head>

<body>

<style type="text/css">

    /* css 重置 */

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

    body{ background:#fff; font:normal 12px/22px 宋体;  }

    img{ border:;  }

    a{ text-decoration:none; color:#;  }

    a:hover{ color:#1974A1;  }

    /* 本例子css */

    .txtMarquee-top{ overflow:hidden; position:relative;  border:1px solid #ccc;   }

    .txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding: 10px;  }

    .txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;

         cursor:pointer; background:url("../images/arrow.png")  -100px no-repeat;}

    .txtMarquee-top .hd .next{ background-position: -140px;  }

    .txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }

    .txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }

    .txtMarquee-top .bd{ padding:15px;  }

    .txtMarquee-top .infoList li{ height:24px; line-height:24px;   }

    .txtMarquee-top .infoList li .date{ float:right; color:#;  }

</style>

        <div class="txtMarquee-top">

            <div class="bd">

                <div class="tempWrap" id="tempWrap" style="overflow:hidden; position:relative; height:120px" >

                    <ul class="infoList" id="infoList" style="position: relative; padding: 0px; margin: 0px; top: 0px;" >

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学外语，上北外！</a></li>

                        <li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>

                        <li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>

                    </ul>

                </div>

            </div>

        </div>

        <script type="text/javascript">

            window.onload=function(){

                var InfoList = document.getElementById('infoList');

                var li = document.getElementsByTagName('li');

                var TempWrap = document.getElementById('tempWrap');

                var HTempWrap = TempWrap.offsetHeight;

                var HInfoList = InfoList.offsetHeight;

                var index = ;

                var Hli = li[].offsetHeight;

                var Lli = li.length;

                InfoList.style.height = Hli*Lli;

                var info = (HInfoList-HTempWrap)*-;

                Timeint = setInterval(setTime,)

                TempWrap.onmouseover = function(){

                    clearInterval(Timeint);

                };

                TempWrap.onmouseout = function(){

                    Timeint = setInterval(setTime,);

                }

                function setTime(){

                    index --;

                    if(index <= info){

                        index = -;

                        return false;

                    }else{

                        index = index+-;

                        InfoList.style.top = index+'px';

                    }

                }

            }

        </script>

</body>

</html>

效果图：

javascript 向上滚动的更多相关文章

  1. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  2. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  3. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  4. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  5. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  6. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  7. js无间隙向上滚动

    一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...

  8. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  9. 齐博x2向上滚动特效

    要实现图中圈起来的向上滚动特效,大家可以参考下面的代码 <!--滚动开始--> <style type="text/css"> .auto-roll{ he ...

随机推荐

  1. iOS __block用法

    没有__block qualifier的primitive c types会直接在创建block的时候被capture到block里.有__block qualifier的话,会在调用block的时候 ...

  2. word 2010中如何创建多级目录和多级列表

    原文地址:http://wenku.baidu.com/link?url=KkSmYTqogxA5VJkLCGb957E5fIGN5S50FUx7IpAWWWKWWRYvaeGl2IvX-dFP25r ...

  3. poj 1609 dp

    题目链接:http://poj.org/problem?id=1609 #include <cstdio> #include <cstring> #include <io ...

  4. java 类型转换：

    数值数据类型: 1.自动类型转换 byte->short ->int->long-->float--->double 范转小的类型向范围大的类型号转换,由系统自动完成   ...

  5. 为什么app都是异步编程

    对本文题目首先需要了解一下什么是异步编程,异步编程即多线程编程. 多线程是一个比较轻量级的方法来实现单个应用程序内多个代码执行路径. 在具体理解多线程之前先看一个都理解的例子: 在系统级别内,程序并排 ...

  6. ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；

    rpm 安装了 mysql 5.6 的版本 遇到的问题 1. 提示与5.1版本的有冲突. 解决方式, 是 rpm --force -ivh rpm包.rpm 进行强制安装 2. 启动 mysql 后, ...

  7. Linux基础系列—Linux内核源码目录结构

    /** ****************************************************************************** * @author    暴走的小 ...

  8. 解决zabbix图中出现中文乱码问题

    我这周部署了zabbix监控服务器,但是配置过程中发现当有中文时,图中的中文会变成方块 如下图所示: 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字库加上即可 解决办法如下 1. ...

  9. NPOI从数据库中导出数据到Excel

    首先要添加NPOI.dll程序集 https://yunpan.cn/cMeSTELJSXmJJ  访问密码 8d83 把里面的程序集都添加到引用里 下面的代码是从数据库导出到Excel { //pa ...

  10. JavaScript细节整理

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...