zoukankan      html  css  js  c++  java
  • js 动画1

    div速度 运动:

    代码例如以下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>速度 运动</title>
    <style>
    body{paddiing:0;margin:0}
    #div1{200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}
    #div1 span{20px;height:50px; background-color:blue;position:absolute; left:200px; top:75px}
    </style>
    <script>
    
    window.onload = function(){
    	var oDiv = document.getElementById('div1');
    	oDiv.onmouseout = function(){
    		startMove(-200);
    	}
    	oDiv.onmouseover = function(){
    		startMove(0);
    	}
    }
    var timer = null;
    function startMove(seat){
    	clearInterval(timer);
    	var oDiv = document.getElementById('div1');
    	timer = setInterval(function(){
    		if(oDiv.offsetLeft > seat){
    			speed = -10;
    		}
    		else{
    			speed = 10;
    		}
    		if(oDiv.offsetLeft == seat){
    			clearInterval(timer)
    		}
    		else{
    			oDiv.style.left = oDiv.offsetLeft + speed +'px';
    		}
    	},30)
    		
    }
    </script>
    </head>
    
    <body>
    <div id="div1"><span id="share">分享</span></div>
    </body>
    </html>
    

    透明度运动:

    代码例如以下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>透明度运动</title>
    <style>
    body{
    	padding:0;
    	margin:0
    }
    #div1{
    	200px;
    	height:200px;
    	background:red;
    	filter:alpha(opacity:30);
    	opacity:0.3;
    }
    </style>
    <script>
    
    
    window.onload = function(){
    	var oDiv = document.getElementById('div1');
    	oDiv.onmouseover = function(){
    		startMove(100);
    	}
    	oDiv.onmouseout = function(){
    		startMove(30);
    	}
    }
    var timer = null;
    var alpha = 30;
    function startMove(seat){
    	clearInterval(timer);
    	var oDiv = document.getElementById('div1');
    	timer = setInterval(function(){
    		if(alpha > seat){
    			speed = -10;
    		}
    		else{
    			speed = 10;
    		}
    		if(alpha == seat){
    			clearInterval(timer);
    		}
    		else{
    			alpha += speed;
    			oDiv.style.filter = 'alpha(opacity:'+alpha+')';
    			oDiv.style.opacity = alpha/100;
    		}
    	},30)
    }
    
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>
    </html>
    


  • 相关阅读:
    JSTL标签
    EL(表达式语言)
    JDBC技术
    Java中的一些术语的解释
    Servlet过滤器和监听器
    MVC-初识
    EF-初识
    .NET细节知识总结,不断更新
    多线程-Task、await/async
    多线程-Thread和ThreadPool
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/7063269.html
Copyright © 2011-2022 走看看