Heim  >  Artikel  >  Web-Frontend  >  基于JQuery模仿苹果桌面的Dock效果(初级版)_javascript技巧

基于JQuery模仿苹果桌面的Dock效果(初级版)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:49:041388Durchsuche

新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定。由于时间的关系,这些bug还没有修复,希望高手们不吝赐教,提出更好的意见,希望可以做出更好的版本分享给大家。

这是静态的效果图,好吧,看上去还想模像样

下面是HTML页面的代码:

复制代码 代码如下:

BR>"http://www.w3.org/TR/html4/strict.dtd">



JQueryProject1









Home
Music
Calendar
Email
Portfolio
Video
Link
History
RSS






没有CSS装饰的页面那叫一个惨不忍睹,所以使用适当的CSS进行装饰是必不可少的
复制代码 代码如下:

#topBody{
height: 300px;
}
#topMenu{
height: 256px;
line-height: 256px;
}
#topMenu img{
height: 50px;
width: 50px;
}

才毕业几个月,解方程都忘记了,所以当鼠标移动时图标的放大算法让我很头疼啊,这里给出的算法只是个人想法,仅供参考,希望各位高手提出更好的算法。而且这里只考虑了鼠标在水平位置移动时的算法,还没有加入鼠标垂直移动式的算法。
复制代码 代码如下:

$(function(){
$("#topBody").mousemove(function(e){
var mouseX = parseInt(e.pageX);
$("#topMenu img").each(function(){
var obj = $(this);
var objWidth = obj.css("width");
//获取图片中心水平坐标
var objX = parseInt(obj.offset().left) + parseInt(objWidth.substr(0,objWidth.length-2))/2;
var x = Math.abs(objX-mouseX);
if(x-75){
obj.css("width",(128-((78*x*x)/(75*75)))+"px");
obj.css("height",(128-((78*x*x)/(75*75)))+"px");
}
});
});
});

说说JQuery获取鼠标的方法,当执行mousemove(function(e){})这个方法是,方法的参数e提供了e.pageX获取水平坐标、e.pageY获取垂直坐标,同时也可以使用var x = e.originalEvent.x || e.originalEvent.layerX || 0;获取鼠标的水平位置、同样可以用 var y = e.originalEvent.y || e.originalEvent.layerY || 0;获取鼠标的垂直位置。

 

当鼠标移动速度比较慢时显示效果还可以接受,不过当鼠标快速移动时时图标是放大了,不过相应的bug也出来了。

恳请各位走过路过的高手、大神们,提出宝贵的修改意见及更好的算法,谢谢观赏。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn