ホームページ ウェブフロントエンド jsチュートリアル 水色のマウスドラッグ選択ボックスのJavaScript実装 example_javascriptスキル

水色のマウスドラッグ選択ボックスのJavaScript実装 example_javascriptスキル

May 16, 2016 pm 04:00 PM
javascript 選択ボックス マウスドラッグ

この記事の例では、JavaScript を使用して水色のマウスドラッグ選択ボックスを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

#rectBox

{

background:#CCFFFF;

border:2px solid #0099FF;

filter:alpha(opacity=30);

opacity:0.3;

position:absolute;

}

</style>

<head>

<title>一个鼠标选择框</title>

<script type="text/javascript">

function Rect()

{

this.doc = document.documentElement;

if(!this.doc) return;

this.startX = '';

this.startY = '';

this.rect = null;

rectSelf = this;

}

Rect.prototype.down = function(e)

{

var e = e?e:window.event;

rectSelf.startX = e.clientX?e.clientX + document.body.scrollLeft:e.pageX;

rectSelf.startY = e.clientY?e.clientY + document.body.scrollTop:e.pageY;

rectSelf.showRect(true);

}

Rect.prototype.up = function(e)

{

rectSelf.rectBox.style.width = '0px';

rectSelf.rectBox.style.height = '0px';

rectSelf.showRect(false);

}

Rect.prototype.move = function(e)

{

if(rectSelf.rectBox)

{

var currentX = e.clientX?e.clientX + rectSelf.doc.scrollLeft:e.pageX;

var currentY = e.clientY?e.clientY + rectSelf.doc.scrollTop:e.pageY;

rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px';

rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px';

if(currentX - rectSelf.startX < 0)

{

rectSelf.rectBox.style.left = currentX + 'px';

}

if(currentY - rectSelf.startY < 0)

{

rectSelf.rectBox.style.top = currentY + 'px';

}

//document.title = "left:"+currentX + 'px '+"top:"+currentY + 'px ';

}

}

Rect.prototype.showRect = function(bool)

{

if(bool)

{

if(!this.rectBox)

{

this.rectBox = document.createElement("div");

this.rectBox.id = "rectBox";

document.body.appendChild(this.rectBox);

}

this.rectBox.style.display = "block";

this.rectBox.style.left = this.startX + 'px';

this.rectBox.style.top = this.startY + 'px';

this.addEventListener(this.doc , 'mousemove' , this.move);

}

else

{

if(this.rectBox)

{

this.rectBox.style.display = "none";

}

this.removeEventListener(this.doc , 'mousemove' , this.move);

}

}

Rect.prototype.addEventListener = function(o,e,l)

{

if (o.addEventListener) {

o.addEventListener(e,l,false);

} else if (o.attachEvent) {

o.attachEvent('on'+e,function() {

l(window.event);

});

}

}

Rect.prototype.removeEventListener = function(o,e,l)

{

if (o.removeEventListener) {

o.removeEventListener(e,l,false);

} else if (o.detachEvent) {

o.detachEvent('on'+e,function() {

l(window.event);

});

}

}

window.onload = function()

{

var oRect = new Rect();

oRect.addEventListener(oRect.doc , 'mousedown' , oRect.down);

oRect.addEventListener(oRect.doc , 'mouseup' , oRect.up);

}

</script>

</head>

<body>

<h1>拖动你的鼠标就会出现选择框</h1>

</body>

</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

JavaScriptでinsertBeforeを使用する方法

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを簡単に取得する方法

See all articles