一个不陌生的JS效果-marquee,用css3来实现-阿里云开发者社区

开发者社区> 嗯哼9925> 正文

一个不陌生的JS效果-marquee,用css3来实现

简介:
+关注继续查看

关于marquee,就不多说了,可以戳这里

毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了。但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦!

 

JS类实现marquee

今天倒弄了一个,还不全,打个草稿吧~ 下次就凑合着用吧。

DEMO在这里,戳我

 Javascript Marquee Class

gists地址:https://gist.github.com/barretlee/6095976

代码写的比较粗糙,下面说说这个思路

BoxA和BoxB内容相同,当BoxA滚动离开外层盒子时,把scrollTop设置成,当前的scrollTop - BoxA的高度,记得再加上一个1.

思路很简单,操作也很方便,我比较习惯用scrollTop来控制移动,有的人也喜欢用绝对定位和相对定位配合,但是这样写出来的插件兼容性不是很好,有些页面定位元素太多,可能会造成插件的样式乱套。

 

这个插件(楼主比较懒,还没有写完)的使用方式

var marquee = new Marquee(),
    obj = document.getElementById("box");

marquee.init(obj);

对应的html代码:

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Demo</title>
    <style type="text/css">
        #box { 
            width: 150px;
            height: 200px;
            border:1px solid #EFEFEF;
            background: #F8F8F8;
            padding:0 20px;
            line-height:22px;
            overflow:hidden;
        }
    </style>
</head>

<body>
    <div id="box">
        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />
        我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />
    </div>
</body>
</html>

当然,给了几个接口

marquee.init(obj, {
     direction: "xx",  //这个还没写,一般就是top和left吧~
     speed: 30
});

 

 补充一个css3下marquee的知识点

overflow:-webkit-marquee;//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式,分三种。

scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。

slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。

alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数,infinite 为

无限多次,不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right; //跑动的方向,这个要注

意结合实际情况,即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。

实例:

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Demo</title>
    <style type="text/css">
        h1 {
            color:rgba(250,100,100,0.7);
            height:40px;
            line-height:40px;
            width:400px;
            overflow: -webkit-marquee;
            -webkit-marquee-style: scroll;
            -webkit-marquee-repetition: infinite;
            -webkit-marquee-direction: right;
            -webkit-marquee-speed:normal;
            border:1px #ccc solid;
            margin-top: 30px;
        }
        h1.left {
            -webkit-marquee-direction: left;
        }
        h1.up {
            -webkit-marquee-direction: up;
        }
        h1.down {
            -webkit-marquee-direction: down;
        }
</style>
</head>

<body>
<h1>我是靖鸣君,靖鸣君,我是靖鸣君,靖鸣君,我是靖鸣君</h1>
<h1 class="up">我是靖鸣君,靖鸣君,我是靖鸣君,靖鸣君,我是靖鸣君</h1>
<h1 class="left">我是靖鸣君,靖鸣君,我是靖鸣君,靖鸣君,我是靖鸣君</h1>
<h1 class="down">我是靖鸣君,靖鸣君,我是靖鸣君,靖鸣君,我是靖鸣君</h1>
</body>
</html>

DEMO地址:http://qianduannotes.sinaapp.com/marquee/css3marquee.html (此属性在后续新版本中已经不提供支持了  修改于2013/11/09

这个还是蛮实用的~做下兼容性处理,我觉得,可以直接拿过来用:)

 







本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/p/marquee-in-javascript.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4150 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4623 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5534 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5839 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
847 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
17384 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3665 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1161 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载