22-1 拖拽与烟花案例
1.拖拽
面向对象:
drag.js
function Drag(id){
//实例属性
this.ele = document.getElementById(id);
//调用初始化方法
this.init();
}
Drag.prototype.init = function(){
this.ele.onmousedown = function(evt){
this.fnDown(evt);
}.bind(this);
}
Drag.prototype.fnDown = function(evt){
var e = evt || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
document.onmousemove = function(evt){
this.fnMove(evt);
}.bind(this);
document.onmouseup = this.fnUp;
document.ondragstart = function(){
return false;
}
}
Drag.prototype.fnMove = function(evt){
var e = evt || window.event;
this.ele.style.left = e.pageX - this.disX + 'px';
this.ele.style.top = e.pageY - this.disY + 'px';
}
Drag.prototype.fnUp = function(){
document.onmousemove = null;
}
subdrag.js
function Subdrag(id){
Drag.apply(this,[id]);
}
for(var i in Drag.prototype){
Subdrag.prototype[i] = Drag.prototype[i];
}
Subdrag.prototype.fnMove = function(evt){
var e = evt || window.event;
var left = e.pageX - this.disX;
var top = e.pageY - this.disY;
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top = 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#pox{
width: 100px;
height: 100px;
background: blueviolet;
position: absolute;
left:200px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="pox">
</div>
<script type="text/javascript" src="js/drag.js" ></script>
<script type="text/javascript" src="js/subdrag.js" ></script>
<script type="text/javascript">
new Drag('box');
new Subdrag('pox');
</script>
</body>
</html>
2.烟花
运动框架sport.js
//获取非行内样式
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//完美运动框架
function startMove(obj,json,fn){
//先清计时器
clearInterval(obj.timer);
//开启新的计时器
obj.timer = setInterval(function(){
//1.设置开关
var stop = true;
//2.遍历json
for(var attr in json){
//1.获取初值
var cur = attr == 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
//2.计算速度
var speed = (json[attr] - cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测属性值是否全部达到目标值
if(cur != json[attr]){
stop = false;
}
//4.设置运动
if(attr == 'opacity'){
obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
obj.style.opacity = (cur + speed) / 100;
}else{
obj.style[attr] = cur + speed + 'px';
}
}
//3.停止计时器
if(stop){
clearInterval(obj.timer);
fn && fn();
}
},30);
}
烟花效果(面向对象).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放烟花效果</title>
<style type="text/css">
html,body{overflow:hidden;}
body{background:#000;}
.fire {
width: 3px;
height: 3px;
background: white;
position: absolute;
}
.spark {
position: absolute;
width: 6px;
height: 6px;
}
</style>
<script src="js/sport.js"></script>
</head>
<body>
<script type="text/javascript">
document.onclick = function(evt){
var e = evt || window.event;
//获取鼠标当前坐标值，调用发射函数
shoot({x : e.pageX,y : e.pageY});
}
//发射火花
function shoot(target){
//创建火花
var ele = document.createElement('div');
ele.className = 'fire';
ele.style.left = target.x + 'px';
ele.style.top = document.documentElement.clientHeight - 50 + 'px';
document.body.appendChild(ele);
startMove(ele,{top : target.y},function(){
ele.remove();
boom(target);
})
}
//爆炸
function boom(target){
var num = Math.floor(Math.random() * 61 + 50);
for(var i = 0;i < num;i ++){
new Spark(target);
}
}
//烟花
function Spark(target){
//实例属性
this.target = target;
this.ele = document.createElement('div');
//初始化烟花
this.init();
}
//原型方法
Spark.prototype.init = function(){
document.body.appendChild(this.ele);
this.ele.className = 'spark';
this.ele.style.background = "#" + Math.floor(Math.random() * 0xffffff).toString(16);
this.ele.style.left = this.target.x + 'px';
this.ele.style.top = this.target.y + 'px';
this.speedX = Math.floor(Math.random() * 6 + 5) * (Math.random() > 0.5 ? 1 : -1);
this.speedY = Math.floor(Math.random() * 6 + 5) * (Math.random() > 0.5 ? 1 : -1);
this.sport();
this.timer = null;
}
Spark.prototype.sport = function(){
this.timer = setInterval(function(){
this.ele.style.left = this.ele.offsetLeft + this.speedX + 'px';
this.ele.style.top = this.ele.offsetTop + this.speedY ++ + 'px';
if(this.ele.offsetTop >= document.documentElement.clientHeight){
clearInterval(this.timer);
this.ele.remove();
}
}.bind(this),30)
}
</script>
</body>
</html>
