Это пункты:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<div class="mac-dock">
<img src="../res/MacStyleIcons/PNG/Applications/khelpcenter.png" alt="" title = "Справка" />
<img src="../res/MacStyleIcons/PNG/Applications/xcalc.png" alt="" title = "Калькулятор"/>
...
<img src="../res/MacStyleIcons/PNG/Applications/dlgedit.png" alt="" title = "IDIS SCADA: журнал оператора"/>
</div>
Это стиль:
1.
2.
3.
4.
5.
6.
7.
8.
9.
.mac-dock {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
text-align: center;
}
Это, наверняка уже многим известный обработчик:
1.
2.
3.
4.
5.
6.
7.
<script type="text/javascript">
$(document).ready(function(){
$('.mac-dock img').resizeOnApproach();
});
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
(function($){
$.fn.resizeOnApproach = function(settings){
var config = {
'elementDefault': 48,
'elementClosest': 92,
'triggerDistance': 200,
'setWidthAndHeight':false
};
if (settings)
$.extend(config, settings);
var setWidthAndHeight=config.setWidthAndHeight;
var expandIcon = this;
var imgSize = config.elementDefault;
var imgMax = config.elementClosest;
var trigger = config.triggerDistance
var max = imgMax - imgSize;
var factor = max / trigger;
var resized = false;
$(document).ready(function(){
expandIcon.each(function(){
this.style.width = imgSize + 'px';
if (setWidthAndHeight) {
this.style.height = imgSize + 'px';
}
});
});
$(document).mousemove(function(e){
var mouseX = e.pageX;
var mouseY = e.pageY;
expandIcon.each(function(){
//how far away the top left corner of the element is from the corner of the window
var pos = $(this).offset();
//calculate the distance from the mouse poiter to the centre of the square. Sum takes into account that the image position is taken from corner
var dist = distToSqEdge(this.width, pos.left +
(this.width / 2), pos.top +
(this.height / 2), mouseX, mouseY);
//set the distance to zero if inside the square
if (dist < trigger) {
if (dist < 0) {
dist = 0;
}
resized = true;
var size = imgSize +
(max - (dist * factor));
this.style.width = size + 'px';
if (setWidthAndHeight) {
this.style.height = size + 'px';
}
}
else {
this.style.width = imgSize + 'px';
if (setWidthAndHeight) {
this.style.height = imgSize + 'px';
}
}
});
});
}
})(jQuery)
//returns the distance from the edge of the square of the given width and centre C to the
//point P. If the distance is negative, the mouse in within the square
function distToSqEdge(sqWidth, cx, cy, px, py){
//length of line from point to centre
var pl = Math.sqrt((cx - px) * (cx - px) +
(cy - py) *
(cy - py));
//the x and y length of the line
vx = px - cx;
vy = py - cy;
//determine the unit vector to the side the line intersects the square
var Xx = 0;
var Xy = 0;
if (vx > vy) {
if (vx > -vy) {
Xx = 1;
}
else {
Xy = 1;
}
}
else {
if (vx > -vy) {
Xy = -1;
}
else {
Xx = -1;
}
}
// determine the unit vector of line to mouse point
vlength = Math.sqrt((vx * vx) + (vy * vy));
vux = vx / vlength;
vuy = vy / vlength;
cosA = vux * Xx + vuy * Xy;
//distance from centre to the edge of the square
centreToSqEdge = Math.abs((0.5 * sqWidth) / cosA);
mouseToSquareEdge = vlength - centreToSqEdge;
return mouseToSquareEdge;
}
А вот это, обычный подход к всплывающей подсказке:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
$(document).ready(function() {
$('img').hover(function(){
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY - 20;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Кто бы знал, куда и как его всунуть???
