js 动画1
2024-09-07 23:05:06
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{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}
#div1 span{width: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{
width: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>
最新文章
- php cli配置文件问题
- table的border重合问题
- centos 安装apache 和 php5.6
- Apache Error: Invalid command ‘Allow’, perhaps misspelled or defined by a module not included in the server configuration
- 用javascript实现简体和繁体字间的转换
- Python写的东西在CMD下打印中文
- SVN版本回滚~
- 使用Node.js快速搭建WebSocket server
- js获取地址栏传参
- 学习 Spring (三) Bean 的配置项 &; 作用域
- fiddler使用指南
- Java IO编程全解(二)——传统的BIO编程
- LNMP环境搭建详细教程
- JFinal Web开发学习(九)后台添加前台显示博客
- SqlServer 查询死锁,杀死死锁进程*转载
- 记数排序 &; 桶排序 &; 基数排序
- {Notes}{Latex}{multirow}
- VS2010中的sln,suo分别是什么含义
- java===java基础学习(11)---继承
- 一.数据库连接对象connection
热门文章
- ACdream 1157 Segments
- 中科燕园arcgis外包案例之12---供水供热管线GIS系统
- Boost Log 基本使用方法
- HTTP Status 404 - /servlet/Item/AddItemServlet
- 继承QWidget的派生类控件不能设置QSS问题解决(使用style()->;drawPrimitive(QStyle::PE_Widget,也就是画一个最简单最原始的QWidget,不要牵扯其它这么多东西)
- ThinkPHP5.0框架开发--第6章 TP5.0 请求和响应
- Android UnitTest FrameWork
- CSS3———linear-gradient() 线性渐变
- 12种CSS BUG解决方法与技巧
- linux 杀掉端口