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 创建书签小工具之理论
Feb 25 Javascript
javascript常用功能汇总
Jul 05 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
Vue实现穿梭框效果
Sep 30 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对象相互引用的内存溢出实例分析
2014/08/28 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
用JS实现的一个include函数
2007/07/21 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
python3大文件解压和基本操作
2017/12/15 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python如何实现单链表的反转
2020/02/10 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
JSF的标签库有哪些
2012/04/27 面试题
质量月活动总结
2014/08/26 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
关于童年的读书笔记
2015/06/26 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
导游词之唐山景点
2019/12/18 职场文书