// 滚动的文字
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. 08.03 js _oop

    js 分6个基本类型: string boolean number undefind null   自定义对象 对象的种类: js内置的  ( 比如 string number ) 宿主对象 (比如 ...

  2. 开发基于Edge渲染内核的浏览器应用

    在使用Edge之前,我们先来看看UWP(Universal Windows Platform)平台.微软研发了多种设备平板.手机.Xbox.个人电脑等,在此之前,如果需要给每台设备开发程序,都需要对应 ...

  3. VisualStudio控制台输出窗口一闪而过

    我用到开发环境是visual studio 2010,写的简单的控制台程序,结果一按control+F5输出窗口出现后立刻就消失了(平时很少这样的呀),按照以往经验,加上了在程序结尾getchar() ...

  4. 转:Autodesk 2017软件下载+注册机+破解方法(持续更新)

    转载自http://blog.sina.com.cn/s/blog_710225790102w03e.html Autodesk 2017安装步骤: 安装Autodesk 2017相关软件 使用序列号 ...

  5. 【leetcode】Unique Binary Search Trees (#96)

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  6. CozyRSS开发记录7-了解RSS

    CozyRSS开发记录7-了解RSS 1.初窥RSS 多找几个RSS源就会发现,有的源是用Atom协议提供的,有的源是RSS协议提供的.RSS协议有过几个版本,0.9.1.0和2.0等,理论上支持2. ...

  7. Python学习笔记(三)——类型与变量

    一.输入与输出 print("string"); print("string1","string2","string3" ...

  8. HDU 1712 ACboy needs your help(分组背包)

    题意:给你n的课程组,每个课程组有m个课程,每个课程有一个完成时间与价值.问在m天内每组课程组最多选择一个,这样可以得到的最大价值是多少 题解:分组背包,其实就是每个课程组进行01背包,再在课程组内部 ...

  9. 《DSP using MATLAB》示例Example5.14

    代码: x1 = [1,2,2]; x2 = [1,2,3,4]; y = circonvt(x1,x2,4) n1 = 0:1:length(x1)-1; n2 = 0:1:length(x2)-1 ...

  10. Java 根据两个经纬度坐标计算距离

    public class Distance{ private static final double EARTH_RADIUS = 6378137;    private static double  ...