(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的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- 创Python规划2
于Milang的IDE多年的编辑后,,然后按F5关于实施.这将是在下面Output输出形式"Hello, World!"弦,例如下面的附图: watermark/2/text/aH ...
- 用ORACHK自己主动化检查数据库系统的健壮性
1.orachk工具主要用途 (1)主动检查您的整个软件在操作系统.CRS.数据库.高可用等层面中的严重问题,以便于IT部门整改,提升系统的稳定性 (2)对于您系统中存在的风险提供简单化和合理化的诊断 ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- WPF-Button|IsCancel&&IsDefault
原文:WPF-Button|IsCancel&&IsDefault Button个别属性 <Button ToolTip="ESC" IsDefault=&q ...
- React学习（3）——ref，key，PureComponent，bindActionCreator
ref 如果在html里设置ref那么它就指向这个真实的DOM节点. 如果在组件里设置ref,那么它就指向这个组件实例的引用,和组件里面的this互等. 我们经常在表单input,select里使用, ...
- .net core使用ef 6
需要是core(with full .net framework)的项目,因为core本身不支持ef 6 注意新建的项目是.net framework+.net core的 有空来填坑,参考资料写的很 ...
- This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.
Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when ...
- Simple BeamSearch Codes for Python
Code from: https://github.com/SeitaroShinagawa/simple_beamsearch probs = [[[],[0.3,0.7]], [[0],[0.1, ...
- 使用Netconf管理Cisco网络设备
测试环境:Cisco CSR1000V虚拟化环境 Step 1:开启Cisco设备netconf-Yang,如下图: CSR1000V(config)#netconf-yang CSR1000V(co ...
- Win8Metro(C#)数字图像处理--2.5图像亮度调整
原文:Win8Metro(C#)数字图像处理--2.5图像亮度调整 2.5图像亮度调整函数 [函数名称] 图像亮度调整函数BrightnessAdjustProcess(WriteableBit ...