// 滚动的文字
function marqueeScroll() {
//var $target = $(".marquee_outer:visible");
if($(".marquee_outer").length == 0) {
return false;
}
$(".marquee_outer").each(function() {
var $target = $(this);
if($target.hasClass("data-setInterval")) {
return true; // 已经设置过滚动定时器
}
if($target.find("i").length == 0) {
$target.wrapInner("<i></i>");
}
if($target.width() > $target.find("i").width()) {
return true;
}
if($target.find(".marquee_inner2").length == 0) {
$target.wrapInner('<span class="marquee_inner2" style="width:1000%"></span>');
$target.find(".marquee_inner2").append($target.find("i").clone(true));
}
var marquee_1 = $target.find("i")[0];
var marquee_2 = $target.find("i")[1];
var marquee_outer = $target[0];
setInterval(function() {
if(marquee_outer.scrollLeft - marquee_2.offsetWidth >= 0) {
marquee_outer.scrollLeft -= marquee_1.offsetWidth;
} else {
marquee_outer.scrollLeft++;
}
}, 30);
$target.addClass("data-setInterval");
});
}
// 调用
<script>
setInterval(marqueeScroll, 2000); // 标题文字滚动
</script> <div class="marquee"><em>知识点{{ forloop.counter }}:</em><span class="marquee_outer">{{ k.name }}</span></div>

.

js 滚动的文字(走马灯)的更多相关文章

  1. 微信小程序 - 文字走马灯

    转载于csdn maid_04,总之多谢了!节省了不少时间呢 最近在做一个类似uu跑腿的项目,时间也特别紧,搞完以后再继续贴地图代码(高德.腾讯) 以下代码拷贝即可用,拿走谢谢上面的人吧(~.~) w ...

  2. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  3. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  4. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  5. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  6. js 滚动到一定位置导航定位在页面最顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

  8. js鼠标经过文字滚动,移开还原

    不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...

  9. js写滚动的文字

    页面中的文字,逐个显示在页面:由于电脑的配置较低,录制的视频相对来说比较卡顿 思路: 用一个定时器将预制的文字通过字符串截取.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面迭 ...

随机推荐

  1. Java NIO 系列教程

    http://www.iteye.com/magazines/132-Java-NIO

  2. hibernate中数据库方言

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  3. LINUX DNS解析的3种修改方法~

    1.HOST 本地DNS解析 vi /etc/hosts 添加规则 例如: 223.231.234.33 www.baidu.com 2.网卡配置文件DNS服务地址  vi /etc/sysconfi ...

  4. 上个项目的一些反思 II

    上个项目需要使用通讯录,我在回顾自己设计的时候,发现自己少设计了cache这一环. 虽然直接用SQLite在初期体验上没什么大损失,不过可以预想通讯录增长到一定数量后势必会影响体验. 单例模式,全局缓 ...

  5. java高cup占用解决方案

    项目中发现java cpu占用高达百分之四百,查看代码发现有一个线程在空转,拉高了cup while(true){ } 解决方案,循环中加入延迟:Thread.sleep(Time): 总结下排查CP ...

  6. Java设计模式之创建型模式

    创建型模式分为五类:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式 一.工厂方法模式:接口-实现类.工厂类

  7. C#中将DataTable转成List

    学习MVC的时候,使用List<T>来存储数据给前台,但是从数据库中直接读取得到的是DataTable,虽然可以直接循环DataTable来得到list,但是如果每个实体类都通过这样的得到 ...

  8. ASP.NET MVC cs类中根据Controller和Action生成URL

    var Url = new UrlHelper(HttpContext.Current.Request.RequestContext); Url.Action("AnnounceDetail ...

  9. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  10. 优雅的数组降维——Javascript中apply方法的妙用

    将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转换.本文将从朴素的循环转换开始,逐一介绍三 ...