Question

看一下主页上的第一个面板（红色）。

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

我想用不可见的图像做这样的事情，只在鼠标跟踪时显示它的一部分。这可能不使用Flash吗？

Answer 1

这可以通过javascript使用一些css和背景定位很容易地完成。以下是两个示例：http://jsbin.com/ococal/3

源代码很容易理解，你可以开始解决这个问题。

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中并将overflow设置为none以剪切掉落在该区域之外的任何内容。

Answer 3

可能是的，但仅限于现代浏览器（chrome，safari，firefox，opera）。

您需要有两个<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

这个Flash效果可以用JS和css接收吗？

3 个答案: