背景颜色

Question

我想要实现的是把上的光标位置悬停效果..

是这样的：http://drmportal.com/

这里有一个小提琴：http://jsfiddle.net/onnmwyhd/

这是我的代码。

HTML

<div id="container"></div> 

CSS

#container{ 
background-color: #6fc39a; 
height:200px; 
} 

JQUERY

$("#container").mousemove(function(e){ 

var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    $(this).html("X: " + x + " Y: " + y); 
}); 

这是我想对POSI颜色的光标的灰....

background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 

Answer 1

跟踪光标在参考它使用画布的网站，看看这个f iddle的确切reuslt

js fiddle

HTML

<div id="container" class="stalker"> 
    <canvas id="canvas" width="1600" height="433"></canvas> 
</div> 

CSS

.stalker { 
    background-color: #6fc39a; 
    height:200px; 
    border-top-color: rgba(168, 228, 165, 0.7); 
    border-bottom-color: rgba(53, 162, 142, 0.3); 
} 

脚本

var stalker = $('.stalker'); 

var canvas = $('#canvas')[0]; 

var ctx = canvas.getContext('2d'), gradient, initialized = false; 

$("#container").mousemove(function(e){ 
    setTimeout(function(){ 
     initialized = true; 
     canvas.width = stalker.width(); 
     canvas.height = stalker.height(); 
     gradient = ctx.createRadialGradient(e.pageX, e.pageY, 0, e.pageX, e.pageY, canvas.width); 
     gradient.addColorStop(0, stalker.css('border-top-color')); 
     gradient.addColorStop(1, stalker.css('border-bottom-color')); 
     ctx.fillStyle = gradient; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

    }, initialized ? 200 : 0); 
}); 

Answer 2

尝试增加span元件#container保持光标值以避免重写元件的html;加入div元件#container与cssposition设置为absolute，left集到x，top设置为y用来与div

$(function() { 
 
    $("#container").mousemove(function(e) { 
 
    var x = e.pageX - this.offsetLeft; 
 
    var y = e.pageY - this.offsetTop; 
 
    $("div", this).css({ 
 
     left: x - (75/2), 
 
     top: y - (75/2) 
 
    }) 
 
    $("span", this).html("X: " + x + " Y: " + y); 
 
    }).mousemove(); 
 
})

#container { 
 
    background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 
 
    background-image: linear-gradient(125deg, #35a28e, #a8e4a5); 
 
    background-color: #6fc39a; 
 
    height: 200px; 
 
} 
 
#container div { 
 
    background-image: -webkit-linear-gradient(-35deg, #35a28e, #a8e4a5); 
 
    width: 75px; 
 
    height: 75px; 
 
    position: absolute; 
 
    border-radius: 100px; 
 
    opacity: 0.5 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 

 
<div id="container"> 
 
    <span></span> 
 
    <div></div> 
 

 
</div>

的jsfiddle http://jsfiddle.net/onnmwyhd/2/