jquery jscrollpane.js滚动窗口仿微信聊天对话窗口样式(支持手机触屏拖动窗口)



333 1328 443



特效描述:jquery jscrollpane.js 滚动窗口 微信聊天窗口 聊天对话窗口 窗口样式,jquery+css3模仿微信对话(支持手机触屏拖动窗口)

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/jscrollpane1.css" />

2. 引入JS

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/scroll-startstop.events.jquery.js"></script>

3. HTML代码

<div class="talk">
	<div class="talk_title"><span>手机讨论发言</span></div>
	<div class="talk_record">
		<div id="jp-container" class="jp-container">
			<div class="talk_recordboxme">
				<div class="user"><img src="images/thumbs/15.jpg"/>王玉山</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>我的问题是:1+1=?</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordbox">
				<div class="user"><img src="images/thumbs/11.jpg"/>刘韵</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>对方的回答是:1+1=2</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordboxme">
				<div class="user"><img src="images/thumbs/15.jpg"/>王玉山</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>我的问题是:1+1真的等于2吗?不会是等于3吧</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordbox">
				<div class="user"><img src="images/thumbs/11.jpg"/>刘韵</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>对方的回答是:在错误的情况下是可以等于3的</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordboxme">
				<div class="user"><img src="images/thumbs/15.jpg"/>王玉山</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>我的问题是1+1可以等于1吗?</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordbox">
				<div class="user"><img src="images/thumbs/11.jpg"/>刘韵</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>对方的回答:理论上是不可以的,现在中是可以的。1个男人+1个女人=1个家庭</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordboxme">
				<div class="user"><img src="images/thumbs/15.jpg"/>王玉山</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>我的问题是:那这样说1+1到底等于几呢?</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordbox">
				<div class="user"><img src="images/thumbs/11.jpg"/>刘韵</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>对方的回答是:可以等于任何数,你想等于几就等于几,你烦不烦啊!</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
			<div class="talk_recordboxme">
				<div class="user"><img src="images/thumbs/15.jpg"/>王玉山</div>
				<div class="talk_recordtextbg">&nbsp;</div>
				<div class="talk_recordtext">
					<h3>我在思考!</h3>
					<span class="talk_time">2012-09-15 15:06</span>
				</div>
			</div>
		</div>
	</div>
	<div class="talk_word">
		&nbsp;
		<input class="add_face" id="facial" type="button" title="添加表情" value="" />
		<input class="messages emotion" autocomplete="off" value="在这里输入文字" onFocus="if(this.value=='在这里输入文字'){this.value='';}"  onblur="if(this.value==''){this.value='在这里输入文字';}"  />
		<input class="talk_send" type="button" title="发送" value="发送" />
	</div>
</div>
<script type="text/javascript">
$(function(){
	// the element we want to apply the jScrollPane
	var $el= $('#jp-container').jScrollPane({
		verticalGutter 	: -16
	}),
	// the extension functions and options 	
		extensionPlugin 	= {
			extPluginOpts	: {
				// speed for the fadeOut animation
				mouseLeaveFadeSpeed	: 500,
				// scrollbar fades out after hovertimeout_t milliseconds
				hovertimeout_t		: 1000,
				// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
				// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
				// also, it will be shown when we start to scroll and hidden when stopping
				useTimeout			: true,
				// the extension only applies for devices with width > deviceWidth
				deviceWidth			: 980
			},
			hovertimeout	: null, // timeout to hide the scrollbar
			isScrollbarHover: false,// true if the mouse is over the scrollbar
			elementtimeout	: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
			isScrolling		: false,// true if scrolling
			addHoverFunc	: function() {
				// run only if the window has a width bigger than deviceWidth
				if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
				var instance		= this;
				// functions to show / hide the scrollbar
				$.fn.jspmouseenter 	= $.fn.show;
				$.fn.jspmouseleave 	= $.fn.fadeOut;
				// hide the jScrollPane vertical bar
				var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();
				/*
				 * mouseenter / mouseleave events on the main element
				 * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
				 */
				$el.bind('mouseenter.jsp',function() {
					// show the scrollbar
					$vBar.stop( true, true ).jspmouseenter();
					if( !instance.extPluginOpts.useTimeout ) return false;
					// hide the scrollbar after hovertimeout_t ms
					clearTimeout( instance.hovertimeout );
					instance.hovertimeout 	= setTimeout(function() {
						// if scrolling at the moment don't hide it
						if( !instance.isScrolling )
							$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
					}, instance.extPluginOpts.hovertimeout_t );
				}).bind('mouseleave.jsp',function() {
					// hide the scrollbar
					if( !instance.extPluginOpts.useTimeout )
						$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
					else {
					clearTimeout( instance.elementtimeout );
					if( !instance.isScrolling )
							$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
					}
				});
				if( this.extPluginOpts.useTimeout ) {
					$el.bind('scrollstart.jsp', function() {
						// when scrolling show the scrollbar
					clearTimeout( instance.hovertimeout );
					instance.isScrolling	= true;
					$vBar.stop( true, true ).jspmouseenter();
				}).bind('scrollstop.jsp', function() {
						// when stop scrolling hide the scrollbar (if not hovering it at the moment)
					clearTimeout( instance.hovertimeout );
					instance.isScrolling	= false;
					instance.hovertimeout 	= setTimeout(function() {
						if( !instance.isScrollbarHover )
								$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
						}, instance.extPluginOpts.hovertimeout_t );
				});
					// wrap the scrollbar
					// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
				var $vBarWrapper	= $('<div/>').css({
					position	: 'absolute',
					left		: $vBar.css('left'),
					top			: $vBar.css('top'),
					right		: $vBar.css('right'),
					bottom		: $vBar.css('bottom'),
					width		: $vBar.width(),
					height		: $vBar.height()
				}).bind('mouseenter.jsp',function() {
					clearTimeout( instance.hovertimeout );
					clearTimeout( instance.elementtimeout );
					instance.isScrollbarHover	= true;
						// show the scrollbar after 100 ms.
						// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar								
					instance.elementtimeout	= setTimeout(function() {
						$vBar.stop( true, true ).jspmouseenter();
					}, 100 );	
				}).bind('mouseleave.jsp',function() {
						// hide the scrollbar after hovertimeout_t
					clearTimeout( instance.hovertimeout );
					instance.isScrollbarHover	= false;
					instance.hovertimeout = setTimeout(function() {
							// if scrolling at the moment don't hide it
						if( !instance.isScrolling )
								$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
						}, instance.extPluginOpts.hovertimeout_t );
				});
				$vBar.wrap( $vBarWrapper );
			}
			}
		},
		// the jScrollPane instance
		jspapi 			= $el.data('jsp');
	// extend the jScollPane by merging	
	$.extend( true, jspapi, extensionPlugin );
	jspapi.addHoverFunc();
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 拖动 拖拽 拖动插件 拖拽插件 自动滚动图片轮播 切换按钮 表单 表单美化 表单插件 表单美化插件 文字拖动 文字拖拽 文本框 text文本框 图片文字滚动 文字图片滚动 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到