cari

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 16:33:151625semak imbas

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; 
}


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>

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; 
}

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>
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 parameter lalai dalam pengetahuan Javascript_BasicArtikel seterusnya：Penjelasan terperinci tentang parameter lalai dalam pengetahuan Javascript_Basic

Artikel berkaitan

Lihat lagi