//根据元素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. 为 ngui TweenPosition 添加 pingpongone

    //---------------------------------------------- // NGUI: Next-Gen UI kit // Copyright © 2011-2015 T ...

  2. spring security：ajax请求的session超时处理

    当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...

  3. python返回null和空的不同

    mysql数据库中有的字段是NULL, 有的字段是空白 写Python脚本,fetchall()得到结果,也是不同. NULL对应的是None, 空白对应的是'' (None, '') 所以根据结果进 ...

  4. Linux中的shell函数编写

    function huge_cp() { while read line1; do cp $line1 ../; done; } function huge_rm() { while read lin ...

  5. My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  6. iframe标签使用总结与注意问题

    子页面访问父父页面变量,函数,页面元素 //变量: //在父页面中需定义为全局变量 //子页面中调用 var childFrameVar= parent.ParentVarName; //函数: pa ...

  7. mac下配置gdb调试golang

    mac下配置gdb调试golang 原文链接 https://sourceware.org/gdb/wiki/BuildingOnDarwin Building GDB for Darwin Crea ...

  8. MUI判断网络连接以及监听网络变化JS

    来源:netChange问题:怎么判断网络状态 MUI用于获取当前设备的网络类型 function plusReady(){ var types = {}; types[plus.networkinf ...

  9. jquery选择器之基本筛选选择

    1.基本选择器 2.内容筛选选择器 3.可见性筛选选择器 4.属性筛选选择器 5.子元素筛选选择器 6.表单元素选择器 7.表单对象属性筛选器

  10. UVALive 6910 Cutting Tree（并查集应用）

    总体来说,这个题给的时间比较长,样例也是比较弱的,别的方法也能做出来. 我第一次使用的是不合并路径的并查集,几乎是一种暴力,花了600多MS,感觉还是不太好的,发现AC的人很多都在300MS之内的过得 ...