Rumah > hujung hadapan web > tutorial js > JS menyedari kesan seretan tetingkap yang cantik (boleh menukar saiz, memaksimumkan, meminimumkan, menutup)_kemahiran javascript

JS menyedari kesan seretan tetingkap yang cantik (boleh menukar saiz, memaksimumkan, meminimumkan, menutup)_kemahiran javascript

WBOY
Lepaskan: 2016-05-16 15:37:00
asal
2337 orang telah melayarinya

本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下:

这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭)

特点:

① 窗口可以拖动;
② 窗口可以通过八个方向改变大小;
③ 窗口可以最小化、最大化、还原、关闭;
④ 限制窗口最小宽度/高度。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/

具体代码如下:

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

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<!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>

<style type="text/css">

body,div,h2{margin:0;padding:0;}

body{background:url(images/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}

#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}

#drag .title{position:relative;height:27px;margin:5px;}

#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}

#drag .title div{position:absolute;height:19px;top:2px;right:0;}

#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(images/tool.png) no-repeat;}

a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}

a.open:hover{background-position:0 -29px;}

#drag .title a.min{background-position:-29px 0;}

#drag .title a.min:hover{background-position:-29px -29px;}

#drag .title a.max{background-position:-60px 0;}

#drag .title a.max:hover{background-position:-60px -29px;}

#drag .title a.revert{background-position:-149px 0;display:none;}

#drag .title a.revert:hover{background-position:-149px -29px;}

#drag .title a.close{background-position:-89px 0;}

#drag .title a.close:hover{background-position:-89px -29px;}

#drag .content{overflow:auto;margin:0 5px;}

#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(images/resize.png) no-repeat;}

#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}

#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}

#drag .resizeR{right:0;}

#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}

#drag .resizeT{top:0;}

#drag .resizeB{bottom:0;}

#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}

#drag .resizeLT{top:0;left:0;cursor:nw-resize;}

#drag .resizeTR{top:0;right:0;cursor:ne-resize;}

#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}

</style>

<script type="text/javascript">

/*-------------------------- +

 获取id, class, tagName

 +-------------------------- */

var get = {

  byId: function(id) {

    return typeof id === "string" &#63; document.getElementById(id) : id

  },

  byClass: function(sClass, oParent) {

    var aClass = [];

    var reClass = new RegExp("(^| )" + sClass + "( |$)");

    var aElem = this.byTagName("*", oParent);

    for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);

    return aClass

  },

  byTagName: function(elem, obj) {

    return (obj || document).getElementsByTagName(elem)

  }

};

var dragMinWidth = 250;

var dragMinHeight = 124;

/*-------------------------- +

 拖拽函数

 +-------------------------- */

function drag(oDrag, handle)

{

  var disX = dixY = 0;

  var oMin = get.byClass("min", oDrag)[0];

  var oMax = get.byClass("max", oDrag)[0];

  var oRevert = get.byClass("revert", oDrag)[0];

  var oClose = get.byClass("close", oDrag)[0];

  handle = handle || oDrag;

  handle.style.cursor = "move";

  handle.onmousedown = function (event)

  {

    var event = event || window.event;

    disX = event.clientX - oDrag.offsetLeft;

    disY = event.clientY - oDrag.offsetTop;

    document.onmousemove = function (event)

    {

      var event = event || window.event;

      var iL = event.clientX - disX;

      var iT = event.clientY - disY;

      var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;

      var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;

      iL <= 0 && (iL = 0);

      iT <= 0 && (iT = 0);

      iL >= maxL && (iL = maxL);

      iT >= maxT && (iT = maxT);

      oDrag.style.left = iL + "px";

      oDrag.style.top = iT + "px";

      return false

    };

    document.onmouseup = function ()

    {

      document.onmousemove = null;

      document.onmouseup = null;

      this.releaseCapture && this.releaseCapture()

    };

    this.setCapture && this.setCapture();

    return false

  }; 

  //最大化按钮

  oMax.onclick = function ()

  {

    oDrag.style.top = oDrag.style.left = 0;

    oDrag.style.width = document.documentElement.clientWidth - 2 + "px";

    oDrag.style.height = document.documentElement.clientHeight - 2 + "px";

    this.style.display = "none";

    oRevert.style.display = "block";

  };

  //还原按钮

  oRevert.onclick = function ()

  {   

    oDrag.style.width = dragMinWidth + "px";

    oDrag.style.height = dragMinHeight + "px";

    oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";

    oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";

    this.style.display = "none";

    oMax.style.display = "block";

  };

  //最小化按钮

  oMin.onclick = oClose.onclick = function ()

  {

    oDrag.style.display = "none";

    var oA = document.createElement("a");

    oA.className = "open";

    oA.href = "javascript:;";

    oA.title = "还原";

    document.body.appendChild(oA);

    oA.onclick = function ()

    {

      oDrag.style.display = "block";

      document.body.removeChild(this);

      this.onclick = null;

    };

  };

  //阻止冒泡

  oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)

  {

    this.onfocus = function () {this.blur()};

    (event || window.event).cancelBubble = true 

  };

}

