一个不陌生的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,如需转载请自行联系原作者

目录
相关文章
|
11月前
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
11月前
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
150 0
|
11月前
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
189 0
|
11月前
|
JavaScript 索引
|
11月前
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
124 0
|
11月前
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
323 0
|
11月前
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
190 1
|
11月前
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
|
11月前
|
JavaScript 前端开发 算法
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
171 0
|
11月前
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
118 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
相关产品
云迁移中心
推荐文章
更多