1. // 滚动的文字
  2. function marqueeScroll() {
  3. //var $target = $(".marquee_outer:visible");
  4. if($(".marquee_outer").length == 0) {
  5. return false;
  6. }
  7. $(".marquee_outer").each(function() {
  8. var $target = $(this);
  9. if($target.hasClass("data-setInterval")) {
  10. return true; // 已经设置过滚动定时器
  11. }
  12. if($target.find("i").length == 0) {
  13. $target.wrapInner("<i></i>");
  14. }
  15. if($target.width() > $target.find("i").width()) {
  16. return true;
  17. }
  18. if($target.find(".marquee_inner2").length == 0) {
  19. $target.wrapInner('<span class="marquee_inner2" style="width:1000%"></span>');
  20. $target.find(".marquee_inner2").append($target.find("i").clone(true));
  21. }
  22. var marquee_1 = $target.find("i")[0];
  23. var marquee_2 = $target.find("i")[1];
  24. var marquee_outer = $target[0];
  25. setInterval(function() {
  26. if(marquee_outer.scrollLeft - marquee_2.offsetWidth >= 0) {
  27. marquee_outer.scrollLeft -= marquee_1.offsetWidth;
  28. } else {
  29. marquee_outer.scrollLeft++;
  30. }
  31. }, 30);
  32. $target.addClass("data-setInterval");
  33. });
  34. }
  1. // 调用
  2. <script>
  3. setInterval(marqueeScroll, 2000); // 标题文字滚动
  4. </script>
  5.  
  6. <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. php之JavaScript

    JS对于大小写敏感 作用:增加跟html页面的交互性. 应用:验证表单.创建cookies(可插入html页面的编程代码)js插入页面后可由所有现代的浏览器执行.应用于<body>< ...

  2. JsonFormatter PrettyPrint

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. Wireshark抓包工具

    首先下载并安装Wireshark软件,最好选择中文版,因为会使你用的更顺手. 安装完毕之后,双击打开Wireshark软件,主界面还是比较清晰明了的,可是怎么用还是稀里糊涂的吧. 点击菜单栏红圈中的选 ...

  4. Qt应用程序图标设置

    Qt应用程序图标设置 本文仅仅适用于windows下,linux等不适用. 下面说的图标,指的是程序文件的图标,而不是托盘图标或者说运行时任务栏的图标(任务栏和程序窗口的图标在windows/linu ...

  5. espcms列表页ajax无限加载

    类似百度图片的效果,滚动到底部后,点击加载更多,加载出第二页,第三页... 替代了传统的上一页,下一页,第几页,以达到在某些情况下使得用户体验更好. 二次开发方法: 1.先在模板文件中增加ajax文件 ...

  6. Java面试:1

    月薪10000以上: 1.了解Java的反射机制 2. 了解泛型的原理 3. 了解Spring框架的基本原理 4. 熟悉设计模式 5. 了解如斐波那契数列之类的简单算法月薪20000以上: 1. 精通 ...

  7. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  8. (转)ShardedJedisPool的使用

    package com.test; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedi ...

  9. Myeclipse 运行maven控制台中文乱码

    需要在pom中的properties中增加一行配置: <properties> <argLine>-Dfile.encoding=UTF-8</argLine> & ...

  10. 复利计算--结对项目<04-11-2016> 1.0.0 lastest 阶段性完工~

    结对项目:Web复利计算 搭档博客地址:25江志彬  http://www.cnblogs.com/qazwsxedcrfv/ 个人摘要: (2016-04-09-12:00)补充:之前传送门没做好, ...