今天看啥
热点:

js实现精美的图片跟随鼠标效果实例


   本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下:

  ?

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>精美js鼠标跟随代码</title>

</head>

<body>

<script>

A=document.getElementById

B=document.all;

C=document.layers;

T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)

var offsetx=15

var offsety=10

nos=parseInt(T1.length/3)

rate=50

ie5fix1=0;

ie5fix2=0;

rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20

bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){

createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+"border=0>")

}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){

with (document){

write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+"style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");

if(St){

if (C)

write(" style='");

write(St+";' ")

}

else write((A || B)?"'":"");

write((At)? At+">" : ">");

write((HT) ? HT : "");

if (!Op)

closeContainer(N)

}

}

function closeContainer(){

document.write((A || B)?"</div>":"</layer>")

}

function getXpos(N){

if (A)

return parseInt(document.getElementById(N).style.left)

else if (B)

return parseInt(B[N].style.left)

else

return C[N].left

}

function getYpos(N){

if (A)

return parseInt(document.getElementById(N).style.top)

else if (B)

return parseInt(B[N].style.top)

else

return C[N].top

}

function moveContainer(N,DX,DY){

c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";

if (!B){

rightedge=window.innerWidth-T1[1]-20

bottomedge=window.pageYOffset+window.innerHeight-T1[2]

}

c.left=Math.min(rightedge, DX+offsetx);

c.top=Math.min(bottomedge, DY+offsety);

}

function cycle(){

//if (IE5)

if (document.all&&window.print){

ie5fix1=document.body.scrollLeft;

ie5fix2=document.body.scrollTop;

}

for (i=0;i<(nos-1);i++){

moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))

}

}

function newPos(e){

moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)

}

function getedgesIE(){

rightedge=document.body.clientWidth-T1[1]

bottomedge=document.body.scrollHeight-T1[2]

}

if (B){

window.onload=getedgesIE

window.onresize=getedgesIE

}

if(document.layers)

document.captureEvents(Event.MOUSEMOVE)

document.onmousemove=newPos

setInterval("cycle()",rate)

</script>

</body>

</html>

  希望本文所述对大家的javascript程序设计有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/Javascript/1000126.htmlTechArticlejs实现精美的图片跟随鼠标效果实例 本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下...

相关文章

相关搜索: js 鼠标

帮客评论

视觉看点