Màu nền trên một khu vực cụ thể của một phần tử

Question

những gì tôi muốn đạt được là để đặt một hiệu ứng di chuột vào một vị trí của một con trỏ ..

một cái gì đó như thế này: http://drmportal.com/

Dưới đây là một fiddle: http://jsfiddle.net/onnmwyhd/

Đây là mã của tôi.

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

này là màu mà tôi muốn trên một Posi tion của một con trỏ ....

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

Answer 1

Trong bạn tham khảo trang web nó sử dụng canvas, hãy xem f này iddle cho reuslt chính xác

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

kịch bản

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

Hãy thử thêm span yếu tố để #container để giữ giá trị con trỏ để tránh ghi đè html của nguyên tố; thêm div yếu tố để #container với cssposition thiết lập để absolute, left thiết lập để x, top thiết lập để y sử dụng để theo dõi con trỏ với 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/