//根据元素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. Angular JS Scope（作用域）

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...

  2. i++与++i区别使用

    中心:使用变量自增或者处减使用尽量使用++i与--i,而不要去使用i++与i-- ++i与--i可以做左值也可以做右值,而i++与i--只能做右值. 对于基础类型i++与++i结果相同,但是i++肯定 ...

  3. 从补丁到POC CVE-2015-0003(2015.3)

    从补丁到POC CVE-2015-0003 1. 简介 该漏洞是由于Windows的win32k.sys模块存在对用户层参数验证不完全,导致存在空指针解引用(Null Pointer Derefere ...

  4. hibernate增删改查

    -----------增加--------- public void insertUsers(String userName,String userPwd) { Users u=new Users() ...

  5. setAction方法 Snackbar 右侧按钮可以被点击并处理一些事件

    从数据库同一记录取得的字段所组装成的对象应该是同一个对象,然后由不同的Session从数据库同一条记录上分别取得对象,它们的内存地址是不一样的. 一般来说,常见的数字加密方式都可以分为两类,即对称加密 ...

  6. OpenCV程序在Debug时出现「PDB文件无法加载」的一个解决方法

    这几天毕设要用到OpenCV,按照网上的教程来搭建开发环境. 用的是OpenCV 3.0 beta + Visual Studio Community 2013.我的系统64位是Win 8.1,但在加 ...

  7. AMD规范

    common.js主要语法就是 var math=require('math'); math.add(2,3); require()用于加载模块就行了. 二行math.add(2, 3),在第一行re ...

  8. sdk是啥

    SDK 英文名称  software  development kit ,即 软件开发工具包,就好第三方服务商提供的实现软件某功能的工具包

  9. mysql 初始化修改密码问题（Mac系统）

    今天公司大牛帮我搞定了mysql初始化密码问题,纪录一下: ~ ps aux | grep mysqlMetro 7149 0.0 0.0 2432772 564 s000 R+ 7:16下午 0:0 ...

  10. Constraint where both columns cannot be null, but one can

    ALTER TABLE TableA ADD CONSTRAINT CK_BothDepartsNotNull CHECK (departA IS NOT NULL OR departB IS NOT ...