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在定时器里面迭 ...
随机推荐
- Spring+SpringMvc+Mybatis框架集成搭建教程一(项目创建)
一.框架搭建环境 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Idea 15.04 二 ...
- apache通过cgi调用exe程序
windows下,使用c写了一个简单的cgi程序,生成exe类型的可执行文件,代码如下: #include<stdio.h> int main() { printf("Conte ...
- C++ 基础知识复习(三)
43. 继承的几种方式: 答:共有继承public,保护继承protected,私有继承private.其中后两种继承会改变原有的访问级别. 44. 深复制与浅复制: 答:简单理解,深复制自己申请了内 ...
- Mybatis 使用maven插件mybatis-generator自动生成entities和SQL和mapper
第一步:在pom中添加该插件的配置,我直接把pom贴上来好了 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...
- UltraEdit 注册机使用说明
请断开网络连接(或直接拔掉网线)后执行: 安装完成后,点击弹出界面的“注册”按钮,然后直接点击“激活”,此时UltraEdit检测到网络断开则弹出界面提示“脱机激活”,此时启动注册机,并将UltraE ...
- VMware桥接模式无法自动化获取IP的解决方法
虚拟机桥接无法自动获取IP的解决方法 在虚拟机VM里面装了centos系统,网卡选用桥接方式. 刚开始的时候还能自动获取到IP地址,突然有一天IP消失了,再怎么重启都无法获取IP地址.因为之前是可以获 ...
- ANdroid Studio查看debug SHA1
先打开 之后再命令行里输入cd.android 回车 在输入keytool -list -keystore debug.keystore 回车 之后会显示叫你输入密钥库口令: 这是你输入androi ...
- 一个列子演示vs2010 c++新特性
近日托安装雪豹的"福",格了XP装了win7,前段时间看了C++0X标准以及VS2010诱人的新特性,不禁心痒痒在线安装了VS2010,然后手写了这个列子用来测试新增的特性. st ...
- 清华学堂 LightHouse
灯塔(LightHouse) Description As shown in the following figure, If another lighthouse is in gray area, ...
- 1.0 多控制器管理(附:Demo)
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 控制器 : 一个iOS的app很少只由一个控制器组成,除非这个app极其简 ...