js 滚动的文字(走马灯)
// 滚动的文字
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 滚动的文字(走马灯)的更多相关文章
- 微信小程序 - 文字走马灯
转载于csdn maid_04,总之多谢了!节省了不少时间呢 最近在做一个类似uu跑腿的项目,时间也特别紧,搞完以后再继续贴地图代码(高德.腾讯) 以下代码拷贝即可用,拿走谢谢上面的人吧(~.~) w ...
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- js 滚动到一定位置导航定位在页面最顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)
首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...
- js鼠标经过文字滚动,移开还原
不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...
- js写滚动的文字
页面中的文字,逐个显示在页面:由于电脑的配置较低,录制的视频相对来说比较卡顿 思路: 用一个定时器将预制的文字通过字符串截取.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面迭 ...
随机推荐
- R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记(转)
https://ask.julyedu.com/question/7490 labelImg:https://github.com/tzutalin/labelImg
- PHPExcel yii2 加载使用
除了用composer 包管理组件的方式外 我们还可以使用 直接最原始的加载方式---超级简单 1.PHPExcel上下载最新的PHPExcel http://phpexcel.codeplex.co ...
- selenium+testng+ant+jenkins 手记
会不会搭建测试平台是一般测试工程师和高级测试工程师分水岭 ----tobecrazy 我们项目有现成的测试平台,使用的是selenium grid+testng+ant+jenkins+VM 但是我平 ...
- .NET 接口
接口 接口是一组抽象成员的集合,表示某个类或结构可以选择去实现的行为,描述的是可属于任何类或结构的一组相关功能.接口方法的实现是在实现接口的类中完成的,实现接口的类可以显式实现该接口的成员, ...
- Android eclipse环境搭建
1安装JDK Java环境 首先,我们必须要安装Java环境,提供语言环境支持,Android一般用Java嘛 下载一个JDK 推荐1.6版本以上 安装好后 记得配置一下环境变量 计算机—>属 ...
- iOS开发UI篇—核心动画(转场动画和组动画)
转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...
- javascript判断给定字符串是否是回文
//判断给定字符串是否是回文 function isPalindrome(word) { var s = new Stack(); for (var i = 0 ...
- 【Java EE 学习 49 上】【Spring学习第一天】【基本配置】
一.HelloWorld 需要的jar文件(以2.5.5为例):spring.jar,common-logging.jar 1.新建类com.kdyzm.spring.helloworld.Hello ...
- 【leetcode】Maximum Subarray (53)
1. Maximum Subarray (#53) Find the contiguous subarray within an array (containing at least one nu ...
- [MongoDB]MongoDB与JAVA结合使用CRUD
汇总: 1. [MongoDB]安装MongoDB2. [MongoDB]Mongo基本使用:3. [MongoDB]MongoDB的优缺点及与关系型数据库的比较4. [MongoDB]MongoDB ...