简体繁体 English

如何在点击时仅选择部分图像

[英]How to select only part of image on click

原文 2013-08-12 18:12:26 6 1 javascript/ jquery/ html

I have a star rating system for a website. 我有一个网站的星级评分系统。 I'd like to select 0 1/2 or full stars. 我想选择0 1/2或全星。

For a SINGLE star click, what I want to achieve is this, and I'm not sure if it is something that can be done in JavaScript of jQuery : 对于单个星形点击，我想要实现的是这个，我不确定它是否可以在jQuery JavaScript中完成：

If user clicks anywhere one the left half, it chooses 1/2 star; 如果用户点击左半边的任何地方，则选择1/2星; but on the right half, FULL star. 但在右半边，全明星。 Of course, half's (ideally) would be divided right down the middle - 50/50 of area space. 当然，一半（理想情况下）将在中间区域划分 - 区域空间的50/50。

Is this something that can be done? 这是可以做到的吗？

1 个解决方案

The easier is always to have 2 images per start , the left and right image, and a non-selected image that will serve as background if nothing is chosen. 更容易的是每个开始时有2个图像 ，左右图像，以及如果没有选择任何内容则将用作背景的未选择图像。

you can easily develop a simple framework to make it reusable throughout your website (and future projects) but I do wonder , do you really want to do something that dozens of other open source projects already do? 您可以轻松地开发一个简单的框架，使其在整个网站 （以及未来的项目）中可重用，但我确实想知道 ，您是否真的想要做一些其他许多开源项目已经做过的事情？

as an example , check this RateIt plugin examples: 例如，检查此RateIt插件示例：

http://www.radioactivethinking.com/rateit/example/example.htm http://www.radioactivethinking.com/rateit/example/example.htm

it includes all you need plus, all the extra nice ajax calls and several others settings that makes this really easy to use. 它包括你需要的所有东西，所有额外的好的ajax调用和其他一些设置，使这个真的很容易使用。