html5 模仿苹果桌面,JavaScript模仿桌面窗口

这个大概花了YQ一天多时间(虽然含杂大量酱油时间)，第一次做，惊现各种debug。网上说的果然没错——debug的时间比写程序的时间多……明显是因为自己没有在敲代码之前做好准备，忽略了很多细节，引以为戒。废话少说，以下是这次自学的笔记：?(￣?￣)?

添加了双击缩小放大窗口 & 改变窗口大小的预览效果

［博客文章网址，可运行代码查看效果］ == > ver = function() {

201

if(bMousedowning) return false;

202

changeCursor(true, this.index);

203

};

204

boxSide[i].onmouseout = function() {

205

if(bMousedowning) return false;

206

changeCursor(false, this.index);

207

};

208

boxSide[i].onmousedown = function(event) {

209

var event = event || window.event;

210

var index = this.index;

211

var aBoxPrevious = new Array();         //记录box上一次的状态

212

aBoxPrevious["clientX"] = event.clientX;

213

aBoxPrevious["clientY"] = event.clientY;

214

aBoxPrevious["left"] = box.offsetLeft;

215

aBoxPrevious["top"]= box.offsetTop;

216

aBoxPrevious["width"] = box.offsetWidth;

217

aBoxPrevious["height"] = box.offsetHeight;

218

bMousedowning = true;

219

bSizeChanging = true;

220

showVirtualBox(virtualBox, aBoxPrevious);

221

document.onmousemove = function(event) {

222

if(!bSizeChanging) return false;

223

changeVirtualBoxSize(event, aBoxPrevious, index);

224

};

225

document.onmouseup = function() {

226

changeBoxSize(virtualBox)

227

hideVirtualBox(virtualBox);

228

bSizeChanging = false;

229

bMousedowning = false;

230

changeCursor(false, index);

231

};

232

return false;

233

};

234

}

235

//改变鼠标指针样式

236

var changeCursor = function(bIsShowing, index) {

237

if(bIsShowing) {

238

var cursorStyle = ["n-resize","e-resize","s-resize","w-resize","ne-resize","se-resize","sw-resize","nw-resize"];

239

document.body.style.cursor = cursorStyle[index];

240

}

241

else {

242

document.body.style.cursor = "";

243

}

244

};

245

//显示预览DIV

246

var showVirtualBox = function(virtualBox, aBoxPrevious) {

247

with(virtualBox.style) {

248

display = "block";

249

top = aBoxPrevious["top"] + "px";

250

left = aBoxPrevious["left"] + "px";

251

width = aBoxPrevious["width"] + "px";

252

height = aBoxPrevious["height"] + "px";

253

}

254

}

255

//隐藏预览DIV

256

var hideVirtualBox = function(virtualBox) {

257

virtualBox.style.display = "none";

258

}

259

//改变box大小

260

var changeVirtualBoxSize = function(event, aBoxPrevious, index) {

261

var event = event || window.event;

262

var bTop = bRight = bBottom = bLeft = false;

263

//八个方向，分别为N、E、S、W、NE、SW、SW、NW

264

switch (index) {

265

case 0:

266

bTop = true;

267

break;

268

case 1:

269

bRight = true;

270

break;

271

case 2:

272

bBottom = true;

273

break;

274

case 3:

275

bLeft = true;

276

break;

277

case 4:

278

bTop = bRight = true;;

279

break;

280

case 5:

281

bRight = bBottom = true;

282

break;

283

case 6:

284

bBottom = bLeft = true;

285

break;

286

case 7:

287

bLeft = bTop = true;

288

break;

289

default:

290

break;

291

}

292

//向北改变高度

293

if(bTop) {

294

var newTopHeight = aBoxPrevious["height"] - (event.clientY - aBoxPrevious["clientY"]);

295

(newTopHeight < originalHeight) && (newTopHeight = originalHeight);

296

(newTopHeight > aBoxPrevious["top"] + aBoxPrevious["height"]) && (newTopHeight = aBoxPrevious["top"] + aBoxPrevious["height"]);

297

var newTop = aBoxPrevious["top"] + (event.clientY - aBoxPrevious["clientY"]);

298

(newTop > aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight) && (newTop = aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight);

299

(newTop < 0) && (newTop = 0);

300

virtualBox.style.top = newTop + "px";

301

virtualBox.style.height = newTopHeight - box.clientTop * 2 + "px";      //不能忽略border-width

302

bTop = false;

303

}

304

//向东改变宽度

305

if(bRight) {

306

var newRightWidth = aBoxPrevious["width"] + (event.clientX - aBoxPrevious["clientX"]);

307

(newRightWidth < originalWidth) && (newRightWidth = originalWidth);

308

(newRightWidth > document.body.scrollWidth - aBoxPrevious["left"]) && (newRightWidth = document.body.scrollWidth - aBoxPrevious["left"]);

309

virtualBox.style.width = newRightWidth - box.clientTop * 2 + "px";

310

bRight = false;

311

}

312

//向南改变高度

313

if(bBottom) {

314

var newBottomHeight = aBoxPrevious["height"] + (event.clientY - aBoxPrevious["clientY"]);

315

(newBottomHeight < originalHeight) && (newBottomHeight = originalHeight);

316

(newBottomHeight > document.body.scrollHeight - aBoxPrevious["top"]) && (newBottomHeight = document.body.scrollHeight - aBoxPrevious["top"]);

317

virtualBox.style.height = newBottomHeight  - box.clientTop * 2 + "px";

318

bBottom = false;

319

}

320

//向西改变宽度

321

if(bLeft) {

322

var newLeftWidth = aBoxPrevious["width"] - (event.clientX - aBoxPrevious["clientX"]);

323

(newLeftWidth < originalWidth) && (newLeftWidth = originalWidth);

324

(newLeftWidth > aBoxPrevious["left"] + aBoxPrevious["width"]) && (newLeftWidth = aBoxPrevious["left"] + aBoxPrevious["width"]);

325

var newLeft = aBoxPrevious["left"] + (event.clientX - aBoxPrevious["clientX"]);

326

(newLeft > aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth) && (newLeft = aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth);

327

(newLeft < 0) && (newLeft = 0);

328

virtualBox.style.left = newLeft + "px";

329

virtualBox.style.width = newLeftWidth - box.clientLeft * 2 + "px";

330

bLeft = false;

331

}

332

};

