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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
JS中==、===你分清楚了吗
Mar 04 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/06/20 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python中metaclass原理与用法详解
2019/06/25 Python
python 消费 kafka 数据教程
2019/12/21 Python
python 元组的使用方法
2020/06/09 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python中pop()函数的语法与实例
2020/12/01 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
2014年终工作总结范本
2014/12/15 职场文书
病人慰问信范文
2015/02/15 职场文书
运动会班级前导词
2015/07/20 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
物业管理交接协议书
2016/03/24 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers