您的位置：首页 > Web前端 > JQuery

jquery--jQuery插件【capacityFixed-类似于新浪微博新消息提示的定位框的实例页面】

2015-08-24 16:42 721 查看

一、基本知识

看我前三篇文章：

javascript--闭包

jquery--jQuery.extend 函数详解

jquery--创建一个自定义 jQuery 插件

二、capacityFixed-类似于新浪微博新消息提示的定位框的实例页面

参考：http://www.css88.com/demo/capacityFixed/

js代码

/**
*@author
*@创建时间 2015/8/21
*@功能 新消息提示的定位框
**/
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

var FixedFun = function(element) {
////默认位置
var top = opts.top;
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
"right":right,
"top":top
});

////当窗口大小改变时（或改变后）resize()
$(window).resize(function(){
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
"right":right
});
});

////每当元素的滚动位置的变化时，该元素就会触发scroll事件。scroll()
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {

if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});

//关闭提示框
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};

//默认样式
$.fn.capacityFixed.deflunt={
right : 100,//相对于页面宽度的右边定位
top:100,
pageWidth : 960
};
})(jQuery);

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="capacityFixed.js"></script>
<style type="text/css">
.float {
width:200px;
padding:5px 10px;
border:1px solid #ffecb0;
font-size:12px;
background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);
box-shadow:1px 1px 2px rgba(0,0,0,.2);
position:absolute; -moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

.float .close-ico{
position:absolute;
top:5px;
right:5px;
display:block;
width:16px;
height:16px;
background-image:url(images/close-ico.png);
text-indent:-900px;
overflow:hidden;
}
.float .close-ico:hover{ background-position:0 -16px;}
.float p{ line-height:22px}
</style>

<script type="text/javascript">
$(function(){
$("#float").capacityFixed();
});
</script>
</head>

<body>
<div class="float" id="float">
<p id="WB_unread_msg_1303891276971">1条新私信，<a href="javascript:void(0);">查看私信</a></p>
<p id="WB_unread_msg_1303891276972">10条新消息，<a href="javascript:void(0);">查看消息</a></p>
<p id="WB_unread_msg_1303891276973">108个新粉丝，<a href="javascript:void(0);">查看粉丝</a></p>
<a href="#" title="关闭" id="" class="close-ico">关闭</a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航