css&js实现顶部banner滚动提示效果
以一个小例子来展示滚动提示的代码部分:
try.html
<div id="scrollobj" >
<span class="scrollTxt">本活动将于2016年8月30日结束,如有抽奖机会,请尽快使用。              </span>
</div>
try.css
#scrollobj{
white-space:nowrap;
overflow:hidden;
width:100%;
height: 30px;
line-height: 30px;
background-color: #0553a9;
}
.scrollTxt{
width: 100%;
font-size: 16px;
color: #fff880;
}
try.js
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) { obj.innerHTML += obj.innerHTML;}
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) { obj.scrollLeft=0; }
}
$interval(function(){
scroll(document.getElementById('scrollobj'));
},30);
css&js实现顶部banner滚动提示效果的更多相关文章
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- 原生html,css+js写下载按钮有提示动画效果的落地页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- 原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- Swashbuckle for asp.net core 配置说明
0x00 安装 Swashbuckle 6.0 打开程序包管理器控制台,输入: Install-Package Swashbuckle -Pre 0x01 配置 Startup.cs public v ...
- jQuery 遍历(上)
目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...
- IDispatch error #3092
在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...
- 【入门】匈牙利算法+HNOI2006 hero超级英雄
一.关于匈牙利算法 匈牙利算法是由匈牙利数学家Edmonds提出的,用增广路径求二分图最大匹配的算法. 听起来高端,其实说白了就是: 假设不存在单相思(单身狗偷偷抹眼泪),在一个同性恋不合法的国家里( ...
- query判断值是否为空,针对前台提交数据的校验
1.<input type="hidden" id="key" name="key" value="123"> ...
- php多维数组去除空元素
在php中去除数组中的空值可以使用array_filter() 这个函数 但是这个函数只能对一维数组起作用,一旦需要对多维数组去空就不行了,而且去除的空也包括(int)0,(string)0,使用起来 ...
- Consul Template的简单使用
Consul Template的使用 1安装 地址 https://github.com/hashicorp/consul-template/releases wget https://release ...
- Android ListView简单实用
layout创建: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ ...
- 【CSU1808】地铁
ICPCCamp 有 n 个地铁站,用 1,2,-,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i 段地铁属于 ci 号线,位于站 ai,bi 之间,往返均需要花费 ti 分钟(即从 ...
- golang 文件读取
Golang 的文件读取方法很多,刚上手时不知道怎么选择,所以贴在此处便后速查. 一次性读取 小文件推荐一次性读取,这样程序更简单,而且速度最快. 复制代码 代码如下: func ReadAll(fi ...