<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>水平滚动条 &#8211; LPC影子技术分享</title>
	<atom:link href="https://www.mudbest.com/tag/%E6%B0%B4%E5%B9%B3%E6%BB%9A%E5%8A%A8%E6%9D%A1/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mudbest.com</link>
	<description>行影不离,忘之却步.</description>
	<lastBuildDate>Thu, 04 Oct 2012 08:54:05 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.1</generator>
	<item>
		<title>Jquery水平滚动条插件</title>
		<link>https://www.mudbest.com/jquery%e6%b0%b4%e5%b9%b3%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%8f%92%e4%bb%b6/</link>
		
		<dc:creator><![CDATA[hkshadow]]></dc:creator>
		<pubDate>Fri, 12 Aug 2011 09:24:23 +0000</pubDate>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[水平滚动条]]></category>
		<guid isPermaLink="false">http://www.mudbest.com/?p=731</guid>

					<description><![CDATA[可以实现滑动、鼠标拖动、滑轮滚动等多种效果！最少仅需传入一个参数： 功能介绍： 1、支持滚动内容时的滑动效果； ... <a title="Jquery水平滚动条插件" class="read-more" href="https://www.mudbest.com/jquery%e6%b0%b4%e5%b9%b3%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%8f%92%e4%bb%b6/" aria-label="阅读 Jquery水平滚动条插件">阅读更多</a>]]></description>
										<content:encoded><![CDATA[<p>可以实现滑动、鼠标拖动、滑轮滚动等多种效果！最少仅需传入一个参数：</p>
<pre class="brush: jscript; title: ; notranslate">
$(&quot;.container&quot;).hScrollPane({
	mover:&quot;.press&quot;
});
</pre>
<p>功能介绍：<br />
1、支持滚动内容时的滑动效果；<br />
2、支持鼠标拖动效果及滑轮滚动效果；<br />
3、拖动滚动条时可选择变换样式，实现高仿真滚动条效果；<br />
4、可限定滚动条的最小宽度，默认滚动条宽度适应滚动内容的长短；<br />
5、支持是否显示左右箭头。<br />
<span id="more-731"></span><br />
使用方法:</p>
<pre class="brush: jscript; title: ; notranslate">
$(&quot;.container&quot;).hScrollPane({
	mover:&quot;.press&quot;, //必需项;
	moverW:function(){return $(&quot;.press&quot;).width();}(),
	handleMinWidth:300, 
	showArrow:true, 
	dragable:false, 
	handleCssAlter:&quot;draghandlealter&quot;,
	easing:true,
	mousewheel:{bind:true,moveLength:500} 
});
</pre>
<p>参数说明：<br />
○ “.container”是需要添加滚动条的对象，该对象要包含一个被移动的对象。滚动条会append到该对象后面。如下面的html结构：</p>
<pre class="brush: xml; title: ; notranslate">
&lt;div class=&quot;container&quot;&gt;
	&lt;div class=&quot;press&quot;&gt;
             &lt;p&gt;致力于提供专业的各类网站开发服务；极富视觉享受的平面及动画设计制作服务；高效益的网站重构服务。我们是一群追求技术创造价值的青年，有着丰富的行业经验。&lt;/p&gt;
        &lt;/div&gt;
        &lt;!--滚动条会append到这里--&gt;
&lt;/div&gt;
</pre>
<p>“.container”的position需要设置为relative或absolute；“.press”是被移动的对象，他的position属性需设置为absolute，因为脚本需要通过改变它的left值来实现内容滚动效果。给“.container”绑定脚本后，页面上所有的“.container”对象都能实现滚动条效果；<br />
○ mover：必需项。指定container对象下的哪个元素需要滚动位置；<br />
○ moverW：可选项。传入水平滚动对象的长度值，不传入的话默认直接获取mover的宽度值。对于滚动对象为li列表，而li又设置了margin-right值，要让滚动条滚动到最后时不出现多于的空白，可以指定该值，具体示例请参看demo页中的最后一个示例；<br />
○ handleMinWidth：可选项。指定滚动条的最小宽度,要固定滚动条的宽度请在css中设定滚动条的width值（如width:28px!important;），不传入则不设定最小宽度，默认滚动条宽度是根据滚动内容的长短计算；<br />
○ showArrow：可选项。指定是否显示左右箭头，默认不显示 ；<br />
○ dragable：可选项。指定是否要支持拖动效果，默认拖动内容对象有滚动效果；<br />
○ handleCssAlter：可选项。传入拖动鼠标时要给滚动条添加的class名，不传入该参数则滚动条不会有变化效果；<br />
○ easing：可选项。滚动内容时是否需要滑动效果,默认有滑动效果；<br />
○ mousewheel：可选项。mousewheel: bind->’true’,绑定mousewheel事件; ->’false’,不绑定mousewheel事件；moveLength是指定鼠标滚动一次移动的距离,默认值：{bind:true,moveLength:300}，例如想改变每次滑轮滑动内容移动的距离，该参数可以这样写：mousewheel:{moveLength:600}，注意该值也是点击drag bar时内容的移动距离；</p>
<p>演示地址：<a href='http://help.mudbest.com/jquery/20110812/1/' target='_black'>Jquery水平滚动演示</a><br />
下载地址：<a href='http://www.mudbest.com/731.action/hscrollpane' rel='attachment wp-att-734'>Jquery水平滚动下载</a></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
