這個Flash效果可以通過JS和css來獲取嗎？

Question

查看首頁上的第一個面板（紅色）。

http://www.boomtown.co.za/

我想要做這樣的事情有一種無形的圖像，將鼠標跟蹤僅上揭示了它的一部分。這可能沒有使用Flash？

Answer 1

這是可能的，但只有在現代瀏覽器（鉻，Safari，火狐，歌劇）。

您將需要有兩個<div>的

像這樣..

<div class="container"> 
    <div class="revealer"></div> 
</div> 

和CSS像這樣

.container { 
    position: relative; 
    background: url("images/your-background.jpg"); 
} 
.revealer { 
    position: absolute; 

    //set the mask size to be the size of the container 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 

    z-index: 1; 
    background: url("images/your-background-over-state.jpg"); 

    //css3 image masks, this is not cross browser, see the demo for 
    // cross browser syntax 
    mask: url("images/mask-shape.png") no-repeat; 

    //make sure the mask is off screen at first, by setting the mask position 
    //to minus the width and height of your mask image 
    mask-position: -300px -300px   
} 

而且JS

window.addEventListener('load',function(){ 
    var background = document.querySelector('.container'), 
     revealer = document.querySelector('.revealer'); 

    background.addEventListener('mousemove', function(e){ 

     //the minus represents the half the width/height of your mask image 
     // to make the reveal centred to the mouse. 
     var x = e.offsetX - 150, 
      y = e.offsetY - 150; 

     // move the position of the mask to match the mouse offsets  
     revealer.style.maskPosition = x+'px '+y+'px'; 

     return false; 
    }); 


}); 

因爲您需要確保.container中的任何其他內容具有比掩碼更高的z-index，以確保內容未被屏蔽。要做到這一點相對定位添加到元件在容器

像這樣

.container *:not(.revealer) { 
    position: relative; 
    z-index: 2; 
} 

在面罩使用

圖像是其中固體色創建可見或填充區的圖像，並且所述透明區域是掩模或剪下。

Demo with cross browser code

Answer 2

你可以通過使用一個透明的png圖像來做到這一點，該圖像是從中心透明到邊緣半透明的徑向漸變，並使其跟隨鼠標。

document.onmousemove=mousefollower 
function mousefollower(e){ 
    x = (!document.all)? e.pageX : event.x+document.body.scrollLeft; 
    y = (!document.all)? e.pageY : event.y+document.body.scrollTop; 
    document.getElementById('myImage').style.left = x + 'px'; 
    document.getElementById('myImage').style.top = y + 'px'; 
} 

很明顯，您也可以使用jQuery，並設置mousemove函數只發生在特定的div上。還要確保您使用的圖像足夠大（至少是尺寸的兩倍），以便在移動到div遠端時不會顯示邊緣（這意味着對於大面積區域，您將需要一個巨大的圖像它可能會有很大的滯後）。將圖像放入div中，並將溢出設置爲none，以剪切掉區域外的任何東西。

Answer 3

這可以很容易地使用JavaScript的一些CSS和背景定位。這裏有兩個例子：http://jsbin.com/ococal/3

源代碼很容易理解，你可以開始解決這個問題。