欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

JavaScript实现滚动栏效果的方法_PHP教程

程序员文章站 2022-03-27 10:20:58
...

JavaScript实现滚动栏效果的方法

  JavaScript实现滚动栏效果的方法

这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

  本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下:

  ?

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

* {

margin: 0;

padding: 0;

}

#div1 ul{

position: absolute;

left: 0px;

top: 0px;

}

#div1 ul li img {

width: 187px;

height: 125px;

}

#div1 ul li{

float: left;

width: 187px;

height: 125px;

list-style: none;

}

#div1{

width: 748px;

height: 125px;

position: relative;

background-color: chartreuse;

overflow: hidden;

float: left;

}

#body{

width: 948px;

height: 125px;

margin: 100px auto;

}

#body #leftDiv{

float: left;

width: 100px;

height: 100px;

}

#body #rightDiv{

float: left;

width: 100px;

height: 100px;

}

#body #leftDiv button{

background-image: url("image/left.PNG");

width: 100px;

height: 100px;

}

#body #leftDiv button img{

width: 100px;

height: 100px;

}

#body #rightDiv button img{

width: 100px;

height: 100px;

}

window.onload=function(){

var oDiv=document.getElementById('div1');

var oUl=oDiv.getElementsByTagName('ul')[0];

var oLi=oUl.getElementsByTagName('li');

var oLeft=document.getElementById('leftDiv');

var oright=document.getElementById('rightDiv');

oUl.innerHTML+=oUl.innerHTML;

oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';

var speed=-2;

function move(){

if (oUl.offsetLeft

oUl.style.left='0';

}else if(oUl.offsetLeft>0){

oUl.style.left=-oUl.offsetWidth/2+'px';

}

oUl.style.left=oUl.offsetLeft+speed+'px';

};

var timer=setInterval(move,30);

oLeft.onclick=function(){

speed=-2;

};

oright.onclick= function () {

speed=2;

};

oUl.onmouseover=function(){

clearInterval(timer);

};

oUl.onmouseout=function(){

timer=setInterval(move,30);

};

}

  • JavaScript实现滚动栏效果的方法_PHP教程
  • JavaScript实现滚动栏效果的方法_PHP教程
  • JavaScript实现滚动栏效果的方法_PHP教程
  • JavaScript实现滚动栏效果的方法_PHP教程

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

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/990995.htmlTechArticleJavaScript实现滚动栏效果的方法 JavaScript实现滚动栏效果的方法 这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素...
相关标签: JavaScript