prototype 实现图片拖影图片拖动显示轨迹效果

TAG：拖影　时间：2018-04-14　浏览：
在网页上实现一个拖影效果，打开效果后，选择打开拖影开关，拖动图片，会出现拖影效果，视觉看上去还是挺动感的，本效果基于另一款功能同样强大的js插件——prototype 插件实现的效果，在众多的ajax交互效果中，你都可以看到prototype的身影。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Js插件：prototype 拖动显示轨迹拖影效果</TITLE>
<script src="/ajaxjs/prototype-1.6.0.3.js"></script>
<style type="text/css">
#Pop{
	width:150px; height:211px;
	background:url(/jscode/demoimg/wall_s15.jpg) no-repeat;
	z-index:666;
}
</style>
</HEAD>
<BODY>
<input type="checkbox" id="zx" />显示轨迹，打开此开关，拖动图片时，轨迹效果更明显
<div id="Pop"></div>
</BODY>
</HTML>
<script>
window.onload=function(){
var Flower = Class.create({
	initialize: function(obj){
		this.obj = $(obj);
		this.obj.setStyle({position:'absolute'});
		this.len=this._x=this._y=0;
		this._pos=[];
		this.obj.observe('mousedown',this.start.bindAsEventListener(this));
		document.observe('mousemove',this.move.bindAsEventListener(this));
		this.obj.observe('mouseup',this.out.bindAsEventListener(this));
		document.observe('selectstart',function(){return false});
	},
	start: function(event){
		this.obj.setStyle({opacity:0.5});
		var self=this;
		this.ctrl=true;
		if(!$('zx').checked)this._pos.length=0;
		this._qx=this.obj.style.left;
		this._qy=this.obj.style.top;
		if(document.all){
			this.na={x:event.offsetX,y:event.offsetY};
		}else{
			this.na={x:event.layerX,y:event.layerY};
			this.obj.innerHTML="<font size='1px'>&nbsp; </font>";
		}
		this._x=Event.pointerX(event);
		this._y=Event.pointerY(event);
		this.n=setInterval(function(){
			self._pos.push({left:self._x-self.na.x,top:self._y-self.na.y});
		},10)
	},
	move:function(event){
		var self=this;
		if(!this.ctrl) return;
		this._x=Event.pointerX(event);this._y=Event.pointerY(event);
		this.obj.setStyle({left:this._x-this.na.x,top:this._y-this.na.y});
	},
	out:function(){
		this.obj.setStyle({opacity:1.0});
		var self=this;
		this.ctrl=false;
		clearInterval(this.n);
		setTimeout(function(){self.play()},50);
	},
	play:function(){
		var self=this;
		if(this.len<4){
		   this.len++;
		   new DivMove({x:self._qx,y:self._qy,pos:self._pos});
		   this._t= setTimeout(function(){self.play()},50);
		}else{
		   clearTimeout(this._t);this.len = 0;
		}
	}
}); 
var DivMove = Class.create({
	initialize:function(tempDivDate){
		this.pos=tempDivDate.pos;
		this.newDiv=$(document.createElement("DIV"));
		this.newDiv.style.cssText = "position:absolute;width:150px;height:211px;background:url(/jscode/demoimg/wall_s15.jpg);zindex:999";
		this.newDiv.setStyle({left:tempDivDate.x,top:tempDivDate.y});
		document.body.appendChild(this.newDiv);
		this.set();
	},
	set:function(){
		this._len = 0;var self=this;
		this.buz = setInterval(function(){self.move()},1);
	},
	move:function(){
		 if(this._len>=this.pos.length){
		   this.pos = [];this.newDiv.remove();clearInterval(this.buz);
		 }else{
			this.newDiv.setStyle({left:this.pos[this._len].left,top:this.pos[this._len].top});
		 }
		 this._len++;
	}
}); 
var k=new Flower("Pop");
}
document.execCommand("BackgroundImageCache", false, true); 
</script>

prototype 实现图片拖影图片拖动显示轨迹效果

相关特效代码

网页特效下载区

prototype 实现图片拖影 图片拖动显示轨迹效果

相关特效代码

网页特效下载区

prototype 实现图片拖影图片拖动显示轨迹效果