Carousel Advertising notify the whole idea:
1. First, move the text using the knowledge of JAVA script in ScrollLeft;
2. In a setting exactly the same news, using the principle of a seamless view of the carousel scrolling allows seamless scrolling news.
3. Use a self-executing anonymous function, so that after loading the page automatically started a timer, start Carousel ad notice.
Achieve results: Marquee scrolling text seamless carousel effect, included stops scrolling mouse, mouse out to continue scrolling.
Within the code has super detailed notes, in case of doubt, please leave a message and get back to the first time!
Renderings:
All code is as follows:
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Document </ title>
<style>
* {
margin: 0 ;
padding: 0 ;
font - size : 14px;
}
HTML {
width: 100% ;
height: 100% ;
/ * to set the gradient page background color * /
/ * set before a background color gradient is solid, the second set gradients will first cover to cover, this is to prevent some browser is not compatible gradient color * /
background - color: # 74ebd5;
background the -image: Linear-gradient (to right, # 74ebd5 0%, 100% # 9face6 );
}
/ * Content field provided * /
#box {
margin: 200px Auto 0 ;
padding: 0 10px;
width: 1000px;
height : 140px;
Line - height: 140px;
border - RADIUS: 15px;
/ * border means of dashed dotted line * /
border: 1px dashed Green;
background:; LightGreen
}
{#box #wrap
height: 140px;
overflow: hidden;
/ * wrap elements inside the text prohibits wrap * /
White - Space: nowrap;
}
#box span {
Color: Red;
font - weight: Bold;
font - size: 50px;
}
/ * make news in two the same row, the second row within the news into a block element * /
#wrap {div
the display: inline - block;
font - size: 34px;
}
</ style>
</ head>
<body>
<div ID = 'Box' >
<div ID = 'wrap'>
<div ID = 'conBegin'>
<span> News: </ span> June 3 morning, the Chinese Minister of Defense and Wei Feng statement: If anyone dares to secede Taiwan from China, the Chinese army has no choice, will not hesitate to fight, will at all costs, resolutely safeguard national unity.
</ div>
<- - in exactly the same set up a news, using the principle of a seamless view of the carousel scrolling allows seamless scrolling news!>
<div the above mentioned id = 'conEnd'>
<span> News: </ span> June 3 morning, the Chinese Minister of Defense and Wei Feng statement: If someone dares to split Taiwan from China, the Chinese army has no choice, will not hesitate to fight, will at all costs, and resolutely safeguard national unity.
</ div>
</ div>
</ div>
<Script> // here to use this function self-executing anonymous function, before a parenthesis is an anonymous function immediately after a parenthesis behalf of the Executive.
// function: you can use it to create a namespace, as long as all of their code is written in this particular function package, so it can not be accessed outside to prevent the code
( function () {
var Box = document.getElementById ( 'Box' );
);
Var wrap = document.getElementById ( 'wrap' );
// use packaged css style acquisition function to acquire conBegin width
var conBegin_width = getCss (conBegin, 'width' );
var Timer = the window.setInterval ( Move, 10 );
function Move () {
// the core code! ! !
// scrollLeft: the element is displayed (visible) content from the actual content of the element! ! !
// scrollLeft property to return or set the content of the element size scroll to the left.
// is obscured by the left side of the element size, or the scroll bar to scroll to the right distance.
// return or set values are digital, not with the unit, the default is the pixel.
// This property is quite useful, for example, can be used to make seamless horizontal scroll effect
// simply say: content of the element element will be displayed from the position of scrollLeft.
// This property can be used only element sets css style overflow, in general, and overflow: hideen used in conjunction with
// the scrollLeft corresponding to the display element (visible) content and the actual content from the element, each execution timing of adding 1 to the distance, to form text scrolling effect
wrap.scrollLeft ++ ;
// if wrap element content displayed distance of the actual content of the element. Than the width of the box, to let scrollLeft 0, scratch
IF (wrap.scrollLeft> = the parseInt (conBegin_width)) {
wrap.scrollLeft = 0
}
}
// mouse across stops timer
box.onmouseover = function () {
window .clearInterval (timer);
}
// mouse leaves start timer
box.onmouseout = function () {
timer = the window.setInterval (Move, 10 )
}
} ())
// a method JS acquired CSS style package, a first write element needs to be acquired, the acquired second style attributes, the third parameter needs to be changed in
function getCss (obj, attr, value) {
var the getStyle obj = ? .currentStyle obj.currentStyle [attr]: the getComputedStyle (obj, to false ) [attr];
IF (=== The arguments.length 2 ) {
return the getStyle;
} the else IF (=== The arguments.length. 3 ) {
obj.style [attr] = value;
}
}
</ Script>
</ body>
</ HTML>