Jquery plug-in simplyscroll plug-in

Source: Internet
Author: User
Tags jquery library

Simplyscroll is a jquery plug-in that can automatically or manually, horizontally, or vertically scroll a series of elements. It can receive dynamic images or JSON source images from the Flickr feed. It is very powerful and can achieve rich effects.

Instructions for use
You need to use the jquery library file and the simplyscroll Library File
You need to customize CSS styles for display elements (such as images)

Use instance
1. Contains the file section

  1. <SCRIPT type = "text/JavaScript" src = "/jquery. js"> </SCRIPT>
  2. <SCRIPT type = "text/JavaScript" src = "jquery. simplyscroll. js"> </SCRIPT>
  3. <LINK rel = "stylesheet" href = "jquery.simplyscroll.css" Media = "all" type = "text/CSS">

Ii. html Section

  1. <Ul id ="Scroller">
  2. <Li> </LI>
  3. <Li> </LI>
  4. <Li> </LI>
  5. </Ul>

Iii. Javascript

  1. <SCRIPT type = "text/JavaScript">
  2. (Function ($ ){
  3. $ (Function (){
  4. $ ("#Scroller"). Simplyscroll ({
  5. Automode: 'Login ',
  6. });
  7. });
  8. }) (Jquery );
  9. </SCRIPT>

The above example shows that using the jquery plug-in simplyscroll is very simple and you can achieve the rolling effect by defining the elements to be displayed (such as images in the instance.

Simplyscroll parameter list (For details, refer to the JS library file of the jquery plug-in simplyscroll)

  • Classname 'smooth-scroll' CSS Class Name
  • Framerate 24-second moving or frame quantity
  • Speed 1 The number of pixels that move per frame.
  • Horizontal true direction of movement, horizontal or vertical
  • Automode'Off' indicates whether the automatic mode loop or bounce is enabled.
  • Pauseonhover true: whether to pause when hovering
  • Flickrfeed ''calls JSON to use the Flickr feed path.
  • Jsonsource ''calls the local JSON
  • Jsonimgwidth 240 the width of the image in the Flickr/JSON format.
  • Jsonimgheight 180 the Image Height of the Flickr/JSON File

 

Download demo

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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