js向上无缝滚动,网站公告效果 具体代码


Posted in Javascript onNovember 18, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
        <!
        -- #demo
        {
            overflow: hidden;
            width: 220px;
            float: left;
            display: inline;
        }
        #demo ul
        {
            text-align: left;
            margin: 0px;
            padding: 0px;
            width: 220px;
        }
        #demo ul li
        {
            margin-left: 5px;
            display: block;
            list-style: none;
            font-size: 13px;
            height: 26px;
            padding-top: 5px;
        }
        -- ></style>
</head>
<body>
//这里的高度 style="height: 26px如果不确定的话,需要自定义输入,要不然如果定义高了而ul里的li没达到此高度会造成无法滚动
    <div id="demo" style="height: 26px;">
        <div id="demo1">
            <ul>
                <li>·<a href="https://3water.com/">三水点靠木1</a></li>
                <li>·<a href="https://3water.com/">三水点靠木2</a></li>
                <li>·<a href="https://3water.com/">三水点靠木3</a></li>
                <li>·<a href="https://3water.com/">三水点靠木4</a></li>
            </ul>
        </div>
        <div id="demo2">
        </div>
        <script type="text/javascript">
//文字无间断滚动代码,兼容IE、Firefox、Opera
var speed=60;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
        </script>
    </div>
</body>
</html>
Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
js使用formData实现批量上传
Mar 27 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
js call方法详细介绍(js 的继承)
Nov 18 #Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 #Javascript
jQuery客户端分页实例代码
Nov 18 #Javascript
javascript验证身份证完全方法具体实现
Nov 18 #Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 #Javascript
YUI模块开发原理详解
Nov 18 #Javascript
深入领悟JavaScript中的面向对象
Nov 18 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
详解supervisor使用教程
2017/11/21 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
护士进修自我鉴定
2014/02/07 职场文书
个人贷款担保书
2014/04/01 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
个人借款协议书范本
2014/11/17 职场文书
网吧温馨提示
2015/07/17 职场文书
物业管理交接协议书
2016/03/24 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Python 如何安装Selenium
2021/05/06 Python
nginx部署多前端项目的几种方法
2021/05/25 Servers
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL