Cet article décrit la méthode d'implémentation de l'effet de traînée de la couche de glisser du module igooglevdrag par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS implémente l'effet de couche de dragste
<style type = "text / css">
* {margin: 0px; rembourrage: 0px;}
Corps {position: relative; Largeur: 780px; hauteur: 800px; Border: 1px rouge solide}
.Drag {largeur: 200px; hauteur: 100px; Border: 1px solide # 000; marge: 20px; Contexte: #ffff}
.Drag H1 {margin: 0px; rembourrage: 0px; taille de police: 12px; hauteur: 18px; hauteur de ligne: 18px; Contexte: # E0E7F3; Texte-indent: 20px; curseur: déplacer;}
.Center {marge: 200px; Border: 3px Red solide}
</ style>
<script type = "text / javascript"> </ script>
</ head>
<body>
<div>
<h1> <strong> www.baidu.com </strong> </h1>
</div>
<div>
<h1> www.163.com </h1>
</div>
<div>
<h1> <strong> www.vevb.com </strong> </h1>
</div>
<div> <h1> Test 2 </h1> </div>
<div> <h1> Test 3 </h1> </div>
<div> <h1> Test 4 </h1> </div>
<div> <h1> Test 5 </h1> </div>
</docy>
</html>
<script type = "text / javascript">
/ *
Auteur: Popper.W
Version: v2.0
* /
var dragzindexnumber = 0;
fonction glisser (obj) {
var ox, oy, ex, xy, tag = 0, masque = 0;
if (tag == 0) {
obj.onmousedown = fonction (e)
{
if (mask == 1) {return; }
obj.style.zindex = dragzindexnumber ++;
transp (obj, "start")
tag = 1;
var e = e || window.event;
ex = getEventoffset (e) .offsetx;
ey = getEventoffset (e) .offsety;
ox = parseInt (obj.offsetleft);
oy = parseInt (obj.offsetTop);
tempdiv = document.CreateElement ("div");
avec (tempdiv.style)
{
width = obj.offsetwidth + "px";
hauteur = obj.offsetheight + "px";
Border = "1px en pointillé rouge";
position = "absolu";
Left = obj.offsetleft + "px";
top = obj.offsettop + "px";
zindex = 999;
}
document.body.ApendChild (tempdiv);
this.ele = tempdiv;
fdragstart (tempdiv);
document.body.onmousemove = fonction (e) {
if (tag == 1)
{
var e = e || window.event;
tempdiv.style.left = parseInt (e.clientx) -ex + "px";
tempdiv.style.top = parseInt (e.clienty) -ey + "px";
}
else {if (! tempdiv == null) tempdiv.parentnode.removechild (tempdiv)}
}
tempdiv.onmouseup = fonction (e)
{
var e = e || window.event;
fdragend (tempdiv);
obj.style.position = "Absolute";
Film (OBJ, ParseInt (E.Clientx) -EX-19, ParseInt (E.Clienty) -EY-20);
tempdiv.parentnode.removechild (tempdiv);
tag = 0;
}
}
}
}
Function Movie (O, L, T) {
var a = 1;
masque = 1;
var ol = paSeInt (o.offsetleft);
var ot = parseInt (o.offsetTop);
var itimer = setInterval (function () {
if (a == 10)
{
transp (o, "end");
masque = 0;
ClearInterval (itimer);
}
o.style.left = ol + a * (l-ol) / 10 + "px";
o.style.top = ot + a * (t-ot) / 10 + "px";
a ++;
}, 20);
}
fonction fcanclebubble (e)
{
var e = window.event || e;
if (e.PreventDefault) e.PreventDefault ();
else e.raTurnValue = false;
}
fonction transp (o, mode) {
if (mode == "start") {
if (document.all) {
o.style.filter = "alpha (opacité = 50)";
}autre{
o.style.opacity = 0,5;
}
}
autre {
if (document.all) {
o.style.filter = "alpha (opacité = 100)";
}autre{
o.style.opacity = 1;
}
}
}
Fonction getoffset (EVT)
{
var cible = evt.target;
if (target.offsetleft == undefined)
{
Target = Target.ParentNode;
}
var pagecoord = getPageCoord (cible);
var EventCoord =
{
x: window.pagexoffset + evt.clientx,
y: window.pageyoffset + evt.clienty
};
var offset =
{
offsetx: eventcoord.x - pagecoord.x,
Offsety: EventCoord.y - Pagecoord.y
};
return offset;
}
fonction getpagecoord (élément)
{
var coord = {x: 0, y: 0};
Tandis que (élément)
{
coord.x + = élément.offsetLeft;
coordonnée.y + = élément.offsetTop;
element = element.offsetparent;
}
Coord de retour;
}
fonction getEventoffset (EVT)
{
var msg = "";
if (evt.offsetx == Undefined)
{
var evtoffSets = getoffset (evt);
msg = {offsetx: evtoffsets.offsetx, offSety: evtoffsets.offSety};
}
autre
{
msg = {offsetx: evt.offsetx, offsety: evt.offSety};
}
retour msg;
}
fonction fdragstart (xele)
{
commutateur (fckbrs ())
{
Cas 3:
window.getSelection (). RemoveallRanges ();
casser;
défaut:
Xele.setCapture ();
casser;
}
}
fonction fdragend (xele)
{
commutateur (fckbrs ())
{
Cas 3:
window.getSelection (). RemoveallRanges ();
casser;
défaut:
Xele.ReleSeaCapture ();
casser;
}
}
fonction fckbrs ()
{
Switch (Navigator.Appname)
{
Cas «opéra»: retour 2;
Case 'netscape': retour 3;
par défaut: return 1;
}
}
var élément = document.getElementsByTAGName ("div");
pour (var i = 0; i <element.length; i ++) {
if (élément [i] .classname == "glisser") {
glisser (élément [i])}
}
</cript>
J'espère que cet article sera utile à la programmation JavaScript de tous.