js实现横向跑马灯效果
首先我们需要一个html代码的框架如下:
<div style="position: absolute; top: 0px; left: 168px; width: 100%; margin-left: auto; margin-right: auto; height: 47px; border: 0px solid red; overflow: hidden;">
<ul id="syNoticeUlNew" style="margin: 0px;left:0; top:0;margin-bottom:0px;width:100%;height:47px;position:absolute;"> </ul>
</div>
我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容应该是动态的。于是应该发送ajax来进行内容的获取拼接。
$.ajax({
type:"post",
dataType:"json",
url:"${contextPath}/indexPage/getSyNoticeInfo",
success:function(result){
var totalStr = "";
if(result.length>0){
for(var i=0 ; i<result.length;i++){
str = "<li style=\"list-style: none;display:inline-block;float:left;height:47px;padding-right:50px;line-height:47px;\">"+
"<a style=\"color:white;\" class=\"sstzNoticeStyle\">"+result[i].peopleName+"</a>"+
"</li>";
totalStr +=str;
}
}
$("#syNoticeUlNew").empty();
$('#syNoticeUlNew').html(totalStr);
syRunHorseLight();
}
});
拼接li时候有个class为sstzNoticeStyle。其样式如下:
.sstzNoticeStyle{
color:white; font-size:16px;text-decoration:none;
}
.sstzNoticeStyle:hover{
color:white; font-size:16px;text-decoration:none;
}
ajax调用syRunHorseLight函数,函数如下:
function syRunHorseLight() {
if (syTimer != null) {
clearInterval(syTimer);
}
var oUl = document.getElementById("syNoticeUlNew");
if(oUl != null){
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
var lis = oUl.getElementsByTagName('li');
var lisTotalWidth = 0;
var resetWidth = 0;
for (var i = 0; i < lis.length; i++) {
lisTotalWidth += lis[i].offsetWidth;
}
for (var i = 1; i <= lis.length / 4; i++) {
resetWidth += lis[i].offsetWidth;
}
oUl.style.width = lisTotalWidth + 'px';
var left = 0;
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20)
$("#syNoticeUlNew").hover(function() {
clearInterval(syTimer);
}, function() {
clearInterval(syTimer);
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20);
})
}
}
跑马灯效果就此实现。
js实现横向跑马灯效果的更多相关文章
- JS实现跑马灯效果(向左,向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
- Vue学习笔记四:跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
随机推荐
- Java中异常的处理以及自定义异常,抛出异常到方法调用栈底层
package com.gezhi; /** * 创建一个自定义异常SpendMoneyException类 * * @author square 凉 * */@SuppressWarnings(& ...
- 利用U盘安装win2008r2系统的步骤
我们在公司或者家里,经常要安装各种系统,最近公司需要重新安装win2008r2系统.折腾了一天的时间,终于把系统装好了.将安装的步骤记录下来,方便大家查看,自己也做个记录. 1 准备win2008r2 ...
- 【Kafka专栏】-Kafka从初始到搭建到应用
一.前述 Kafka是一个分布式的消息队列系统(Message Queue). kafka集群有多个Broker服务器组成,每个类型的消息被定义为topic. 同一topic内部的消息按照一定的key ...
- Hystrix介绍
Hystrix是什么 在分布式环境中,许多服务依赖项中的一些必然会失败.Hystrix是一个库,通过添加延迟容忍和容错逻辑,帮助你控制这些分布式服务之间的交互.Hystrix通过隔离服务之间的访问点. ...
- Jenkins 无法捕获构建脚本错误问题
Jenkins 版本 2.121.1 编写构建脚本执行,发现脚本执行出错,不会中断构建过程,导致最后展现的构建结果是错误的. 原因:构建脚本头部加入 #!/bin/bash ,jenkins会将脚本放 ...
- android studio 调用c/c++工程
首先新建一个工程 这个工程主要测试通过C程序返回一个字符串显示在界面
- 通过LRU实现通用高效的超时连接探测
编写网络通讯都要面对一个问题,就是要把很久不存活的死连接清除,如果不这样做那死连接最终会占用大量内存影响服务运作!在实现过程中一般都会使用ping,pong原理,通过ping,pong来更新连接的时效 ...
- 深度学习(九) 深度学习最全优化方法总结比较(SGD,Momentum,Nesterov Momentum,Adagrad,Adadelta,RMSprop,Adam)
前言 这里讨论的优化问题指的是,给定目标函数f(x),我们需要找到一组参数x(权重),使得f(x)的值最小. 本文以下内容假设读者已经了解机器学习基本知识,和梯度下降的原理. SGD SGD指stoc ...
- kubernetes系列03—kubeadm安装部署K8S集群
本文收录在容器技术学习系列文章总目录 1.kubernetes安装介绍 1.1 K8S架构图 1.2 K8S搭建安装示意图 1.3 安装kubernetes方法 1.3.1 方法1:使用kubeadm ...
- springmvc 项目完整示例05 日志 --log4j整合 配置 log4j属性设置 log4j 配置文件 log4j应用
log4j 就是log for java嘛,老外都喜欢这样子,比如那个I18n ---internationalization 不就是i和n之间有18个字母... http://logging.a ...