首先非常感谢网友Adam‘的无私分享,此js特效是他用自己写的一个JS框架Aui-core实现的,Aui-core暂时是测试版本,Aui-core框架性能上比Jquery的高,体积也比Jquery小,压缩后只有20K左右,至于Aui-core的详细介绍迟点大家会知晓的啦,大家先看一下功能效果。
实现此特效的特效很简单:引入Aui-core核心文件之后,实现的代码如下:
Aui.ready(function(){
var odoc = Aui( document ),
oDiv = Aui( Aui.byID( "#demo" ) ),
aImg = Aui( Aui.byTagName( "img" ) );
odoc.bind( "mousemove", function( e ){
Aui.each( aImg, function(){
var _this = Aui( this ),
x = _this.left( true ) + _this.width()*0.5,
y = _this.top( true ) + _this.height()*0.5,
a = x - e.clientX,
b = y - e.clientY,
dis = 1 - ( Math.sqrt( Math.pow( a , 2) + Math.pow( b , 2) ) )/400;
if( dis < 0.5 ){
dis = 0.5;
};
_this.setStyle("width", dis*128 );
});
});
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
导航菜单 原创 二级菜单 滚动特效 Aui-core js特效 网友Adam’