/*-------------------------- +

 改变大小函数

 +-------------------------- */

function resize(oParent, handle, isLeft, isTop, lockX, lockY)

{

  handle.onmousedown = function (event)

  {

    var event = event || window.event;

    var disX = event.clientX - handle.offsetLeft;

    var disY = event.clientY - handle.offsetTop; 

    var iParentTop = oParent.offsetTop;

    var iParentLeft = oParent.offsetLeft;

    var iParentWidth = oParent.offsetWidth;

    var iParentHeight = oParent.offsetHeight;

    document.onmousemove = function (event)

    {

      var event = event || window.event;

      var iL = event.clientX - disX;

      var iT = event.clientY - disY;

      var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;

      var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;          var iW = isLeft &#63; iParentWidth - iL : handle.offsetWidth + iL;

      var iH = isTop &#63; iParentHeight - iT : handle.offsetHeight + iT;

      isLeft && (oParent.style.left = iParentLeft + iL + "px");

      isTop && (oParent.style.top = iParentTop + iT + "px");

      iW < dragMinWidth && (iW = dragMinWidth);

      iW > maxW && (iW = maxW);

      lockX || (oParent.style.width = iW + "px");

      iH < dragMinHeight && (iH = dragMinHeight);

      iH > maxH && (iH = maxH);

      lockY || (oParent.style.height = iH + "px");

      if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;

      return false

    };

    document.onmouseup = function ()

    {

      document.onmousemove = null;

      document.onmouseup = null;

    };

    return false;

  }

};

window.onload = window.onresize = function ()

{

  var oDrag = document.getElementById("drag");

  var oTitle = get.byClass("title", oDrag)[0];

  var oL = get.byClass("resizeL", oDrag)[0];

  var oT = get.byClass("resizeT", oDrag)[0];

  var oR = get.byClass("resizeR", oDrag)[0];

  var oB = get.byClass("resizeB", oDrag)[0];

  var oLT = get.byClass("resizeLT", oDrag)[0];

  var oTR = get.byClass("resizeTR", oDrag)[0];

  var oBR = get.byClass("resizeBR", oDrag)[0];

  var oLB = get.byClass("resizeLB", oDrag)[0];

  drag(oDrag, oTitle);

  //四角

  resize(oDrag, oLT, true, true, false, false);

  resize(oDrag, oTR, false, true, false, false);

  resize(oDrag, oBR, false, false, false, false);

  resize(oDrag, oLB, true, false, false, false);

  //四边

  resize(oDrag, oL, true, false, false, true);

  resize(oDrag, oT, false, true, true, false);

  resize(oDrag, oR, false, false, false, true);

  resize(oDrag, oB, false, false, true, false);

  oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";

  oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";

}

</script>

</head>

<body>

<div id="drag">

 <div class="title">

  <h2>这是一个可以拖动的窗口</h2>

  <div>

   <a class="min" href="javascript:;" title="最小化"></a>

   <a class="max" href="javascript:;" title="最大化"></a>

   <a class="revert" href="javascript:;" title="还原"></a>

   <a class="close" href="javascript:;" title="关闭"></a>

  </div>

 </div>

 <div class="resizeL"></div>

 <div class="resizeT"></div>

 <div class="resizeR"></div>

 <div class="resizeB"></div>

 <div class="resizeLT"></div>

 <div class="resizeTR"></div>

 <div class="resizeBR"></div>

 <div class="resizeLB"></div>

 <div class="content">

  ① 窗口可以拖动;<br />

  ② 窗口可以通过八个方向改变大小;<br />

  ③ 窗口可以最小化、最大化、还原、关闭;<br />

  ④ 限制窗口最小宽度/高度。

 </div>

</div>

</body>

</html>

Salin selepas log masuk

希望本文所述对大家的JavaScript程序设计有所帮助。

Label berkaitan:
js
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan