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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
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实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php实现数据库的增删改查
2017/02/26 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
js逆向解密之网络爬虫
2019/05/30 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python 硬币兑换问题
2019/07/29 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python3读写ini配置文件的示例
2020/11/06 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
公司请假条格式
2014/04/11 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
咖啡店创业计划书
2014/08/15 职场文书
2015年女生节活动总结
2015/02/27 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Django rest framework如何自定义用户表
2021/06/09 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL