cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kemahiran contoh_javascript lapisan seret yang mudah dan serasi sepenuhnya

JS melaksanakan kemahiran contoh_javascript lapisan seret yang mudah dan serasi sepenuhnya

WBOY
WBOYasal
2016-05-16 15:59:20848semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan lapisan seretan yang mudah dan serasi sepenuhnya dengan JS. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Ini adalah kod seret lapisan JS yang paling ringkas, serasi sepenuhnya dengan IE, FF, Opera, Safari... Setiap penyemak imbas mempunyai kaedah pertimbangan dan pelaksanaan yang sepadan, anda hanya perlu menyalin kod ke halaman web anda Ia boleh digunakan dalam . Rakan yang mempunyai kemahiran lanjutan boleh terus mengubah suai dan menambah lebih banyak kaedah untuk menjadikannya lebih berkuasa. 

<!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>JS拖动层</title>
</head>
<body>
<div id="f" style="position: absolute; width: 216px; height: 138px; 
background-color: skyblue;font-size: 12px; top: 210px; left: 180px;
z-index: 101; border: solid 1px blue;">
<div id="title" style="background-color: Blue; cursor: move; 
height: 20px; color: #fff;font-size: 12px; padding-top: 5px;
padding-left: 10px;">层的标题</div>
层的内容
</div>
<script type="text/javascript">
var posX;
var posY;    
fdiv = document.getElementById("f");      
document.getElementById("title").onmousedown=function(e)
{
  if(!e) e = window.event; //IE
  posX = e.clientX - parseInt(fdiv.style.left);
  posY = e.clientY - parseInt(fdiv.style.top);
  document.onmousemove = mousemove;      
}
document.onmouseup = function()
{
  document.onmousemove = null;
}
function mousemove(ev)
{
  if(ev==null) ev = window.event;//IE
  fdiv.style.left = (ev.clientX - posX) + "px";
  fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
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
Artikel sebelumnya：Penjelasan terperinci tentang javascript mencipta jadual secara dinamik dan menambah kemahiran instance_javascript dataArtikel seterusnya：Penjelasan terperinci tentang javascript mencipta jadual secara dinamik dan menambah kemahiran instance_javascript data

Artikel berkaitan

Lihat lagi