Idea dan kod CSS Javascript untuk melaksanakan kemahiran effect_javascript rolling shutter imej-tutorial js-php.cn

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

WBOY

Lepaskan： 2016-05-16 16:33:15

asal

1562 orang telah melayarinya

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