jQuery也很方便啊

原来有段javascript的代码,是滚动图片的。因为最近在看jQuery,就用jQuery改造一下,下面这段勉强可用。等偶慢慢搞成好点的版本,再整理个例子:
[sourcecode language=”javascript”]
jQuery.fn.horzScroller = function(params) {
var p = params || {
container: “”,
scroller: “”,
ref: “”,
speed: 25,
dir: true
};

var _container = $(“#” + p.container);
var _scroller = $(“#” + p.scroller);
var _ref = $(“#” + p.ref);
var _speed = p.speed;
var _marquee;
var _dir = p.dir;

var scrollLeft = function() {
if(_container.width() – _container.scrollLeft() < =0) _container.scrollLeft(0); else _container.scrollLeft(_container.scrollLeft() + 1); }; var scrollRight = function() { if(_ref.offsetWidth() - _container.scrollLeft() <=0) _container.scrollLeft(_container.scrollLeft() - _scroller.offsetWidth()); else _container.scrollLeft(_container.scrollLeft() + 1); }; var init = function() { _ref.html(_scroller.html()); if (_dir) _marquee = setInterval(scrollLeft, _speed); else _marquee = setInterval(scrollRight, _speed); _container.mouseover(function(e) { clearInterval(_marquee); } ); _container.mouseout(function(e) { if (_dir) _marquee = setInterval(scrollLeft, _speed); else _marquee = setInterval(scrollRight, _speed); } ); } init(); } [/sourcecode] 调用界面: [sourcecode language="html"] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




Hello,10000000000000000000000000000000000000000000000000



[/sourcecode]

**注意,在滚动的区域的内内容要宽度大于外面的容器才可以。

关于此实例的完整代码和说明稍后再推出吧。正事儿要紧。

参考:
http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html
http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

http://jqueryui.com/
http://www.corrie.net.cn/e/321.htm
http://www.skiyo.cn/article/Skiyo-74-1228116085.html

打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注