(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知
轮播广告通知整体思路：
1.首先文字的移动利用了JAVA script 中ScrollLeft的知识点；
2.在设置一条一模一样的新闻，利用无缝轮播图滚动的原理让新闻无缝滚动。
3.使用了自执行匿名函数，让网页载入后自动开始执行定时器，开始轮播广告通知。
实现效果：文字实现无缝跑马灯滚动轮播效果，鼠标划入停止滚动，鼠标移出继续滚动。
代码内有超级详细的注释，如有疑问，请留言，会在第一时间回复！
效果图：
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
html{
width: 100%;
height: 100%;
/*给网页设置渐变背景色*/
/*在渐变色之前设置一个背景颜色为纯色，第二个设置渐变色会将第一个覆盖覆盖，此举是为了防止一些浏览器不兼容渐变色*/
background-color: #74ebd5;
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
/*内容栏的设置*/
#box{
margin:200px auto 0;
padding:0 10px;
width:1000px;
height:140px;
line-height:140px;
border-radius: 15px;
/*border的dashed 指虚线*/
border:1px dashed green;
background:lightgreen;
}
#box #wrap{
height:140px; overflow:hidden; /*wrap元素里面的文字禁止换行*/
white-space:nowrap;
}
#box span{
color:red;
font-weight:bold;
font-size:50px;
}
/*让两条新闻在同一行，把第二条新闻变成行内块元素*/
#wrap div{
display:inline-block;
font-size: 34px;
}
</style>
</head>
<body>
<div id='box'>
<div id='wrap'>
<div id='conBegin'>
<span>最新消息：</span>6月3日上午，中国国防部长魏凤和发言：如果有人胆敢把台湾从中国分裂出去，中国军队别无选择，必将不惜一战，必将不惜一切代价，坚决维护祖国统一。
</div> <!-- 在设置一条一模一样的新闻，利用无缝轮播图滚动的原理让新闻无缝滚动-->
<div id='conEnd'>
<span>最新消息：</span>6月3日上午，中国国防部长魏凤和发言：如果有人胆敢把台湾从中国分裂出去，中国军队别无选择，必将不惜一战，必将不惜一切代价，坚决维护祖国统一。
</div>
</div> </div> <script> // 这里这个函数用到自执行匿名函数，前一个括号是一个匿名函数，后一个括号代表立即执行。
// 作用：可以用它创建命名空间，只要把自己的所有代码都写在这个特殊的函数包装内，那么外部就不能访问，防止代码
(function(){
var box = document.getElementById('box');
var conBegin = document.getElementById('conBegin');
var wrap = document.getElementById('wrap'); //利用封装好的获取css样式的函数，来获取conBegin的宽度
var conBegin_width = getCss(conBegin,'width'); var timer = window.setInterval(move,10); function move(){
// 核心代码！！！
// scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离！！！
// scrollLeft属性可以返回或者设置元素内容向左滚动的尺寸。
// 也就是被元素左侧所遮挡的尺寸，或者说滚动条向右滚动的距离。
// 返回或者设置的值都是数字，不能带单位，默认单位是像素。
// 此属性相当有用，比如可以用来制作水平无缝滚动效果
// 简单了说：元素会从scrollLeft的位置显示该元素的内容。 // 这个属性只能用于元素设置了overflow的css样式中，一般和overflow:hideen配合使用 // scrollLeft相当于该元素的显示（可见）的内容与该元素实际的内容的距离,每执行一次定时就距离加1,就形成了文字滚动效果
wrap.scrollLeft ++;
// 如果是wrap元素的显示的内容与该元素实际的内容的距离。超过盒子的宽度，就让scrollLeft为0,从头开始
if(wrap.scrollLeft >= parseInt(conBegin_width)){
wrap.scrollLeft = 0
}
} //鼠标划过停止定时器
box.onmouseover = function(){
window.clearInterval(timer);
}
// 鼠标离开启动定时器
box.onmouseout = function(){
timer = window.setInterval(move,10)
}
}()) // 封装的一个JS获取CSS样式的方法，第一个写需要获取的元素，第二个获取的属性，第三个参数需要更改的样式
function getCss(obj,attr,value){
var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
if(arguments.length === 2){
return getStyle;
}else if(arguments.length === 3){
obj.style[attr] = value;
}
} </script>
</body>
</html>
(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知的更多相关文章
- 原生JavaScript实现焦点图轮播
不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...
- (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
原生js实现放烟花效果,点击鼠标,然后随机向四周扩散,! 思路: 1.首先烟花是五颜六色的,所以我们先写一个随机颜色的函数: 2.创建一个制造烟花的构造函数,第一个参数为元素,第二参数为初始x轴位置, ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- Android使用ViewPager做轮播
ViewPager.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- React Native 如何做轮播图 react-native-swiper
//:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...
- 利用RecyclerView实现无限轮播广告条
代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...
- 最简单的轮播广告(原生JS)
改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- OpenGL中GLSL渲染茶壶光照完整程序
顶点着色器VertexShader.txt: uniform vec3 lightposition;//光源位置 uniform vec3 eyeposition;//相机位置 uniform vec ...
- 浅谈WPF中对控件的位图特效（WPF Bitmap Effects）
原文:浅谈WPF中对控件的位图特效(WPF Bitmap Effects) -------------------------------------------------------------- ...
- python3实现域名查询和whois查询
关键字:python3 域名查询 域名查询接口 whois查询原文:http://www.cnblogs.com/txw1958/archive/2012/08/31/python3-domain-w ...
- mysql 加入柱更改列删除列
MySQL 加入列,改动列,删除列 ALTER TABLE:加入,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to bb ...
- opengl编程指南 第七版 源代码bug Page35 lines.c 红宝书
问题1:根据源代码时,我发现的时候去敲门.不正确实施效果.哪里是不正确?没有源代码glPushAttrib(GL_LINE_STIPPLE) glPopAttrib().所以会出现最后的下一次抽奖提供 ...
- abp框架(aspnetboilerplate)扩展系统表
以OrganizationUnit为例,进行扩展,加入IsUse属性 1.创建一个新类,比如ExtendedOrganizationUnit,继承OrganizationUnit public cla ...
- Servlet的基础知识
没有什么固定的结构, 就是稍微总结一下学习到的, 基本上想到哪里写到哪里. 关于基本的最HttpServlet 实际上Servlet是J2EE(也就是现在的Java EE)中规范的一个接口, 用于根据 ...
- centos 6 yum源记录,离线下载rpm包的办法
wget -O /etc/yum.repos.d/CentOS6-Base-163.repo http://mirrors.163.com/.help/CentOS6-Base-163.repo rp ...
- Delphi7下安装TMS component控件
1.启动delphi7.2.File-->Open Project ...打开TMS component 源目录下的“tmsd7.bpg”. 3.在打开的窗口列表中,依次在各选项上点击鼠标右键, ...
- 一些常用的UI框架
MUI 挺好用的ui库,结合Hbuild更好用哦 WEUI 腾讯出品,和微信样式完美匹配 SUI Element UI 饿了么出品的桌面端ui框架 Mint-UI 饿了么针对移动端的ui框架 VUX ...