//根据元素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. 3、XCode: 如何添加自定义代码片段

    我们经常会定义一些retain的property,而且大概每次我们都会像这样写: @property (nonatomic, retain) Type *name; 每次都要老老实实的把“@prope ...

  2. JS：JSP Servlet

    Servlet 是在服务器上运行的小程序.这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果得到为用户进行 ...

  3. JPG 图片在IE下不能显示的问题

    最近碰到一些客户说,我传的产品图片怎么在网站上无法显示啊.图片也是正常的jpg格式呢.    是的,你传的图片是JPG的,但是怎么就显示不出来呢?    你找深圳网站建设的公司给你建了一个网站,然后在 ...

  4. dotnet的移除-->安装 升级

    之所以要升级dotnet 是因为项目中报了如下错误 意思就是版本低了 为了升级 我先要把之前的移除掉(用脚本移除) #!/usr/bin/env bash # # Copyright (c) .NET ...

  5. HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online)

    HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online) 题目链接http://acm.hdu.edu.cn/showp ...

  6. JavaFX基础学习之OkHttp/Gson2

    222 package application; import java.io.IOException; import java.net.URL; import java.util.ResourceB ...

  7. URL中文参数乱码的一个解决办法

      浏览器对有中文参数的url大部分都用utf-8编码,但我也曾经遇见过用GB2312编码的:如果遇见这样情况,那么接受到的参数就会出现乱码.乱码情况视服务器解码方式,Asp.Net网站一般默认为ut ...

  8. xcode6+ios8 横屏下启动画面不显示问题修改

    本文转载自汉果博客 » xcode6+ios8 横屏下启动画面不显示问题修改 最近我做游戏 发现xcode6+ios8 横屏下启动画面不显示   显示黑屏 . 设置横屏后 设置catalog 添加使用 ...

  9. python的模块！

    以下是对模块的理解,和总结 <1>模块是什么 模块是这样用的 import os 这就是导入了os模块 这和c语言里的#include<stdio.h>导入方式是一样的 导入了 ...

  10. 学习前端前必知的——HTTP协议详解

    前端人士必备的知识点,无论你是否有经验,看了此文绝对有收获 此文针对前端爱好者,前端求职者(话说面试时很容易考到哦) 原文参考博客园http://kb.cnblogs.com/page/130970/ ...