//根据元素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. 朗姆达表达式类似IN查询条件

    if (list.Contains("全部"))            {                model.All = true;            }        ...

  2. Java之IO流

    目录: 1.文件编码 2.File类 3.RandomAccessFile 4.字节流 5.字符流 6.对象的序列化和反序列化 1.文件编码 1)相关知识点 八进制和十六进制的表示方式:八进制前面加0 ...

  3. 《C程序设计语言》 squeeze函数（从字符串s中删除字符c）

    squeeze void squeeze(char string[], int ch) { int i, j; ; string[i] != '\0'; i++) { if (string[i] != ...

  4. Introduction to Programming Contests (stanford)

    http://web.stanford.edu/class/cs9http://web.stanford.edu/class/cs97si/7si/

  5. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

  6. LWP::UserAgent介绍1

    require LWP::UserAgent; my $ua = LWP::UserAgent->new; ); $ua->env_proxy; my $response = $ua-&g ...

  7. my_query()的引号注意

    $sql="insert into lianxi values(null,'$usename','$email',$sex,$age,'$chusheng','$guanji')" ...

  8. unsupported major.minor version 52.0，错误

    Make sure that all the classes needed by the application have been compiled with a compatible java v ...

  9. JavaScript 属性类型（数据属性 访问器属性）

    ECMA-2把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.” 严格来说,这就相当于说对象是一组没有特定顺序的值.对象的属性或方法都有一个名字,而每个名字映射到一个值.我们可以把E ...

  10. File对象的常用方法

    File对象不仅可以表示文件,还可以表示目录,源码注释是这么说的:An abstract representation of file and directory pathnames. File类最常 ...