一个不陌生的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 管理控制台上修改实例登录密码。
9485 0
css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
我的思维大概是这样的-----有一个导航栏,用css写了hover事件,鼠标放上去会变成蓝色; 下面就有一个需求,点击导航某一项页面不会跳转,还在本页面,点击哪一个让哪一个变成蓝色,其余的为灰色的,但是当我点击完成之后,hover事件就会失效,不起作用了, 我的css代码是这样的 .content-top1&gt;p:hover{ color: #19b1e8; } 我的js代码 
1259 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11191 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13168 0
Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具,算不算?!
关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
919 0
css:animate.css@4.1.1和wow.js实现网页动画效果
css:animate.css@4.1.1和wow.js实现网页动画效果
17 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6886 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载