html部分:
1 <div id="img1"><a href=""><img src="user_avator.png" alt=""></a></div>
css部分:
1 *{
2 padding: 0;
3 margin: 0;
4 }
5 #img1{
6 position: fixed;
7 z-index: 10;
8 left: 10px;
9 top: 100px;
10 }
jquery部分:
1 $(function(){
2 var oLeft = 10; //初始左偏移量
3 var oTop = 100; //初始上偏移量
4 var time = 30; //漂浮时间,可能太慢,可以自己将时间改小调快点
5 var xon = true; //左右漂浮开关
6 var yon = true; //上下漂浮开关
7 var bodyW = $(window).width(); //浏览器可视宽度
8 var bodyH = $(window).height(); //浏览器可视高度
9 $(window).resize(function(){
10 bodyW = $(window).width(); //浏览器变化时,浏览器可视宽度
11 bodyH = $(window).height(); //浏览器变化时,浏览器可视高度
12 });
13 var imgW = $("#img1").outerWidth(); //漂浮物体的宽度
14 var imgH = $("#img1").outerHeight(); //漂浮物体的高度
15 function move(){
16 if(xon){
17 oLeft += 1;
18 }else{
19 oLeft -= 1;
20 }
21 if(yon){
22 oTop += 1;
23 }else{
24 oTop -= 1;
25 }
26 $("#img1").css("left",oLeft);
27 $("#img1").css("top",oTop);
28 if(oLeft<=0){
29 xon = true;
30 }
31 if(oLeft >= bodyW - imgW){
32 xon = false;
33 }
34 if(oTop<=0){
35 yon = true;
36 }
37 if(oTop >= bodyH - imgH){
38 yon = false;
39 }
40 }
41 var timeMove = setInterval(move,time); //定时器
44 $("#img1").hover(function(){
45 clearInterval(timeMove);
46 },function(){
47 timeMove = setInterval(move,time);
50 })
51 })