333

var changeBoxSize = function(virtualBox) {

334

with(box.style) {

335

left = virtualBox.style.left;

336

top = virtualBox.style.top;

337

width = virtualBox.style.width;

338

height = virtualBox.style.height;

339

}

340

}

341

};

342

//窗口按钮函数

343

boxButton = function() {

344

var box = document.getElementById("box");

345

var boxHeader = document.getElementById("boxHeader");

346

var aButton = document.getElementById("button").getElementsByTagName("div");

347

var showButton = document.getElementById("showButton");

348

var span = showButton.getElementsByTagName("span")[0];

349

var bIsMin = bIsMax = false;        //目前状态是否最小 or 最大

350

boxHeader.ondblclick = function() {

351

maximize();

352

}

353

for(var i = 0; i < aButton.length; i++) {

354

aButton[i].index = i;

355

aButton[i].onmouseover = function() {

356

aButton[this.index].style.background = "#AAA";

357

document.body.style.cursor = "pointer";

358

};

359

aButton[i].onmouseout = function() {

360

aButton[this.index].style.background = "";

361

document.body.style.cursor = ""

362

};

363

aButton[i].onclick = function() {

364

switch(this.index) {

365

case 0:

366

minimize();

367

break;

368

case 1:

369

maximize();

370

break;

371

case 2:

372

close();

373

break;

374

default:

375

break;

376

}

377

};

378

}

379

var minimize = function() {

380

if(bIsMin) {

381

resumeBox();

382

bIsMin = false;

383

}

384

else {

385

box.style.width = "89px";

386

box.style.height = "32px";

387

box.style.left = "2%";

388

box.style.top = box.style.top = document.body.offsetHeight - box.offsetHeight - 15 + "px";

389

bIsMin = true;

390

bIsMax = false;

391

}

392

};

393

var maximize = function() {

394

if(bIsMax) {

395

resumeBox();

396

bIsMax = false;

397

}

398

else {

399

box.style.width = document.body.scrollWidth - 10 + "px";

400

box.style.height = document.body.scrollHeight - 10 + "px";

401

box.style.left = "5px";

402

box.style.top = "5px";

403

bIsMax = true;

404

bIsMin = false;

405

}

406

};

407

var close = function() {

408

box.style.display = "none";

409

showButton.style.display = "block";

410

};

411

var resumeBox = function() {

412

box.style.top = "30%";

413

box.style.left = "40%";

414

box.style.width = "250px";

415

box.style.height = "150px";

416

};

417

showButton.onmousedown = function() {

418

span.innerHTML = "^o^";

419

};

420

showButton.onclick = function() {

421

this.style.display = "none";

422

span.innerHTML = ">_423

resumeBox();

424

box.style.display = "block";

425

};

426

};

427

window.onload = function() {

428

changeSize();

429

dragDiv();

430

boxButton();

431

};

432

《script》

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

>_<

居然关掉人家，讨厌~

快打开

455

456

457