jquery圆形滚动条平滑效果特效代价

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery圆形滚动条平滑效果特效代价 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jquery圆形滚动条平滑效果特效代价

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery圆形滚动条平滑效果</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/website.js"></script>
</head>
<body>
	<div id="scrollbar1">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <div class="overview">
				<h3>Magnis dis parturient montes</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>
				
				<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>
				
				<p>Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.</p>
				
				<h3>Adipiscing risus </h3>
				<p>Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.</p>
				
				<p>Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.</p>                   
			</div>
		</div>
	</div>	
	
<div id="scrollbar2">
							<div class="scrollbar"><div class="track" style="width: 236px;"><div class="thumb" style="width: 39.3333px;"><div class="end"></div></div></div></div>
							<div class="viewport">
							    <div class="overview">
					            	<img src="images/picture7.jpg">
					            	<img src="images/picture5.jpg">
					            	<img src="images/picture6.jpg">
					           		<img src="images/picture4.jpg">
					            	<img src="images/picture3.jpg">
					            	<img src="images/picture2.jpg">				   				</div>
							</div>
</div>	<br />
</body>
</html>







JS代码(website.js):

var Website ={
	run:function(){
	oScroll1 = $('#scrollbar1');
	if(oScroll1.length > 0){
	oScroll1.tinyscrollbar();
}
var oScroll2 = $('#scrollbar2');
	if(oScroll2.length > 0){
	oScroll2.tinyscrollbar({
	axis:'x'}
);
}
var oScroll2 = $('#scrollbar3');
	if(oScroll2.length > 0){
	oScroll2.tinyscrollbar({
	size:100}
);
}
Cufon.replace('h2,h1,a.download');
	var oCon = document.getElementById('mcon');
	var oLink = document.createElement('a');
	var oText = document.createTextNode("me");
	var sPart0 = 'ma';
	var sPart1 = 'ilto:wie';
	var sPart2 = 'ringen';
	var sPart3 = '@gm';
	var sPart4 = 'ail.com';
	oLink.href = sPart0+sPart1+sPart2+sPart3+sPart4;
	//var ding = document.evaluate("//h2",document,null,8,null);
	//console.log(ding.singleNodeValue);
}
}
;
	//Initialize$(document).ready(function(){
	Website.run();
}
);
	

CSS代码(website.css):

/* GLOBAL SECTION ================================================================================= */
html,body{height:100%;margin:0;padding:0 0 0 20px;}
body{background-color:#f3f3f3;font:12px 'arial';color:#555555;}
a{color:#C01313;}
a:hover{}
/* Tiny Scrollbar */
#scrollbar1{width:520px;clear:both;margin:20px 0 10px;}
#scrollbar1 .viewport{width:500px;height:200px;overflow:hidden;position:relative;}
#scrollbar1 .overview{list-style:none;position:absolute;left:0;top:0;}
#scrollbar1 .scrollbar,#scrollbar1 .thumb .end,#scrollbar1 .thumb{background:transparent url(../images/bg-scrollbar.png) no-repeat;}
#scrollbar1 .scrollbar{position:relative;background-position:0 0;float:right;width:15px;}
#scrollbar1 .track{background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;height:100%;width:13px;position:relative;padding:0 1px;}
#scrollbar1 .thumb{background-position:100% 100%;height:20px;width:13px;cursor:pointer;overflow:hidden;position:absolute;top:0;}
#scrollbar1 .thumb .end{background-position:100% 0;height:5px;width:13px;}
#scrollbar1 .disable{display:none;}
#scrollbar2{width:236px;clear:both;margin:20px 0 10px;}
#scrollbar2 .viewport{width:236px;height:125px;overflow:hidden;position:relative;}
#scrollbar2 .overview{list-style:none;width:1416px;padding:0;margin:0;position:absolute;left:0;top:0;}
#scrollbar2 .overview img{float:left;}
#scrollbar2 .scrollbar,#scrollbar2 .thumb .end,#scrollbar2 .thumb{background:transparent url(../images/design/bg-scrollbar-x.png) no-repeat;}
#scrollbar2 .scrollbar{position:relative;overflow:hidden;margin:0 0 5px;clear:both;height:15px;}
#scrollbar2 .track{background:transparent url(../images/design/bg-scrollbar-x-end.png) no-repeat 100% 0;width:100%;height:13px;position:relative;padding:1px 0;}
#scrollbar2 .thumb{background-position:100% -15px;height:13px;cursor:pointer;overflow:hidden;position:absolute;left:0;}
#scrollbar2 .thumb .end{background-position:0 -15px;height:13px;width:5px;}
#scrollbar2 .disable{display:none;}
#scrollbar3{width:320px;clear:both;margin:20px 0 10px;}
#scrollbar3 .viewport{width:300px;height:300px;overflow:hidden;position:relative;}
#scrollbar3 .overview{list-style:none;position:absolute;left:0;top:0;}
#scrollbar3 .scrollbar,#scrollbar3 .thumb .end,#scrollbar3 .thumb{background:transparent url(../images/design/bg-scrollbar.png) no-repeat;}
#scrollbar3 .scrollbar{position:relative;background-position:0 0;float:right;width:15px;}
#scrollbar3 .track{background:transparent url(../images/design/bg-scrollbar-end.png) no-repeat 0 100%;height:100%;width:13px;position:relative;padding:0 1px;}
#scrollbar3 .thumb{background-position:100% 100%;height:20px;width:13px;cursor:pointer;overflow:hidden;position:absolute;top:0;}
#scrollbar3 .thumb .end{background-position:100% 0;height:5px;width:13px;}
#scrollbar3 .disable{display:none;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
140.15 KB
Html Js 滚动条
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章