JQuery implements special menu effects for left and right scrolling _ jquery

This article mainly introduces jquery's code for implementing the left-right sliding menu effect. It involves jquery mouse event related skills and has some reference value. If you need it, you can refer to it for a long time, this left and right scrolling menu function developed by JQuery is complete, and no error is found yet. Now let's share the complete code!

Scrollable. js

The following code references the special effect script of JQuery's left and right scrolling menu:

Scrollable = function (content, render, options, beforeScroll) {/** @ author: selfimip * @ blog: http://blog.csdn.net/lgg201 * @ E-mail: lgg860911@yahoo.com.cn ** Note: * 1. content must specify its own width. if the elements use block elements, float: left is used to float the left. * 2. try to customize styles when using them. I cannot make more common things because of my poor level. ** parameter description * content: content element, which can be a selector or DOM element encapsulated by JQUERY * render: The rendered target container, or a DOM element encapsulated by selector or JQUERY * options: option * scrollable_class: The External Frame style of the overall scrollable. Default: ui-scrollable * scrollable_left_class: style of the left button. Default: ui-scrollable-left * labels: style of the content container, Default Value: ui-scrollable-container * scrollable_right_class: the style of the right button. Default Value: ui-scrollable-right * delay: the interval between two moves when the mouse is placed or clicked, integer * speed: the distance of a move when the mouse is placed on the button. Integer * speedup: the distance of a move when the mouse is clicked. Integer * resizeEvent: whether to listen for events with window size changing, Boolean value. * When the listening window is changed for an hour, the page is refreshed and displayed as awkward. Therefore, the default value is false * beforeScroll: event Callback Method for content scrolling. * accept parameters (two objects): the first is the left and right positions of the content before scrolling, and the second is the left and right positions of the content after scrolling. * Note: This event will allow the content to be rolled out without restriction. */options. scrollable_class = options. s Crollable_class | 'ui-scrollable'; options. scrollable_left_class = options. scrollable_left_class | 'ui-scrollable-left'; options. scrollable_container_class = options. scrollable_container_class | 'ui-scrollable-container'; options. scrollable_right_class = options. scrollable_right_class | 'ui-scrollable-Right'; options. leftText = options. leftText | ''; options. rightText = options. rightText |' '; Options. delay = options. delay | 20; options. speed = options. speed | 5; options. speedup = options. speedup | 10; options. resizeEvent = options. resizeEvent | false; var render = (typeof render = 'string '? $ (Render): render); var content = (typeof content = 'string '? $ (Content): content); var scrollable = $ ('
'). Attr ('id', 'scrollable _ '+ content. attr ('id ')). attr ('classname', options. scrollable_class); var left = $ ('
'). Attr ('id', 'scrollable _ left _ '+ content. attr ('id ')). attr ('classname', options. scrollable_left_class); left. text (options. leftText); var container = $ ('
'). Attr ('id', 'scrollable _ iner _ '+ content. attr ('id ')). attr ('classname', options. scrollable_container_class); content.css ('line-height', '29px '). css ('position', 'relative '). css ('left', '0px '). css ('overflow', 'hid '). css ('float', 'left'); var right = $ ('
'). Attr ('id', 'scrollable _ right _ '+ content. attr ('id ')). attr ('classname', options. scrollable_right_class); right. text (options. rightText); show = function () {scrollable. appendTo (render); container. appendTo (scrollable); left.css ('display', ''); right.css ('display',''); content. appendTo (container); left. prependTo (scrollable); right. appendTo (scrollable); if (content. width () <= container. width () + 20) {Scrollable. remove ('. '+ options. scrollable_left_class); scrollable. remove ('. '+ options. scrollable_right_class); left.css ('display', 'None'); right.css ('display', 'None'); container. width (content. width (); scrollable. width (container. width ();} container. position = {left: container.css ('left '). substr (0,-2)} container. position. right = container. position. left + container. width (); content. positi On = {left: new Number(content.css ('left '). substr (0,-2)} content. position. right = content. position. left + content. width () ;}; show (); var originalBroswerWidth = document. body. clientWidth; window. onresize = function () {if (options. resizeEvent) {var newBroswerWidth = document. body. clientWidth; var percent = newBroswerWidth/originalBroswerWidth; container. width (container. width () * percent); scro Llable. width (container. width () + left. width () + right. width (); show ();} originalBroswerWidth = document. body. clientWidth;} var scroll = false; move = function (distance) {var newLeft = content. position. left + distance; var newRight = content. position. right + distance; if (distance> 0 & newLeft> container. position. left) {distance = container. position. left-content. position. left; scroll = fal Se;} else if (distance <0 & newRight <container. position. right) {distance = content. position. right-container. position. right; scroll = false;} newLeft = content. position. left + distance; newRight = content. position. right + distance; scorll = beforeScroll? BeforeScroll ({left: content. position. left, right: content. position. right },{ left: newLeft, right: newRight}): scroll; if (scroll) {content.css ('left', newLeft + 'px '); content. position. left + = distance; content. position. right + = distance; setTimeout ('move ('+ distance +') ', options. delay) ;}} left. mouseover (function () {scroll = true; move (options. speed) ;}); right. mouseover (function () {scroll = true; move (-options. speed) ;}); left. mouseout (function () {scroll = false ;}); right. mouseout (function () {scroll = false ;}); left. mousedown (function () {scroll = true; move (options. speedup) ;}); right. mousedown (function () {scroll = true; move (-options. speedup) ;}); left. mouseup (function () {scroll = false ;}); right. mouseup (function () {scroll = false ;});}

Default. aspx

The following code references JQuery's special menu effects page:

  
  JQuery scroll menu Effects