Home>

After half a day,This left and right scroll menu function developed using jquery is also complete,No error has been found for the time being.Now take the complete code and share it!

scrollable.js

Jquery left and right scroll menu effects script code reference fragment:

scrollable=function (content, render, options, beforescroll) {
 /*
  * @author:selfimpr
  * @blog:http://blog.csdn.net/lgg201
  *@e-mail:[email protected]
  *
  * Note:
  * 1. Content must specify its own width.
 If the elements in it use block elements, Please use float:left to float left.
  * 2. When using, try to customize the style as much as possible, Due to my poor level, Can't make something more general, Ha ha.
  *
  * Parameter explanation
  * content:content element, Can be a selector or jquery-encapsulated dom element
  * render:the target container to render to, Can be a selector or jquery-encapsulated dom element
  * options:options
  * scrollable_class:overall scrollable outer frame style, default:ui-scrollable
  * scrollable_left_class:the style of the left button, Default:ui-scrollable-left
  * scrollable_container_class:the style of the content container, Default:ui-scrollable-container
  * scrollable_right_class:style of right button, Default:ui-scrollable-right
  * delay:the time interval between two movements when the mouse is placed or the button is clicked, Integer
  * speed:When the mouse is on the button, The distance of one movement, Integer
  * speedup:When the mouse clicks the button, The distance of one movement, Integer
  * resizeevent:whether to listen for window resize events, Boolean value,  * When the listening window is resized, After refreshing the page, It feels a bit awkward, So default is false
  * beforescroll:event callback method when the content is scrolled.
  * Accept parameters (two objects):the first is the left and right position of the content before scrolling, The second is the left and right position of the content after scrolling.
  * Note:This event allows content to scroll without border restrictions.
  * /
 options.scrollable_class=options.scrollable_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=$("<div></div>")
     .attr ("id", "scrollable_" + content.attr ("id"))
     .attr ("classname", options.scrollable_class);
 var left=$("<div></div>")
    .attr ("id", "scrollable_left_" + content.attr ("id"))
    .attr ("classname", options.scrollable_left_class);
 left.text (options.lefttext);
 var container=$("<div></div>")
     .attr ("id", "scrollable_container_" + content.attr ("id"))
     .attr ("classname", options.scrollable_container_class);
 content.css ("line-height", "29px")
   .css ("position", "relative")
   .css ("left", "0px")
   .css ("overflow", "hidden")
   .css ("float", "left");
 var right=$("<div></div>")
    .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.position={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);
   scrollable.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=false;
  } 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

Jquery left and right scroll menu effects page code reference fragment:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jquery left and right scroll menu special effects</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scrollable.js"<&/script>
<style type="text/css">
.scrollable-render {}
.button {cursor:hand;}
.button:hover>* {background-position:0 -42px;}
.button_left {float:left;background:url (menu_out_left.gif) no-repeat 0 0;width:4px;height:26px;}
.button_center {float:left;background:url (menu_out_bj.gif) repeat-x 0 0;width:80px;text-align:center}
.button_right {float:left;background:url (menu_out_right.gif) no-repeat 0 0;width:4px;height:26px;}
.ui-scrollable {width:800px;height:29px;}
.ui-scrollable-container {float:left;width:780px;height:inherit;position:relative;overflow:hidden;border-bottom:1px solid #dddddd;}
.ui-scrollable-content {float:left;width:1770px;height:inherit;}
.ui-scrollable-left {float:left;background:url (scrollable_left_out.gif) no-repeat 0 0;width:10px;height:29px;cursor:hand;}
.ui-scrollable-right {float:left;background:url (scrollable_right_out.gif) no-repeat 0 0;width:10px;height:29px;cursor:hand;}
.ui-scrollable-left:hover {float:left;background:url (scrollable_left_on.gif) no-repeat 0 0;width:10px;height:29px;cursor:hand;}
.ui-scrollable-right:hover {float:left;background:url (scrollable_right_on.gif) no-repeat 0 0;width:10px;height:29px;cursor:hand;}
</style>
<script type="text/javascript">
$(function () {
 scrollable ("#scrollable_content", "#scrollable_render", {
 }, function (originalposition, newposition) {
  return true;
 });
});
</script>
</head>
<body>
<center>
 <div></div>
 <div>
  <div>
   <div></div>
   <div>menu one</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu two</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu three</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu four</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu five</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu Six</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu Seven</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu eight</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu nine</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu ten</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu one</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu two</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu three</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu four</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu five</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu Six</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>Menu Seven</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu eight</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu nine</div>
   <div></div>
  </div>
  <div>
   <div></div>
   <div>menu ten</div>
   <div></div>
  </div>
 </div>
</center>
</body>
</html>

Of course, we also need to reference the jquery framework file,I useherejquery-1.4.2.min.js, you can search and download on the Internet,I won't upload it here.The whole jquery left and right scroll menu special effect looks like this,I feel okay,I hope to help some friends in need.

  • Previous Encyclopedia of REGEXP regular expressions in MySQL
  • Next How to fix jQuery EasyUI Dialog