-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path网页模块固定位置.txt
142 lines (128 loc) · 5.27 KB
/
网页模块固定位置.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
笔记原地址：
http://www.w3cfuns.com/notes/13600/06fe8c339eb268b25c503e2b2394f006.html
现同步至github
工作需要。网上下了个jquery插件，以备后用
HTML 代码
var sliderBar = {};
sliderBar.addSlideBar = function (dStyle, location) {
if (location == "" || location == null) { location = "rightmiddle"; }
//添加插件
jQuery.fn.floatdiv = function (location) {
//判断浏览器版本
var isIE6 = false;
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
if (Sys.ie && Sys.ie == "6.0") {
isIE6 = true;
}
var windowWidth, windowHeight;//窗口的高和宽
//取得窗口的高和宽
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
return this.each(function () {
var loc;//层的绝对定位位置
var wrap = $("<div></div>");
var top = -1;
if (location == undefined || location.constructor == String) {
switch (location) {
case ("rightbottom")://右下角
loc = { right: "0px", bottom: "0px" };
break;
case ("leftbottom")://左下角
loc = { left: "0px", bottom: "0px" };
break;
case ("lefttop")://左上角
loc = { left: "0px", top: "0px" };
top = 0;
break;
case ("righttop")://右上角
loc = { right: "0px", top: "0px" };
top = 0;
break;
case ("middletop")://居中置顶
loc = { left: windowWidth / 2 - $(this).width() / 2 + "px", top: "0px" };
top = 0;
break;
case ("middlebottom")://居中置低
loc = { left: windowWidth / 2 - $(this).width() / 2 + "px", bottom: "0px" };
break;
case ("leftmiddle")://左边居中
loc = { left: "0px", top: windowHeight / 2 - $(this).height() / 2 + "px" };
top = windowHeight / 2 - $(this).height() / 2;
break;
case ("rightmiddle")://右边居中
loc = { right: "0px", top: windowHeight / 2 - $(this).height() / 2 + "px" };
top = windowHeight / 2 - $(this).height() / 2;
break;
case ("middle")://居中
var l = 0;//居左
var t = 0;//居上
l = windowWidth / 2 - $(this).width() / 2;
t = windowHeight / 2 - $(this).height() / 2;
top = t;
loc = { left: l + "px", top: t + "px" };
break;
default://默认为右下角
location = "rightbottom";
loc = { right: "0px", bottom: "0px" };
break;
}
} else {
loc = location;
//alert(loc.bottom);
var str = loc.top;
//09-11-5修改：加上top为空值时的判断
if (typeof (str) != 'undefined') {
str = str.replace("px", "");
top = str;
}
}
/*fied ie6 css hack*/
if (isIE6) {
if (top >= 0) {
wrap = $("<div style=\"top:expression(documentElement.scrollTop+" + top + ");\"></div>");
} else {
wrap = $("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
}
}
$("body").append(wrap);
wrap.css(loc).css({
position: "fixed",
z_index: "999"
});
if (isIE6) {
wrap.css("position", "absolute");
$("body").css("background-attachment", "fixed").css("background-image", "url(n1othing.txt)");
}
//将要固定的层添加到固定层里
$(this).appendTo(wrap);
});
};
jQuery.fn.addHtml = function (html) {
var that = $(this);
$(html).appendTo(that);
return this;
}
console.log(dStyle);
var temp = $(dStyle);
temp.appendTo("body");
temp.floatdiv(location);
return temp;
}
自己又封装了一层，方便调用
HTML 代码
123
<script type="text/javascript">
sliderBar.addSlideBar("<div id='fixedSlide' style='width:100px;border:1px solid green;'></div>","leftmiddle").addHtml("<img src='img/1.jpg' style='width:90px;padding:5px;'>").addHtml("<img src='img/2.jpg' style='width:90px;padding:5px;'>");
</script>