Rumah hujung hadapan web tutorial js Idea dan kod CSS Javascript untuk melaksanakan kemahiran effect_javascript rolling shutter imej

Idea dan kod CSS Javascript untuk melaksanakan kemahiran effect_javascript rolling shutter imej

May 16, 2016 pm 04:33 PM
imej

Mereka yang telah menggunakan Arcgis mesti mempunyai ingatan mendalam tentang kesan roller blind dalam Arcmap, dan ingin mengalihkannya ke sistem WebGIS mereka sendiri Dengan idea yang sama, saya juga menyukai roller blind yang agak sejuk ini mengenai kesannya, dan ini dia, izinkan saya melaporkan hasilnya kepada semua orang

Melihat kesan ini, adakah ayam anda bergerak sedikit?

Pertama, bekas. Gunakan dua DIV untuk memaparkan imej daripada dua tempoh berbeza. Seterusnya tetapkan gaya dua bekas, kod:

#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
} 
Salin selepas log masuk


Dengan cara ini, imej dipaparkan di web.


Seterusnya, laksanakan kesan pengatup berguling. Untuk melaksanakan rolling shutter, perkara yang paling penting ialah menetapkan lebar sebelum ini adalah untuk mendapatkan kedudukan tetikus adalah seperti berikut:

function RollImage(evt){ 
var x=evt.pageX; 
console.log(x); 
$("#before").css("width",x+"px"); 
} 
/script>
Salin selepas log masuk

Dengan cara ini, kesan roller blind dicapai. Kod sumber adalah seperti berikut:

style.css

.beforeafter{ 
width: 940px; 
height: 529px; 
} 
#after{ 
position: absolute; 
top: 0px; 
left: 0px; 
background-image: url(../images/24.jpg); 
width: 940px; 
height: 529px; 
background-repeat: no-repeat; 
} 
#before{ 
position: absolute; 
top: 0px; 
left: 0px; 
border-right: 3px solid #f00; 
background-image: url(../images/23.jpg); 
width: 433px; 
height: 529px; 
background-repeat: no-repeat; 
max-width: 940px; 
} 
Salin selepas log masuk

test.html


<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> 
<title>日本地震灾区前后对比</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="Content-Language" content="zh-CN"> 
<link href="css/roll.css" type="text/css" rel="stylesheet"> 
<script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function RollImage(evt){ 
<strong>var x=evt.pageX; 
$("#before").css("width",x+"px");</strong> 
} 
</script> 
</head> 
<body> 
<div class="beforeafter" onmousemove="RollImage(event)"> 
<div id="after"></div> 
<div id="before"> </div> 
</div> 
</body> 
</html> 
Salin selepas log masuk
Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

iPhone 16 mendedahkan semua ciri kamera: meletakkan asas untuk Vision Pro? iPhone 16 mendedahkan semua ciri kamera: meletakkan asas untuk Vision Pro? Jan 25, 2024 am 08:15 AM

Pada persidangan musim luruh Apple tahun lepas, iPhone 15 Pro Max pastinya antara protagonis yang paling banyak diperkatakan kerana ia adalah telefon pintar pertama Apple yang dilengkapi dengan kanta telefoto periskop. Sudah tentu, iPhone 15 Pro Max hanya menyokong zum optik sehingga 5x, dan disebabkan saiz penderia yang kecil, prestasinya dalam kebanyakan adegan agak dikesali. (Sumber: Apple) Dalam kem Android, penderia tapak luar 1 inci hampir menjadi peralatan standard untuk model perdana Dengan trend "telefoto tapak luar" kembali bertiup di pasaran mewah pada tahun 2023, walaupun pada tahun-tahun sebelumnya, ia tidak. terlalu popular di kalangan pengeluar Kanta telefoto yang menjadi perhatian juga telah mengalami perubahan yang besar. Jika kita lihat pada perkakasan sahaja, iPhone memang ketinggalan jauh. Mungkin Apple juga sedar akan masalah ini.

Huawei Imaging XMAGE: Sepuluh trend utama menetapkan nada untuk hala tuju baharu pengimejan mudah alih pada masa hadapan Huawei Imaging XMAGE: Sepuluh trend utama menetapkan nada untuk hala tuju baharu pengimejan mudah alih pada masa hadapan Jun 01, 2024 pm 12:27 PM

Sejarah pembangunan siri P ialah sejarah perkembangan imej bergerak. Sempena ulang tahun ke-12 kelahiran siri P, Huawei melancarkan lagi dengan pemahaman mendalam tentang pengimejan mudah alih dan rancangan masa depan. Daripada kemunculan konsep imej bergerak kepada perkembangan dan pertumbuhannya secara beransur-ansur, Huawei sentiasa memainkan peranan penting sebagai peneraju, menjadi cara utama untuk berjuta-juta pengguna merekodkan kehidupan mereka. Hari ini, apabila industri bersungguh-sungguh berinovasi dalam tiga dimensi: menyusun perkakasan, meningkatkan kualiti imej dan menggabungkan gaya jenama pengimejan tradisional, kami melihat dengan jelas bahawa susunan perkakasan homogen dan pengoptimuman algoritma tidak dapat membezakan setiap jenama dengan jelas. dan yang lebih penting, gaya imej tertentu sukar untuk disesuaikan dengan keperluan individu pengguna. Berdiri pada dimensi yang lebih tinggi dan memikirkan arah pembangunan seterusnya pengimejan mudah alih, Huawei adalah peneraju.

Model yang sama dengan perdana! Xiaomi Civi 4 Pro menaik taraf otak pengimejan 3.0: dilengkapi dengan Xiaomi AISP Model yang sama dengan perdana! Xiaomi Civi 4 Pro menaik taraf otak pengimejan 3.0: dilengkapi dengan Xiaomi AISP Mar 22, 2024 pm 12:02 PM

Menurut berita pada 21 Mac, Xiaomi Civi4Pro telah dikeluarkan secara rasmi hari ini, dilengkapi dengan kamera tiga kali ganda profesional Leica dan dilengkapi dengan penderia profesional tersuai Light Hunter 800. Menurut laporan, Xiaomi Civi4Pro turut mewarisi kekuatan model perdana dan dilengkapi dengan Xiaomi AISP. Melalui ThePaper OS Xiaomi, ia masuk jauh ke dalam lapisan perkakasan, membina semula saluran paip teknologi, masuk ke dalam setiap modul SoC, dan menyepadukan sepenuhnya kuasa pengkomputeran CPU, GPU, NPU dan ISP Jumlah kuasa pengkomputeran adalah setinggi sebagai 42TOPS, dan kelajuan penangkapan berterusan meningkat sebanyak 69%. Pada masa yang sama, mesin baharu itu menyepadukan empat model fotografi pengiraan utama, menyepadukan algoritma dan optik dengan bijak untuk membawa ton tiga dimensi, warna realistik dan lapisan peringkat filem. Model potret besar baharu juga menggabungkan algoritma kecantikan AIGAN baharu, yang menghasilkan

OPPO Find X7 ialah karya agung! Abadikan setiap detik anda dengan imej OPPO Find X7 ialah karya agung! Abadikan setiap detik anda dengan imej Aug 07, 2024 pm 07:19 PM

Dalam era yang pantas ini, OPPO Find X7 boleh menggunakan kuasa pengimejannya untuk membolehkan kita menikmati setiap detik indah dalam hidup. Sama ada gunung yang indah, sungai, tasik atau laut, pertemuan keluarga yang mesra atau pertemuan dan kejutan di jalanan, ini boleh membantu anda merakamnya dengan kualiti gambar yang "tidak dapat ditandingi". Dari luar, reka bentuk Deco kamera Find It kelihatan sangat dikenali dan mempunyai rasa mewah. Bahagian dalam juga unik, bermula dengan konfigurasi perkakasan asas. FindX7 mengekalkan yang sebelumnya

Sut fotografi profesional Xiaomi Mi 14 Ultra diumumkan: roda gelombang tersuai baharu, menyokong sambungan terus Jenis-C Sut fotografi profesional Xiaomi Mi 14 Ultra diumumkan: roda gelombang tersuai baharu, menyokong sambungan terus Jenis-C Feb 23, 2024 am 08:01 AM

Menurut berita pada 22 Februari, perdana pengimejan Xiaomi 14Ultra secara rasmi memulakan kerjaya malam ini, dilengkapi dengan sistem optik baharu-Leica "All-Star" empat kamera. Menurut pengenalan rasmi, Xiaomi 14Ultra telah dinaik taraf dengan "pakej pengimejan profesional", termasuk sarung pelindung kulit Kona, cincin penyesuai penapis 67mm, cincin hiasan berwarna-warni, pemegang fotografi profesional Jenis-C, penutup lensa, dan lanyard pemegang. Antaranya, pemegang fotografi profesional mempunyai bateri 1500mAh terbina dalam, merealisasikan sambungan terus Jenis-C, dan menyokong pengecasan pantas berwayar Xiaomi ThePaper 90W Apabila kuasa telefon lebih rendah daripada 80%, ia akan mengecas secara automatik apabila disambungkan ke pemegang . Di samping itu, pemegang fotografi profesional mempunyai roda gelombang tersuai baharu untuk melaraskan EV dengan cepat dalam mod biasa;

Imej 200 juta piksel Thanos! Hands-on telefon sebenar Vivo X100 Ultra: kamera cincin besar Imej 200 juta piksel Thanos! Hands-on telefon sebenar Vivo X100 Ultra: kamera cincin besar May 07, 2024 am 09:50 AM

Menurut berita pada 7 Mei, vivo akan mengadakan persidangan pelancaran produk baharu pada 13 Mei, dan akan mengeluarkan siri vivoX100s dan vivoX100Ultra. Selain itu, pengimejan pelan tindakan jenama teknologi pengimejan baharu vivo juga akan diumumkan pada persidangan itu. Baru-baru ini, kedai utama rasmi vivo mengeluarkan video langsung mesin sebenar vivo X100 Ultra Bahagian belakang mesin baharu menggunakan reka letak lensa baharu dan mempunyai modul kamera berbentuk cincin yang besar, termasuk kamera utama, telefoto periskop dan ultra. -Kanta sudut lebar. Vivo juga telah menambah bulatan tekstur logam berus di luar cincin lensa, dan butirannya sangat indah. Naib presiden jenama Vivo Jia Jingdong berkata semasa pemanasan badan bahawa vivoX100Ultra ialah "pemusnah imej" dan pada asalnya dibangunkan secara dalaman oleh vivo.

Bekas ketua jurutera pengimejan Huawei, Luo Wei menyertai Honor: berkongsi foto secara terbuka Bekas ketua jurutera pengimejan Huawei, Luo Wei menyertai Honor: berkongsi foto secara terbuka Jul 29, 2024 am 09:01 AM

Dilaporkan bahawa Luo Wei, yang pernah berkhidmat sebagai ketua jurutera pengimejan Huawei, telah menyertai pasukan pengimejan Honor dengan cara yang rendah, yang pastinya akan membawa peningkatan kualitatif kepada prestasi pengimejan telefon mudah alih Honor. Baru hari ini, Luo Wei menyiarkan satu set foto bertema Huanghuashui Great Wall di Weibo peribadinya, daripada Honor Magic 6 Ultimate Edition dan Honor Magic 5 Pro, dengan teks "Ujilah." Ini sudah pasti menyokong kenyataan bahawa Luo Wei telah menyertai Honor dan telah mula bekerja. Dalam komen di Weibo, beberapa netizen bertanya tentang isu makro Honor Magic 6 Pro Apabila merakam jarak dekat, lensa sudut lebar dan telefoto bercanggah dan lensa akan berulang kali melintasi lensa. Sebagai tindak balas, Luo Wei dengan pantas membalas, mengatakan bahawa tidak akan ada masalah selepas menaik taraf versi. Selain itu, Honor MagicV3 telah dilancarkan

Xiaomi Mi 14 Ultra dilengkapi dengan pemegang fotografi profesional, dan telefon boleh dinaik taraf serta-merta kepada kamera Xiaomi Mi 14 Ultra dilengkapi dengan pemegang fotografi profesional, dan telefon boleh dinaik taraf serta-merta kepada kamera Jan 17, 2024 pm 03:36 PM

Menurut berita pada 17 Januari, Xiaomi 14Ultra masih belum dikeluarkan, dan aksesori akan diutamakan Baru-baru ini, produk baharu Xiaomi "Professional Photography Grip (Power Bank)" lulus pensijilan 3C, dan pengeluarnya ialah Lens Technology. Merujuk kepada sut fotografi profesional Xiaomi 13 Ultra, pemegang fotografi profesional baharu ini jelas disediakan untuk Xiaomi 14 Ultra dan dijangka membawa permainan baharu. Saman pengimejan profesional Xiaomi 13Ultra Difahamkan bahawa Xiaomi 13Ultra melancarkan sut fotografi profesional pada masa yang sama apabila ia dikeluarkan Harganya ialah 999 yuan. Ia pernah dijual kepada kira-kira 1,500 yuan pada platform terpakai, yang agak popular. Kit fotografi termasuk sarung pelindung kulit nano teknologi dan pemegang fotografi tanpa wayar Sarung pelindung juga boleh disambungkan dengan cincin penyesuai penapis 67mm untuk membolehkan telefon mudah alih

See all articles