jQuery迷你帮助查找功能滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery迷你帮助查找功能滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery迷你帮助查找功能</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>

		<div id="widget">

			<div id="header">
				<input type="text" id="search" placeholder="Search in the text" />
			</div>

			<div id="content">
				<p>A help guide about your application would go here. An example wikipedia article follows. Try searching!</p>
				<p><b>JavaScript</b> (sometimes abbreviated JS) is a scripting language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites.</p>
				<img src="img/HTML5_Badge_128.png" alt="HTML5 Logo" />
				<p>JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It uses syntax influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.</p>
				<p>JavaScript's use in applications outside web pages — for example in PDF documents, site-specific browsers, and desktop widgets—is also significant. Newer and faster JavaScript VMs and frameworks built upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web applications.</p>
				<p>JavaScript was formalized in the <i>ECMAScript language standard</i> and is primarily used in the form of client-side JavaScript (as part of a web browser). This enables programmatic access to computational objects within a host environment.</p>

			</div>
		</div>
        <!-- JavaScript Includes -->
        <script src="js/jquery.min.js"></script>
        <script src="js/highlight.jquery.js"></script>
        <script src="js/jquery.scrollTo.min.js"></script>
        <script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

$(function(){
	var search = $('#search'),content = $('#content'),matches = $(),index = 0;
	// Listen for the text input eventsearch.on('input',function(e){
	// Only search for strings 2 characters or moreif (search.val().length >= 2){
	// Use the highlight plugincontent.highlight(search.val(),function(found){
	matches = found;
	if(matches.length && content.is(':not(:animated)')){
	scroll(0);
}
}
);
}
else{
	content.highlightRestore();
}
}
);
	search.on('keypress',function(e){
	if(e.keyCode == 13){
	// The enter keyscrollNext();
}
}
);
	function scroll(i){
	index = i;
	// Trigger the scrollTo plugin. Limit it// to the y axis (vertical scroll only)content.scrollTo(matches.eq(i),800,{
	axis:'y'}
);
}
function scrollNext(){
	matches.length && scroll( (index + 1) % matches.length );
}
}
);

CSS代码(styles.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
html{background:url('../img/bg.jpg') #e5e5e5;}
body{font:14px/1.3 'Segoe UI',Arial,sans-serif;background-color:transparent;}
a,a:visited{outline:none;color:#1c4f64;}
a:hover{text-decoration:none;}
section,footer,header{display:block;}
#main{width:575px;text-align:center;position:absolute;top:50px;left:50%;width:500px;height:500px;margin:0 0 0 -250px;}
/*-------------------------The Widget--------------------------*/
#widget{width:256px;height:375px;position:relative;overflow:hidden;font:12px 'Open-Sans',Arial,sans-serif;border:1px solid #C3C3C3;color:#5e5e5e;background-color:#fff;box-shadow:0 0 15px rgba(0,0,0,0.05) inset,0 0 4px rgba(0,0,0,0.1);border-radius:3px;margin:120px auto 50px;}
#content{position:absolute;top:95px;bottom:25px;left:25px;right:13px;overflow-x:hidden;overflow-y:scroll;padding-right:10px;}
#content p{margin-bottom:10px;}
#content img{margin:15px;}
#search{border:none;width:159px;top:30px;left:23px;font:inherit;position:absolute;outline:none;line-height:16px;padding:5px 8px;background-color:transparent;}
span.match{background-color:#f8dda9;border:1px solid #edd19b;margin:-1px;}
#header{border-radius:3px 3px 0 0;background-color:#eee;height:80px;background:url('../img/header.jpg') no-repeat;border-bottom:1px solid #CACACA;box-shadow:0 0 5px #DDD;}
/*----------------------------The Footer-----------------------------*/
footer{background-color:#111111;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,0.4);height:45px;left:0;position:fixed;width:100%;z-index:100000;}
footer h2{color:#EEEEEE;font-size:14px;font-weight:normal;left:50%;margin-left:-400px;padding:13px 0 0;position:absolute;width:540px;line-height:1.4;margin-top:0;}
footer h2 i{font-style:normal;color:#888;}
footer a.tzine,a.tzine:visited{color:#999999;font-size:12px;left:50%;margin:16px 0 0 110px;position:absolute;text-decoration:none;top:0;}
footer a i{color:#ccc;font-style:normal;}
footer a i b{color:#c92020;font-weight:normal;}

附件:下载该文件资源,减少时间成本(增值服务)