hujung hadapan web
tutorial js
JS melaksanakan kemahiran effect_javascript tetingkap pop timbul boleh seret dan boleh ditutup
JS melaksanakan kemahiran effect_javascript tetingkap pop timbul boleh seret dan boleh ditutup
Contoh dalam artikel ini menerangkan pelaksanaan kesan tetingkap timbul yang boleh diseret dan boleh ditutup menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Jalankan contoh ini, klik pada teks, dan tetingkap akan muncul. Lapisan pop timbul ini boleh diseret dengan tetikus lapisan teks pop timbul dan lapisan gambar timbul menggunakan kaedah ini Sila pilih mengikut pilihan anda.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-draw-close-able-alert-dlg-demo/
Kod khusus adalah seperti berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
.botton{ color:#F00; cursor:pointer;}
.mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
#cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
#cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
#cwxCn{ background:#FFF; display:block;}
.imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
<div class="botton" id="testClick">点击测试</div>
asdasdasdasdasdasdasd<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div>
</div>
<script type="text/javascript">
C$('testClick').onclick = function(){
var neirong = '<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></div>';
cwxbox.box.show(neirong);
}
C$('testClick1').onclick = function(){
var neirong = '123456789132456789';
cwxbox.box.show(neirong,3);
}
function C$(id){return document.getElementById(id);}
//定义窗体对象
var cwxbox = {};
cwxbox.box = function(){
var bg,wd,cn,ow,oh,o = true,time = null;
return {
show:function(c,t,w,h){
if(o){
bg = document.createElement('div'); bg.id = 'cwxBg';
wd = document.createElement('div'); wd.id = 'cwxWd';
cn = document.createElement('div'); cn.id = 'cwxCn';
document.body.appendChild(bg);
document.body.appendChild(wd);
wd.appendChild(cn);
bg.onclick = cwxbox.box.hide;
window.onresize = this.init;
window.onscroll = this.scrolls;
o = false;
}
if(w && h){
var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>';
}else{
var inhtml = c;
}
cn.innerHTML = inhtml;
oh = this.getCss(wd,'offsetHeight');
ow = this.getCss(wd,'offsetWidth');
this.init();
this.alpha(bg,50,1);
this.drag(wd);
if(t){
time = setTimeout(function(){cwxbox.box.hide()},t*1000);
}
},
hide:function(){
cwxbox.box.alpha(wd,0,-1);
clearTimeout(time);
},
init:function(){
bg.style.height = cwxbox.page.total(1)+'px';
bg.style.width = '';
bg.style.width = cwxbox.page.total(0)+'px';
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
wd.style.left=(cwxbox.page.width() - ow)/2+'px';
},
scrolls:function(){
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
},
alpha:function(e,a,d){
clearInterval(e.ai);
if(d==1){
e.style.opacity=0;
e.style.filter='alpha(opacity=0)';
e.style.display = 'block';
}
e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40);
},
ta:function(e,a,d){
var anum = Math.round(e.style.opacity*100);
if(anum == a){
clearInterval(e.ai);
if(d == -1){
e.style.display = 'none';
if(e == wd){
this.alpha(bg,0,-1);
}
}else{
if(e == bg){
this.alpha(wd,100,1);
}
}
}else{
var n = Math.ceil((anum+((a-anum)*.5)));
n = n == 1 ? 0 : n;
e.style.opacity=n/100;
e.style.filter='alpha(opacity='+n+')';
}
},
getCss:function(e,n){
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null);
if(e_style.display === 'none'){
var clonDom = e.cloneNode(true);
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
document.body.appendChild(clonDom);
var wh = clonDom[n];
clonDom.parentNode.removeChild(clonDom);
return wh;
}
return e[n];
},
drag:function(e){
var startX,startY,mouse;
mouse = {
mouseup:function(){
if(e.releaseCapture)
{
e.onmousemove=null;
e.onmouseup=null;
e.releaseCapture();
}else{
document.removeEventListener("mousemove",mouse.mousemove,true);
document.removeEventListener("mouseup",mouse.mouseup,true);
}
},
mousemove:function(ev){
var oEvent = ev||event;
e.style.left = oEvent.clientX - startX + "px";
e.style.top = oEvent.clientY - startY + "px";
}
}
e.onmousedown = function(ev){
var oEvent = ev||event;
startX = oEvent.clientX - this.offsetLeft;
startY = oEvent.clientY - this.offsetTop;
if(e.setCapture)
{
e.onmousemove= mouse.mousemove;
e.onmouseup= mouse.mouseup;
e.setCapture();
}else{
document.addEventListener("mousemove",mouse.mousemove,true);
document.addEventListener("mouseup",mouse.mouseup,true);
}
}
}
}
}()
cwxbox.page = function(){
return{
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}()
</script>
</body>
</html>
Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser? Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser pada PC?
Mar 14, 2024 am 09:16 AM
Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser? Saya percaya bahawa ramai pengguna menggunakan Pelayar 360, tetapi pelayar ini kadangkala memaparkan iklan, yang membuatkan ramai pengguna sangat tertekan Biarkan tapak ini memperkenalkan dengan teliti kepada pengguna cara untuk Mematikan iklan yang disyorkan oleh Pelayar 360 pada komputer anda. Bagaimana untuk mematikan iklan yang disyorkan oleh 360 Browser pada komputer anda? Kaedah 1: 1. Buka 360 Safe Browser. 2. Cari logo "tiga bar mendatar" di penjuru kanan sebelah atas dan klik [Tetapan]. 3. Cari [Makmal] dalam bar tugas di sebelah kiri antara muka pop timbul, dan tandakan [Dayakan fungsi "360 Hotspot Information"]. Kaedah 2: 1. Klik dua kali pertama
Apakah yang perlu saya lakukan jika tiada peringatan timbul untuk acara kalendar dalam Win10 Bagaimana untuk memulihkan jika peringatan acara kalendar hilang dalam Win10?
Jun 09, 2024 pm 02:52 PM
Kalendar boleh membantu pengguna merekodkan jadual anda dan juga menetapkan peringatan Walau bagaimanapun, ramai pengguna bertanya apa yang perlu dilakukan jika peringatan acara kalendar tidak muncul dalam Windows 10? Pengguna boleh menyemak status kemas kini Windows dahulu atau mengosongkan cache Windows App Store untuk melaksanakan operasi. Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna analisis masalah peringatan acara kalendar Win10 yang tidak muncul. Untuk menambah acara kalendar, klik program "Kalendar" dalam menu sistem. Klik butang kiri tetikus pada tarikh dalam kalendar. Masukkan nama acara dan masa peringatan dalam tetingkap pengeditan, dan klik butang "Simpan" untuk menambah acara. Menyelesaikan masalah peringatan acara kalendar win10 tidak muncul
Bagaimana untuk mematikan Sina News Express Bagaimana untuk mematikan fungsi ekspres?
Mar 12, 2024 pm 09:46 PM
Perisian Sina News menyediakan banyak maklumat tajuk berita, yang pada asasnya didorong oleh platform rasmi Kandungan setiap artikel berita adalah sahih Anda boleh meleret ke atas dan ke bawah untuk mencari dan menyemak imbas dengan satu klik, menjadikan suasana bacaan keseluruhan lebih selesa . Masukkan nombor telefon mudah alih anda untuk log masuk dalam talian Saluran berita dalam medan yang berbeza dibuka menyemak imbas. Kandungan berita adalah semua Jika anda berminat, anda juga boleh mematikan fungsi ekspres berita, supaya ia tidak akan terjejas Anda boleh membukanya pada bila-bila masa dan pratonton tajuk berita besar-besaran Sekarang editor akan menyediakan butiran kepada pengguna Sina News dalam talian Langkah-langkah operasi fungsi penghantaran ekspres. Cari Berita Sina dan klik pada sudut kanan bawah
Bagaimana untuk mematikan Pusat Keselamatan dalam Windows 11
Mar 28, 2024 am 10:21 AM
Windows 11 ialah versi sistem pengendalian terkini yang dilancarkan oleh Microsoft Berbanding dengan versi sebelumnya, Windows 11 mempunyai pengurusan dan pemantauan keselamatan sistem yang lebih ketat. Pusat Keselamatan boleh membantu pengguna mengurus dan memantau status keselamatan sistem untuk memastikan sistem dilindungi daripada perisian hasad dan ancaman keselamatan lain. Walaupun Pusat Keselamatan penting untuk melindungi keselamatan sistem, kadangkala pengguna mungkin mahu mematikan Pusat Keselamatan kerana keperluan peribadi atau sebab lain. Artikel ini akan memperkenalkan cara menggunakan W
Penjelasan terperinci tentang cara mematikan Pusat Keselamatan Windows 11
Mar 27, 2024 pm 03:27 PM
Dalam sistem pengendalian Windows 11, Pusat Keselamatan ialah fungsi penting yang membantu pengguna memantau status keselamatan sistem, mempertahankan daripada perisian hasad dan melindungi privasi peribadi. Walau bagaimanapun, kadangkala pengguna mungkin perlu mematikan Pusat Keselamatan buat sementara waktu, seperti semasa memasang perisian tertentu atau melakukan penalaan sistem. Artikel ini akan memperkenalkan secara terperinci cara untuk mematikan Pusat Keselamatan Windows 11 untuk membantu anda mengendalikan sistem dengan betul dan selamat. 1. Bagaimana untuk mematikan Pusat Keselamatan Windows 11 Dalam Windows 11, mematikan Pusat Keselamatan tidak
Cara menutup pembayaran tanpa kata laluan dalam tutorial Kuaishou Kuaishou tentang cara menutup pembayaran tanpa kata laluan
Mar 23, 2024 pm 09:21 PM
Kuaishou ialah pemain video yang sangat baik Fungsi pembayaran tanpa kata laluan di Kuaishou sangat dikenali oleh semua orang. Ia boleh membantu kami dalam kehidupan seharian, terutamanya apabila membeli barangan yang kami perlukan di platform . Sekarang kita perlu membatalkannya. Bagaimana kita boleh membatalkan fungsi pembayaran tanpa kata laluan dengan berkesan itu bersama-sama. Mari kita lihat keseluruhan panduan di laman web ini, saya harap ia dapat membantu semua orang. Tutorial tentang cara menutup pembayaran tanpa kata laluan di Kuaishou 1. Buka aplikasi Kuaishou dan klik pada tiga garisan mendatar di sudut kiri atas. 2. Klik Kuaishou Store. 3. Dalam bar pilihan di atas, cari pembayaran tanpa kata laluan dan klik padanya. 4. Klik untuk menyokong
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Bagaimanakah saya boleh menghidupkan mod mesej peribadi apabila pihak lain dalam mesej peribadi TikTok telah mematikan mod mesej peribadi? Bolehkah saya melihat sama ada orang yang saya hantar mesej peribadi telah mematikan mod mesej peribadi?
Mar 28, 2024 am 08:01 AM
Douyin ialah platform sosial video pendek popular yang membolehkan pengguna merakam kehidupan mereka dan berkongsi kebahagiaan mereka. Fungsi pemesejan peribadi memainkan peranan penting dalam Douyin dan merupakan salah satu cara utama untuk pengguna berinteraksi antara satu sama lain. Kadangkala, pengguna mungkin menghadapi situasi di mana pihak lain telah mematikan mod mesej peribadi, mengakibatkan ketidakupayaan untuk menghantar mesej. 1. Bagaimanakah saya boleh menghidupkan mod mesej peribadi jika pihak lain dalam mesej peribadi Douyin telah mematikan mod mesej peribadi? 1. Sahkan sama ada pihak lain telah mendayakan tetapan privasi Pertama, kami harus mengesahkan sama ada pihak lain telah mendayakan tetapan privasi, yang mungkin telah menyekat penerimaan mesej peribadi. Jika mereka mempunyai tetapan yang hanya membenarkan mesej peribadi daripada kenalan, kami boleh cuba menghubungi mereka melalui cara lain, seperti melalui rakan bersama atau interaksi di platform media sosial. 2. Hantar permintaan rakan Jika pihak lain belum menghidupkan tetapan privasi, maka kami
