(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 垃圾回收装置
转载: https://www.cnblogs.com/pinganzi/p/6646742.html 简要描述Python的垃圾回收机制(garbage collection). 答案 这里能说的很 ...
- 关于java中继承抽象类和实现接口的区别
简单来说,继承就是“是不是”,实现就是“有没有”.(一个大神说的,我觉得很生动很形象 海子大神链接http://www.cnblogs.com/dolphin0520/p/3811437.html)
- java多线程模拟生产者消费者问题，公司面试常常问的题。。。
package com.cn.test3; //java多线程模拟生产者消费者问题 //ProducerConsumer是主类,Producer生产者,Consumer消费者,Product产品 // ...
- Linux内核源代码情景分析-fork()
父进程fork子进程: child = fork() fork经过系统调用.来到了sys_fork.具体过程请參考Linux内核源码情景分析-系统调用. asmlinkage int sys_fork ...
- WPF的消息机制（一）- 让应用程序动起来
原文:WPF的消息机制(一)- 让应用程序动起来 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/powertoolsteam/article/det ...
- Ionic3开发环境搭建-VS Code
原文:Ionic3开发环境搭建-VS Code 一.Ionic3在VS Code中的开发环境搭建 1.全局安装Ionic包 npm install -g cordova ionic 使用 ionic ...
- 图像滤镜艺术--PS平均(滤镜-模糊-平均)效果
原文:图像滤镜艺术--PS平均(滤镜-模糊-平均)效果 本文介绍PS中滤镜-模糊-平均模糊的效果实现: 这个效果很简单,原理如下: 1,统计全图像素的R,G,B值得和sumR,sumG,sumB; 2 ...
- 一个技术人，最重要的是：极客精神（好奇心 + 探索欲）（新de代码）
一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...
- storm(一)
Storm 一个用来实时计算的流框架,具有高可用,低延迟,数据不丢失,分布式的特点 storm 处理数据的方式是基于消息的流水线处理,因此特别适合无状态的计算,也就是说计算单元依赖的数据全部在接受的消 ...
- asp.net网站在手机浏览器上全屏显示
前段时间要把asp.net 网站,在手机上全屏浏览,发现总是小小的一块,不能全屏 后来发现 JQuery Mobile 中在开头都用 <meta name="viewport&quo ...