fisheyelite.js

这是一个ajax的例子大家好好的看看就是一个鱼眼的效果

if(!dojo._hasResource["dojox.widget.FisheyeLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.widget.FisheyeLite"] = true;
dojo.provide("dojox.widget.FisheyeLite");
dojo.experimental("dojox.widget.FisheyeLite");

dojo.require("dijit._Widget");
dojo.require("dojox.fx.easing");

dojo.declare("dojox.widget.FisheyeLite",
	dijit._Widget,
	{
	// summary:  A Light-weight Fisheye Component, or an exhanced version
	//		of dojo.fx.Toggler ... 
	//
	// description:
	//		A Simple FisheyeList-like widget which (in the interest of
	//		performance) relies on well-styled content for positioning,
	// 		and natural page layout for rendering.
	//
	//		use position:absolute/relative nodes to prevent layout
	//		changes, and use caution when seleting properties to
	//		scale. Negative scaling works, but some properties
	//		react poorly to being set to negative values, IE being
	//		particularly annoying in that regard.
	//
	//		quirk: uses the domNode as the target of the animation
	//		unless it finds a node class="fisheyeTarget" in the container
	//		being turned into a FisheyeLite instance
	//
	// example:
	//	|	// make all the LI's in a node Fisheye's:
	//	|   dojo.query("#node li").forEach(function(n){
	// 	|		new dojox.widget.FisheyeLite({},n);
	//	|	});
	//
	// duationIn: Integer
	//		The time (in ms) the run the show animation
	durationIn: 350,
	
	// easeIn: Function
	//		An easing function to use for the show animation
	easeIn: dojox.fx.easing.backOut,
	
	// durationOut: Integer
	//		The Time (in ms) to run the hide animation
	durationOut: 1420,
	
	// easeOut: Function	
	// 		An easing function to use for the hide animation
	easeOut: dojox.fx.easing.elasticOut,

	//	properties: Object
	//			An object of "property":scale pairs
	//			defaults to font-size with a scale of 2.75
	properties: { 
		fontSize: 2.75
	},
	
	// unit: String
	//		Sometimes, you need to specify a unit. Should be part of
	//		properties attrib, but was trying to shorthand the logic there
	unit:"px",
	
	postCreate: function(){
		
		this.inherited(arguments);
		this._target = dojo.query(".fisheyeTarget",this.domNode)[0] || this.domNode;
		this._makeAnims();
		
		this.connect(this.domNode,"onmouseover","show");
		this.connect(this.domNode,"onmouseout","hide");
		this.connect(this._target,"onclick","onClick");

	},
	
	show: function(){
		// summary:
		//		Show this Fisheye item. 
		this._runningOut.stop();
		this._runningIn.play();
	},
	
	hide: function(){
		// summary:
		//		Hide this fisheye item on mouse leave
		this._runningIn.stop();
		this._runningOut.play();
	},
	
	_makeAnims: function(){
		// summary:
		//		Pre-generate the animations

		// create two properties: objects, one for each "state"
		var _in = {};
		var _out = {};
		var cs = dojo.getComputedStyle(this._target);		
		for(var p in this.properties){
			var v = parseInt(cs[p]);
			// note: do not set negative scale for [a list of properties] for IE support
			// note: filter:'s are your own issue, too ;)
			_out[p] = { end: v, unit:this.unit };
			_in[p] = {	end: (this.properties[p]*v), unit:this.unit };
		}
									
		this._runningIn = dojo.animateProperty({
			node: this._target,
			easing: this.easeIn,
			duration: this.durationIn,
			properties: _in
		});
		
		this._runningOut = dojo.animateProperty({
			node: this._target,
			duration: this.durationOut,
			easing: this.easeOut,
			properties: _out
		});
		
		this.connect(this._runningIn,"onEnd",dojo.hitch(this,"onSelected",this));
	},
	
	onClick: function(/* Event */e){
		// summary: stub function fired when target is clicked
		//		connect or override to use.
	},
	
	onSelected: function(/* Object */e){
		// summary: stub function fired when Fisheye Item is fully visible and
		// 		hovered. connect or override use.
	}
		
});

}