元素的特定区域上的背景颜色 [英] Background color on a specific area of an element

问题描述

我想实现的是对光标位置设置悬停效果。

像这样：http://drmportal.com/

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

这是我的代码。

HTML

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

这是我想在光标位置上的颜色....

  background-image：-webkit-linear-gradient（-35deg，＃35a28e，＃a8e4a5）; 
  

解决方案

fiddle for the exact reuslt

js fiddle p>

html

 < div id =containerclass =stalker > 
< canvas id =canvaswidth =1600height =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 
 ctx.fillStyle = gradient; 
 ctx.fillRect（0，0，canvas.width，canvas.height）; 
 
}，初始化为？200：0）; 
}）; 
  

what I want to achieve is to put a hover effect on a position of a cursor..

something like this: http://drmportal.com/

Here's a fiddle: http://jsfiddle.net/onnmwyhd/

Here's my code.

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

this is the color that I want on a position of a cursor....

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

解决方案

In your reference website it uses canvas, check out this fiddle for the exact 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);
}

script

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

这篇关于元素的特定区域上的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！