Home > Developer > JavaScript

JQuery plug-in scroll for seamless scrolling

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery plug-in scroll for seamless scrolling

Today, we will share with you a jquery. scroll plug-in for seamless Page scrolling. Supports Top, bottom, left, and right, fade in and out, scroll time settings, animation time settings, mouse stop settings, scroll the mouse hydraulic Bar to see the next page switching effect. This plug-in is applicable to browsers such as IE8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world.

Scroll plug-in

Supports upper, lower, left, and right, fade in and out, scroll time settings, animation time settings, and whether or not to stop the mouse setting

Default configuration parameters can be modified

$ (". Content "). easysroll ({// Default Configuration Parameter direction: "left", // left (left) right (right) top (up) bottom (down) default left numberr: "1", // The default number of scrolling times is 1 delays: "1000", // The default time required to complete an animation is 1000 or equal to 1 second scrolling: "1000 ", // The default interval between each animation is 1000 or equal to 1 second fadein: false, // whether to support fade in or fade out; default value: false enterStop: true // specifies whether to pause scroll during mouse movement. The default value is true })

Html code:

?

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

<! DOCTYPE html>

<Html>

<Head lang = "en">

<Meta charset = "UTF-8">

<Title> scroll plug-in (supports upper, lower, left, and lower, fade in and fade out, scroll time setting, animation time setting, and mouse stop setting) </title>

<Script src = "js/jquery-1.7.2.min.js" type = "text/javascript"> </script>

<Script src = "js/scroll. js" type = "text/javascript"> </script>

</Head>

<Style>

* {Margin: 0px; padding: 0px ;}

. Content {width: 1010px; height: 102px; overflow: hidden; border: #4e83c2 solid 1px; margin: 50px auto ;}

. Content ul {list-style: none; margin: 0px; padding: 0px ;}

. Content ul li {width: 100px; height: 100px; border: # ccc solid 1px; overflow: hidden; cursor: pointer ;}

</Style>

<Body>

<H1> supports upper, lower, left, fade in and out, scroll time setting, animation time setting, and mouse stop setting

<Div class = "content">

<Ul type = "box">

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

<Li> </li>

</Ul>

</Div>

<Div>

$ (". Content"). easysroll ({<br>

// Default configuration parameters <br>

Direction: "left", // left (left) right (right) top (up) bottom (down) default left <br>

Numberr: "1", // The default number of scrolling times is 1 <br>

Delays: "1000", // The default time required to complete an animation is 1000 or equal to 1 second <br>

Scrolling: "1000", // The default interval between each animation is 1000 or equal to 1 second <br>

Fadein: false, // whether fade-in or fade-out is supported; default value: false <br>

EnterStop: true; // specifies whether to move the mouse over or pause the scroll. The default value is true. <br>

<Br>

}) <Br>

<Br>

</Div>

<Script>

$ (". Content"). easysroll ({

// Default configuration parameters

Direction: "left", // left (left) right (right) top (up) bottom (down) default left

Numberr: "1", // The default rolling quantity is 1.

Delays: "1000", // The default time required to complete an animation is 1000 or 1 second.

Scrolling: "1000", // The default interval between each animation is 1000 or equal to 1 second.

Fadein: false, // whether fade-in or fade-out is supported; default value: false

EnterStop: true; // specifies whether to move the mouse over or suspend the scroll. The default value is true.

})

</Script>

</Body>

</Html>

JS core code

?

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

(Function ($ ){

$. Fn. easysroll = function (options ){

Var parameter = {

Direction: "left ",

Numberr: "1 ",

Delayseconds: "1000 ",

Scrolling: "1000 ",

Fadein: false,

EnterStop: true

};

Var ops = $. extend (parameter, options );

Var $ this = $ (this );

Var _ this = this;

Var _ time = null;

Var obj = _ this. find ("[type = 'box']");

Var items = obj. find ("li ");

Var itemsleg = items. length;

Var itemsW = items. outerWidth (true );

Var itemsH = items. outerHeight (true );

Var _ direction = ops. direction;

Var _ numberr = ops. numberr;

Var _ delays = ops. delays;

Var _ scrolling = ops. scrolling;

Var _ fadein = ops. fadein;

Var _ enterStop = ops. enterStop;

If (_ direction = "top" | _ direction = "bottom ")

{

Items.css ({"float": "none "});

Obj. width (itemsW * itemsleg );

If (_ direction = "bottom "){

Obj.css ("margin-top",-_ numberr * itemsH );

}

} Else if (_ direction = "left" | _ direction = "right "){

Items.css ({"float": "left "});

Obj. width (itemsW * itemsleg );

If (_ direction = "right "){

Obj.css ("margin-left",-_ numberr * itemsW );

}

} Else {

Alert ("the rolling direction you configured is incorrect. Please reconfigure ");

Return true;

}

Function scroll (){

If (_ direction = "left "){

Obj. animate ({"margin-left":-_ numberr * itemsW}, Number (_ delays), function (){

For (var I = 0; I <_ numberr; I ++ ){

Obj. find ("li"). eq (0). appendTo (obj );

}

Obj.css ({"margin-left": 0 })

If (_ fadein ){

Obj. find ("li"). eq (0). animate ({"opacity": 0}, Number (_ delays ));

Obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 1 });

}

});

} Else if (_ direction = "right "){

Obj. animate ({"margin-left": 0}, Number (_ delays), function (){

For (var I = 0; I <_ numberr; I ++ ){

Obj. find ("li"). eq (itemsleg-1). prependTo (obj );

};

Obj.css ("margin-left",-_ numberr * itemsW );

If (_ fadein ){

Obj. find ("li"). eq (0). animate ({"opacity": 1}, Number (_ delays ));

Obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 0 });

}

});

} Else if (_ direction = "top "){

Obj. animate ({"margin-top":-_ numberr * itemsH}, Number (_ delays), function (){

For (var I = 0; I <_ numberr; I ++ ){

Obj. find ("li"). eq (0). appendTo (obj );

}

Obj.css ({"margin-top": 0 });

If (_ fadein ){

Obj. find ("li"). eq (0). animate ({"opacity": 0}, Number (_ delays ));

Obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 1 });

}

});

} Else if (_ direction = "bottom "){

Obj. animate ({"margin-top": 0}, Number (_ delays), function (){

For (var I = 0; I <_ numberr; I ++ ){

Obj. find ("li"). eq (itemsleg-1). prependTo (obj );

}

Obj.css ("margin-top",-_ numberr * itemsH );

If (_ fadein ){

Obj. find ("li"). eq (0). animate ({"opacity": 1}, Number (_ delays ));

Obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 0 });

}

});

}

}

$ This. hover (function (){

If (_ enterStop ){

ClearInterval (_ time );

}

}, Function (){

_ Time = setInterval (scroll, _ scrolling );

}). Trigger ('mouseleave ');

}

}) (JQuery );

The above is all the content of this article. I hope you will like it.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
scroll up down jquery example images for parallax scrolling plug in microphone for laptop jquery validation for image upload in php seamless ihop grubhub seamless how to scroll background image in css
Related Article
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More