zhongke.js
5.52 KB
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
$(function() {
//核心技术-右侧悬浮框--滚动设定高度后显示
$(window).scroll(function(){
height = $(window).scrollTop();
if(height > 640){
$('.det_float_div').fadeIn();
}else{
$('.det_float_div').fadeOut();
};
});
//悬浮框选中效果切换
//$(function(){
$(".det_float_div a").click(function() {
$(this).siblings('a').removeClass('selected'); //删除其他兄弟元素的样式
$(this).addClass('selected'); //添加当前元素的样式
});
//产品服务-布局全球图片鼠标跟随
var positionX = 0;
var positionY = 0;
$('.main').mousemove(function(e) {
var x = e.clientX, y = e.clientY;
if(positionX === 0 && positionY === 0){
positionX = x;
positionY = y;
}
if(x > positionX && y < positionY){
$('.pic1').stop().animate({'left':600,'top':145},'800',"easeOutCubic");
$('.pic2').stop().animate({'left':785,'top':235},'800',"easeOutCubic");
$('.pic3').stop().animate({'right':140,'top':375},'800',"easeOutCubic");
$('.pic4').stop().animate({'right':175,'top':520},'800',"easeOutCubic");
$('.pic5').stop().animate({'right':245,'top':685},'800',"easeOutCubic");
$('.pic6').stop().animate({'right':305,'top':725},'800',"easeOutCubic");
$('.pic7').stop().animate({'right':535,'bottom':210},'800',"easeOutCubic");
$('.pic8').stop().animate({'left':230,'bottom':210},'800',"easeOutCubic");
$('.pic9').stop().animate({'left':145,'top':455},'800',"easeOutCubic");
$('.pic10').stop().animate({'left':210,'top':285},'800',"easeOutCubic");
$('.pic11').stop().animate({'left':155,'top':245},'800',"easeOutCubic");
$('.pic12').stop().animate({'left':385,'top':200},'800',"easeOutCubic");
$('.pic13').stop().animate({'left':135,'top':185},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x > positionX && y > positionY){
$('.pic1').stop().animate({'left':590,'top':115},'800',"easeOutCubic");
$('.pic2').stop().animate({'left':765,'top':250},'800',"easeOutCubic");
$('.pic3').stop().animate({'right':120,'top':355},'800',"easeOutCubic");
$('.pic4').stop().animate({'right':185,'top':500},'800',"easeOutCubic");
$('.pic5').stop().animate({'right':225,'top':665},'800',"easeOutCubic");
$('.pic6').stop().animate({'right':325,'top':705},'800',"easeOutCubic");
$('.pic7').stop().animate({'right':555,'bottom':250},'800',"easeOutCubic");
$('.pic8').stop().animate({'left':250,'bottom':250},'800',"easeOutCubic");
$('.pic9').stop().animate({'left':185,'top':475},'800',"easeOutCubic");
$('.pic10').stop().animate({'left':230,'top':305},'800',"easeOutCubic");
$('.pic11').stop().animate({'left':195,'top':265},'800',"easeOutCubic");
$('.pic12').stop().animate({'left':415,'top':230},'800',"easeOutCubic");
$('.pic13').stop().animate({'left':100,'top':165},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x < positionX && y < positionY){
$('.pic1').stop().animate({'left':600,'top':145},'800',"easeOutCubic");
$('.pic2').stop().animate({'left':785,'top':235},'800',"easeOutCubic");
$('.pic3').stop().animate({'right':140,'top':375},'800',"easeOutCubic");
$('.pic4').stop().animate({'right':175,'top':520},'800',"easeOutCubic");
$('.pic5').stop().animate({'right':245,'top':685},'800',"easeOutCubic");
$('.pic6').stop().animate({'right':305,'top':725},'800',"easeOutCubic");
$('.pic7').stop().animate({'right':535,'bottom':210},'800',"easeOutCubic");
$('.pic8').stop().animate({'left':230,'bottom':210},'800',"easeOutCubic");
$('.pic9').stop().animate({'left':145,'top':455},'800',"easeOutCubic");
$('.pic10').stop().animate({'left':210,'top':285},'800',"easeOutCubic");
$('.pic11').stop().animate({'left':155,'top':245},'800',"easeOutCubic");
$('.pic12').stop().animate({'left':385,'top':200},'800',"easeOutCubic");
$('.pic13').stop().animate({'left':135,'top':185},'800',"easeOutCubic");
positionX = x;
positionY = y;
}else if(x < positionX && y > positionY){
$('.pic1').stop().animate({'left':590,'top':115},'800',"easeOutCubic");
$('.pic2').stop().animate({'left':765,'top':250},'800',"easeOutCubic");
$('.pic3').stop().animate({'right':120,'top':355},'800',"easeOutCubic");
$('.pic4').stop().animate({'right':185,'top':500},'800',"easeOutCubic");
$('.pic5').stop().animate({'right':225,'top':665},'800',"easeOutCubic");
$('.pic6').stop().animate({'right':325,'top':705},'800',"easeOutCubic");
$('.pic7').stop().animate({'right':555,'bottom':250},'800',"easeOutCubic");
$('.pic8').stop().animate({'left':250,'bottom':250},'800',"easeOutCubic");
$('.pic9').stop().animate({'left':185,'top':475},'800',"easeOutCubic");
$('.pic10').stop().animate({'left':230,'top':305},'800',"easeOutCubic");
$('.pic11').stop().animate({'left':195,'top':265},'800',"easeOutCubic");
$('.pic12').stop().animate({'left':415,'top':230},'800',"easeOutCubic");
$('.pic13').stop().animate({'left':100,'top':165},'800',"easeOutCubic");
positionX = x;
positionY = y;
}
})
$.extend($.easing,{
easeOutBack:function(x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
});
//******
});