//根据元素id

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>社群空间</title>
<link href="css/font-awesome.css" rel="stylesheet">
<style>
div{
overflow: hidden;
}
#marquee{
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>

<div><span id="marquee">过 translate() 方法，元素从其当前位置移动王二小是儿童团员她常常是哪个：</span></div>
<script>
var speed = 20;
var c=0;
var obj =document.getElementById('marquee')
var w= obj.offsetWidth;
var p = obj.parentNode.offsetWidth;
function Marquee(){
c++;
if(c>w){
c=0;
}
obj.style.webkitTransform = 'translateX(-'+ c +'px)'
};
if(w>p){
var mq = setInterval(Marquee, speed);
obj.appendChild(document.createTextNode(obj.innerText))
};
</script>
</body>
</html>

--根据类名

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>社群空间</title>
<link href="css/font-awesome.css" rel="stylesheet">
<style>
div{
overflow: hidden;
}
.marquee{
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>

<div><span class="marquee">过 translate() 方法，元素从其当前位置移动王二小是儿童团员她常常是哪个：</span></div>
<div><span class="marquee">adsfadsf 小是儿童团员她常常sdfasdf：</span></div>
<div><span class="marquee">过 translate() 方法，元素从其当</span></div>

<script>
function scroll(obj){
var speed = 20;
var c=0;
var w= obj.offsetWidth;
var p = obj.parentNode.offsetWidth;
function Marquee(){
c++;
if(c>w){
c=0;
}
obj.style.webkitTransform = 'translateX(-'+ c +'px)'
};
if(w>p){
var mq = setInterval(Marquee, speed);
obj.appendChild(document.createTextNode(obj.innerText))
};
};
for(var i=0;i<document.querySelectorAll('.marquee').length;i++){
scroll(document.querySelectorAll('.marquee')[i]);
};
</script>
</body>
</html>

超界文字滚动 （id和类型两种实现方式）的更多相关文章

  1. android带有文字的图片按钮的两种实现方式

    android带有文字的图片按钮的两种实现方式 1). TextView对Button用相对布局,这要要求按钮的背景图片要留下空白位置给文字.这种方式开发比较简单,适合做一些风格一致的Button. ...

  2. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  3. PlaceHolder的两种实现方式

    placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 如 <input typ ...

  4. Android进程通信之一：两种序列化方式

    2月下旬辞职了,去海南度假到现在,领略了一把三亚风情也算任性和 然而这样任性带来的后果就是..不行了我必须吐槽一句.. 没毕业的找工作就这么难嘛!投了57家一家面试机会都没有,好歹给个面试机会啊!!本 ...

  5. Hibernate中双向多对多的两种配置方式

    Hibernate中双向多对多的两种配置方式 1.建立多对多双向关联关系 package cn.happy.entitys; import java.util.HashSet; import java ...

  6. JAVA高级架构师基础功:Spring中AOP的两种代理方式:动态代理和CGLIB详解

    在spring框架中使用了两种代理方式: 1.JDK自带的动态代理. 2.Spring框架自己提供的CGLIB的方式. 这两种也是Spring框架核心AOP的基础. 在详细讲解上述提到的动态代理和CG ...

  7. Mybatis系列全解（七）：全息视角看Dao层两种实现方式之传统方式与代理方式

    封面:洛小汐 作者:潘潘 一直以来 他们都说为了生活 便追求所谓成功 顶级薪水.名牌包包 还有学区房 · 不过 总有人丢了生活 仍一无所获 · 我比较随遇而安 有些事懒得明白 平日里问心无愧 感兴趣的 ...

  8. Web APi之认证（Authentication）两种实现方式【二】（十三）

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

  9. Android中BroadcastReceiver的两种注册方式（静态和动态）详解

    今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...

随机推荐

  1. MVC教程

    http://developer.51cto.com/art/201309/409950_all.htm

  2. ip地址分类和网段区分

    IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...

  3. apue学习记录——配置apue.3e，实现P4‘ls例子

    #include"apue.h" #include<dirent.h> int main(int argc,char *argv[]) { DIR *dp; struc ...

  4. Java中获取当前日期

    java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...

  5. java 中递归的实现 以及利用递归方法实现汉诺塔

    今天说下java语言中比较常见的一种方法,递归方法. 递归的定义 简单来说递归的方法就是"自己调用自己",通过递归方法往往可以将一个大问题简单化,最终压缩到一个易于处理的程度.对于 ...

  6. XSL相关

    <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="tex ...

  7. Centos6.3手动rpm安装gcc,c++

    如果你的服务器是不能上网的,那就说明你要手动安装很多软件,比如gcc; 1,首先到http://vault.centos.org/6.3/os/x86_64/Packages/下载用到的rpm包,包括 ...

  8. JavaBean 反射机制实现自动配置数据

    声明:该版本是没完成的.该博文只做记录代码用 String memberType(String name) throws Exception { return getType(getClass().g ...

  9. CodeForces 696C PLEASE

    快速幂,费马小定理,逆元. 设$dp[n]$表示$n$次操作之后的概率,那么$dp[n] = \frac{{(1 - dp[n - 1])}}{2}$.$1-dp[n - 1]$表示上一次没有在中间的 ...

  10. nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)

    环境:Centos6.5 行为:安装nginx 问题: nginx: [emerg] socket() [::]: failed (: Address family not supported by ...