`

div浮于页面固定位置、展开与隐藏、锚点定位

阅读更多
具体代码请参考附件demo。
浮动效果是通过jQuery插件Portamento实现的:
Portamento是一个轻量级的jQuery插件,它具有简单并且容易使用的特点。使用此插件,只需一行代码便可实现网页元素浮动于固定位置的效果。它会检测浏览器大小是否足以显示浮动层,如果过小将不会浮动显示。Portamento也提供了几个参数可供设置,定制性也是比较高的。

如何使用
  此插件的使用方法其实很简单,首先要引入jQuery库和portamento插件,如下

<script src="jquery-1.4.2.min.js"></script>
<script src="portamento-min.js"></script>

  对需要设置浮动的元素添加必要的CSS样式,代码如下(sidebar即为浮动的元素)

#portamento_container {float:right; position:relative;}
#portamento_container #sidebar {float:none; position:absolute;}
#portamento_container #sidebar.fixed {position:fixed;}

  最后初始化即可,完整代码可查看文后的演示

$('#sidebar').portamento();

展开与隐藏实现起来很简单,只有一个方法:
<script type="text/javascript">
			$(document).ready(function(){
				$(".content1").hide();
				$(".c-title1").click(function(){
					$(this).next(".content1").slideToggle(500);		//展开和关闭需要的时间(毫秒)
				});
			});
		</script>

slideToggle(500)方法负责处理展开与隐藏。

快速锚点定位,同样很简单,通过scrollIntoView()方法就实现了。
1
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics