// 滚动的文字
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. 字符串专题:KMP POJ 3561

    http://poj.org/problem?id=3461 KMP这里讲的不错next的求法值得借鉴 http://blog.sina.com.cn/s/blog_70bab9230101g0qv. ...

  2. 最简单的js确认框!

    随便举个栗子~ function bremove() { if (ids == "") {//触发函数,如果值是空弹框 alert("您还没有选择任何数据.") ...

  3. svn 更新命令(冲突时使用theirs)

    svn cleanup svn revert -R -q ./ svn up --force --accept tc

  4. .NET 清理非托管资源

    Dispose 类型的 Dispose 方法应释放它拥有的所有资源.它还应该通过调用其父类型的 Dispose 方法释放其基类型拥有的所有资源.该父类型的 Dispose 方法应该释放它拥有的所有资源 ...

  5. 单词(bzoj 3172)

    Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N ...

  6. SPRING MVC总结

    DispatcherServlet -- 前置控制器HandlerMapping接口 -- 处理请求的映射HandlerMapping接口的实现类:DefaultAnnotationHandlerMa ...

  7. MySQL 相关

    Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统. 但是该引擎不支持FULLT ...

  8. oracle的回收站介绍

    昨天做的展示oracle表空间功能剩余空间的功能,发现查询表dba_free_space时特别慢,经网上搜索,说是由于表空间碎片和回收站(Oracle 10g以后才有)引起的,后来搜到一片介绍回收站的 ...

  9. JavaScript老梗之this对象

    Js中的this关键词貌似是初学者必经的坑 都不例外 我们经常听到其他人说 this对象谁调用指向谁 的确这是最容易理解的 但是我们可以更加深入的去探索下 加深印象以便更加灵活的适用它 这里不得不提下 ...

  10. Model Validation in ASP.NET Web API

    Model Validation in ASP.NET Web API 原文:http://www.asp.net/web-api/overview/formats-and-model-binding ...