opacity property opacity level
filter (filter) property
left attribute specifies the left edge of the element. This attribute defines the outer margin of the left boundary of targeting elements including the offset between the block and its left boundary.
offsetHeight: Get the height of the object relative to the layout or the coordinates specified by the parent coordinate parent offsetParent property
offsetLeft: acquiring object relative to the layout or left position is calculated by the specified coordinate parent offsetParent property
offsetTop: acquiring layout or a property of the object with respect to offsetTop calculating the tip position specified coordinate parent
onmouseover: when the mouse pointer moves trigger element
the clearInterval () method of the timing to cancel the operation performed by the function setting setInterval (). the clearInterval parameter () method must be the ID value of setInterval () returns.
To use the clearInterval () method, when creating the operation execution timing using a global: myVar = setInterval ( "javascript function", milliseconds);
obj.offsetLeft: Get the left relative to the parent object distance;
obj.style.left: Gets or sets the left relative to the parent object property has a positioning (position defined relative) distance
The same point:
if the parent element is defined position relative, position defined subelement absolute, then the value of the child element obj.style.left with respect to the value of the parent div, obj.offsetLeft value is true.
difference:
obj.style.left Returns a string (e.g. 50px), obj.offsetLeft returns a value (e.g., 50)
obj.style.left is writable, obj.offsetLeft are read-only
values of obj.style.left has to be defined, otherwise, it is to null. And it must be defined in the label
obj.offsetLeft the compatibility in IE7, but not in IE7 under obj.style.left.
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> sliding navigation bar </ title>
<style type = "text / CSS">
#ul {
width: 360px;
height: 40px;
margin: Auto 30px;
position: relative; / * JS obj.style.left defined relative to the rear is provided if the position corresponding to the parent element is defined relative, child elements position is defined as the absolute, then the value of the child element obj.style.left with respect to the value of the parent div, obj.offsetLeft value is true. * /
Background: #eee;
padding: 0;
border-RADIUS: 10px;
}
#ul Li {
width: 80px;
height: 25px;
margin: 5px 5px;
padding: 0;
Line-height: 25px;
a float: left;
text-align = left: Center;
Cursor: pointer;
}
#ul li.mli {
position: Absolute;
width: 80px;
height: 25px;
background: Red;
left: 0;
Top: 0;
Opacity: 0.5;
filter : Alpha (Opacity = 50);
border-RADIUS: 10px
}
</ style>
<Script the src = "move.js"> </ Script>
<Script type = "text / JavaScript">
// navigation principle bar: using the accelerator and deceleration, acceleration run faster and faster, the speed reduction will be equal to the deceleration 0 returns. Analog friction: the speed * = 0.7, and finally ispeed equal 0;
/ * define a block, and then write the js if statement determines the conditions are then moved pixel * /
the window.onload = function () {
var oUl = document.getElementById ( 'ul') ;
oUl.getElementsByTagName aLi = var ( 'Li');
var iSpeed = 0;
var lLeft = 0;
var Timer = null;
that motion li {// for (i ++ i = 0; ; i <aLi.length-1) does not traverse
aLi [I] .onmouseover = function () {
Tmove (aLi [-aLi.length. 1], this.offsetLeft)
}
}
function Tmove (obj, Itarget) {
the clearInterval (Timer);
Timer = the setInterval (function () {
iSpeed + = (Itarget-obj.offsetLeft) /. 5; // speed formula
iSpeed * = 0.7; // analog friction
lLeft iSpeed + =;
/ * current velocity is sufficiently small position sufficiently close to the target stop position counter is executed * /
IF ( math.abs (iSpeed <. 1) && math.abs (obj.offsetLeft <. 1)) {
the clearInterval (Timer);
obj.style.left = iTarget + 'px'; / * Returns a string because obj.style.left (50px), and obj.offsetLeft (50) * /
} the else {
obj.style.left lLeft + = 'PX' ;
}
}, 30) / * every 30ms to perform a function * /
}
}
</ Script>
</ head>
<body>
<UL ID = "UL">
<Li> Home </ Li>
<Li> personal introduction < / Li>
<Li> Service Center </ Li>
<Li> entertainment world </ Li>
<Li class = "MLI"> </ Li>
</ UL>
</ body>
</ HTM