Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
Body {
margin:0;
Background: #f1f1f1;
}
p {
margin:0;
}
#dorpDown {
position:relative;
margin:30px Auto;
width:120px;
}
#dorpDown H2 {
margin:0;
Font:16px/36px "Song Body";
Text-align:center;
Background: #fff;
}
#list {
Position:absolute;
left:0;
top:36px;
width:160px;
height:0;
Overflow:hidden;
}
#list ul {
margin:0;
padding:10px;
List-style:none;
Background: #fff;
}
#list Li {
font:14px/28px "Song Body";
text-indent:10px;
border-bottom:1px solid #ccc;
}
#list. Active {
Background: #666;
Color: #fff;
}
</style>
<body>
<div id= "Dorpdown" >
<div id= "List" >
<ul>
<li><p> 1th Option </p></li>
<li><p> 1th Option </p></li>
<li><p> 1th Option </p></li>
<li><p> 1th Option </p></li>
<li><p> 1th Option </p></li>
<li><p> 1th Option </p></li>
</ul>
</div>
</div>
<script type= "Text/javascript" src= "Js/startmove.js" ></script>
<script type= "Text/javascript" >
(function () {
var dorpdown = document.queryselector (' #dorpDown ');
var list = Document.queryselector (' #list ');
Dorpdown.onmouseover = function () {
var target = list.children[0].offsetheight;
Show (List.children[0].offsetheight, ' bounceout ');
};
Dorpdown.onmouseout = function () {
Show (0, "Easeboth");
};
List.onmouseover = function (e) {
Console.log (E.target.tagname);
if (E.target.tagname = = "LI" | | E.target.parentnode.tagname = = "LI") {
E.target.classname = "active";
}
};
List.onmouseout = function (e) {
if (E.target.tagname = = "LI" | | E.target.parentnode.tagname = = "LI") {
E.target.classname = "";
}
};
Function Show (Target,type) {
Startmove ({
El:list,
Target: {
Height:target
},
TIME:500,
Type:type
});
}
})();
</script>
</body>
Animation form Formula
var Tween = {
Linear:function (T, B, C, D) {
return c*t/d + b;
},
Easein:function (T, B, C, D) {
Return c* (T/=d) *t + b;
},
Easeout:function (T, B, C, D) {
Return-c * (t/=d) * (t-2) + B;
},
Easeboth:function (T, B, C, D) {
if ((T/=D/2) < 1) {
return c/2*t*t + b;
}
RETURN-C/2 * ((--T) * (t-2)-1) + B;
},
Easeinstrong:function (T, B, C, D) {
Return c* (T/=d) *t*t*t + b;
},
Easeoutstrong:function (T, B, C, D) {
Return-c * ((t=t/d-1) *t*t*t-1) + B;
},
Easebothstrong:function (T, B, C, D) {
if ((T/=D/2) < 1) {
return c/2*t*t*t*t + b;
}
RETURN-C/2 * ((t-=2) *t*t*t-2) + B;
},
Elasticin:function (T, B, C, D, A, p) {
if (t = = 0) {
return b;
}
if ((t/= d) = = 1) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a | | A < Math.Abs (c)) {
A = C;
var s = P/4;
} else {
var s = p/(2*math.pi) * Math.asin (C/A);
}
Return-(A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + B;
},
Elasticout:function (T, B, C, D, A, p) {
if (t = = 0) {
return b;
}
if ((t/= d) = = 1) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a | | A < Math.Abs (c)) {
A = C;
var s = P/4;
} else {
var s = p/(2*math.pi) * Math.asin (C/A);
}
Return A*math.pow (2,-10*t) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + C + B;
},
Elasticboth:function (T, B, C, D, A, p) {
if (t = = 0) {
return b;
}
if ((t/= d/2) = = 2) {
return b+c;
}
if (!p) {
p = d* (0.3*1.5);
}
if (!a | | A < Math.Abs (c)) {
A = C;
var s = P/4;
}
else {
var s = p/(2*math.pi) * Math.asin (C/A);
}
if (T < 1) {
return-0.5* (A*math.pow (2,10* (t-=1)) *
Math.sin ((t*d-s) * (2*MATH.PI)/p) + B;
}
Return A*math.pow (2,-10* (t-=1)) *
Math.sin ((t*d-s) * (2*MATH.PI)/p) *0.5 + C + B;
},
Backin:function (T, B, C, D, s) {
if (typeof s = = ' undefined ') {
s = 1.70158;
}
Return c* (T/=d) *t* ((s+1) *t-s) + B;
},
Backout:function (T, B, C, D, s) {
if (typeof s = = ' undefined ') {
s = 2.70158; The distance to retract
}
Return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B;
},
Backboth:function (T, B, C, D, s) {
if (typeof s = = ' undefined ') {
s = 1.70158;
}
if ((t/= D/2) < 1) {
Return c/2* (t*t* (((s*= (1.525) +1) *t-s) + B;
}
Return c/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B;
},
Bouncein:function (T, B, C, D) {
Return c-tween[' Bounceout ' (d-t, 0, C, D) + B;
},
Bounceout:function (T, B, C, D) {
if ((T/=d) < (1/2.75)) {
Return c* (7.5625*t*t) + B;
} else if (T < (2/2.75)) {
Return c* (7.5625* (t-= (1.5/2.75)) *t + 0.75) + B;
} else if (T < (2.5/2.75)) {
Return c* (7.5625* (t-= (2.25/2.75)) *t + 0.9375) + b;
}
Return c* (7.5625* (t-= (2.625/2.75)) *t + 0.984375) + b;
},
Bounceboth:function (T, B, C, D) {
if (T < D/2) {
Return tween[' Bouncein ' (t*2, 0, C, d) * 0.5 + B;
}
Return tween[' Bounceout ' (t*2-d, 0, C, d) * 0.5 + c*0.5 + b;
}
}
Gets or sets the style
function css (el,attr,val) {
if (arguments.length = = 2) {
if (El.currentstyle) {
val = el.currentstyle[attr];
} else {
val = getComputedStyle (EL) [attr];
}
Return Parsefloat (Val);
} else {
if (attr = = "opacity") {
El.style.opacity = val;
El.style.filter = "Alpha (opacity=" +val*100+ ")";
} else if (attr = = "ZIndex") {
EL.STYLE[ATTR] = Math.Round (val);
}else {
El.style[attr] = val + "px";
}
}
}
Performing animations
function Startmove (init) {
Clearinterval (Init.el.timer);
var t = 0;
var b = {};
var c = {};
var d = init.time/20;
For (var s in Init.target) {
B[s] = CSS (init.el,s);
C[s] = Init.target[s]-b[s];
}
Init.el.timer = setinterval (function () {
t++;
if (T > D) {
Clearinterval (Init.el.timer);
Init.callback&&init.callback ();
} else {
For (var s in Init.target) {
var val = Tween[init.type] (t,b[s],c[s],d);
CSS (init.el,s,val);
}
}
},20);
}
Every day a JS small demo through the event delegation to implement the menu and select effects. Main points of knowledge: events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
