源码在何方？
老师的源码放哪了？怎么找不到?
4 回答
链式运动代码
1.Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#li1{
width: 200px;
height: 50px;
background: red;
border: 2px solid deepskyblue;
list-style: none;
filter: alpha(opacity:30);/*IE*/
opacity: 0.3;
}
</style>
<script src="链式动画.js"></script>
<script>
window.onload = function(){
var Li = document.getElementById("li1");
Li.onmouseover = function(){
startMove(Li,'width',400,function(){
startMove(Li,'height',100,function(){
startMove(Li,"opacity",100);
});
});
}
Li.onmouseout = function(){
startMove(Li,'height',50,function(){
startMove(Li,'width',200);
});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
2.JS代码
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,style1,value,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//1.取当前值
var icur = 0;
if(style1 == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,style1))*100);
}else{
icur =Math.round(parseInt(getStyle(obj,style1)));
}
//2.算速度
var speed =(value-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur == value){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(style1 =="opacity"){
obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[style1] = icur+speed+"px";
obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px";
}
}
},30)
}
同时运动动画代码
1.Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>同时运动动画</title>
<style>
*{
margin: 0;
padding: 0;
}
#li1{
width: 200px;
height: 50px;
background: red;
border: 2px solid deepskyblue;
list-style: none;
filter: alpha(opacity:30);/*IE*/
opacity: 0.3;
}
</style>
<script src="同时运动动画.js"></script>
<script>
window.onload = function(){
var Li = document.getElementById("li1");
Li.onmouseover = function(){
startMove(Li,{width:400,height:100,opacity:100});
}
Li.onmouseout = function(){
startMove(Li,{width:200,height:50,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
2.JS代码
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
// startMove(obj,{style1:value1,style2:value2},fn)
function startMove(obj,json,fn){
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var style1 in json)
{
//1.取当前值
var icur = 0;
if(style1 == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,style1))*100);
}else{
icur =Math.round(parseInt(getStyle(obj,style1)));
}
//2.算速度
var speed =(json[style1]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur != json[style1]){
flag = false;
}
if(style1 =="opacity"){
obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[style1] = icur+speed+"px";
obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
多物体运动代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul>li:nth-of-type(1){
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 20px solid red;
font-size:10px;
}
ul>li:nth-of-type(2){
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 20px solid red;
font-size:10px;
filter: alpha(opacity:30);/*IE*/
opacity: 0.3; /*火狐*/
}
ul>li:nth-of-type(3){
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 20px solid red;
font-size:10px;
}
</style>
<script>
window.onload=function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div1.onmousemove = function(){
startMove(this,'width',400);
}
div1.onmouseout = function(){
startMove(this,'width',200);
}
div2.onmousemove = function(){
startMove(this,'opacity',100);
}
div2.onmouseout = function(){
startMove(this,'opacity',30);
}
div3.onmousemove = function(){
startMove(this,'height',200);
}
div3.onmouseout = function(){
startMove(this,'height',100);
}
}
var alpha = 30;
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,style1,value){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur = 0;
if(style1 == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,style1))*100);
}else{
icur =Math.round(parseInt(getStyle(obj,style1)));
}
var speed =(value-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur == value){
clearInterval(obj.timer);
}else{
if(style1 =="opacity"){
obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[style1] = icur+speed+"px";
obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+"px";
}
}
},30)
}
</script>
</head>
<body>
<ul>
<li id="div1">1</li>
<li id="div2">2</li>
<li id="div3">3</li>
</ul>
</body>
</html>
照抄的，请勿喷我。。。
举报
0/150
提交
取消
