JavaScript - 用户选择功能
我是JavaScript新手,我正在做一些事情。 This是我到目前为止已经达到了,这里是我的代码:JavaScript - 用户选择功能
<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}
var color = true;
function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}
function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}
function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}
function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">
</body>
</html>
到目前为止,“彩色”,“灰度”,并与透明度滑块工作沿着“备用”按钮,因为只有预期的第一张图片(image1.jpg)。而且,当用户输入他自己的图像时,它会替换第一个图像,并按照预期对其执行功能。 这里是我想要做:
1 - 让用户选择他想要通过点击它来编辑三幅图像,然后应用它周围的边框,并在其他功能使用它(灰度和不透明度)。下面是我试了一下(但不工作):
<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">
function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}
2 - 当用户输入自己的形象,我想它来代替所有的3张图片我已经默认显示。
非常感谢您的帮助。提前致谢!
你缺少的ID和50px
报价两者。但最好为选择定义一种风格。
然后,让点击处理程序首先从所有图像中移除该样式,除了点击的图像,它应该设置该样式。可以使用功能.classList.add
和.classList.remove
。
如果您目前有document.getElementById('image1')
,你会怎么做,而不是:
document.querySelector('.selected')
那么你也应该确保所选择的页面加载一个图像,即与selected
类。
其他一些改进可确保在更改选区时,不透明度滑块也与该图像的当前不透明度设置一致。
这里是一个片段,做一切:
function changeOpacity(newValue) {
document.getElementById("span").textContent = newValue*100 +'%';
document.querySelector(".selected").style.opacity = newValue;
document.querySelector('input[type=range]').value = newValue;
}
function getOpacity() {
return parseFloat(document.querySelector(".selected").style.opacity || '1');
}
function isColor() {
return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}
function imgColor() {
document.querySelector(".selected").style.filter =
document.querySelector(".selected").style.WebkitFilter =
isColor() ? "grayscale(100%)" : "none";
}
function colorImg() {
if (!isColor()) imgColor()
}
function greyImg() {
if (isColor()) imgColor()
}
function userImage() {
document.querySelector(".selected").src = document.getElementById("userImg").value;
}
// Add this function, and call it on click on an image
function select(img) {
Array.from(document.querySelectorAll('.myImages')).forEach(
myImg => myImg === img ? myImg.classList.add('selected')
: myImg.classList.remove('selected')
);
// bring opacity slider in line with selected image
changeOpacity(getOpacity());
}
.selected {
border: 1px solid;
}
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages selected" id="image1" onclick="select(this)"
src="//cdn.sstatic.net/Sites/*/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/*/company/img/logos/so/so-icon.png?v=c78bd457575a">
<img class="myImages" id="image3" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/*/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">
首先 - 您没有使用该imgID,而是使用该字符串作为该变量。更改为:
function selectImg(imgID) {
document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID
activeImage = imgID; //set activeImage ID
}
然后当你正在做的事情为图像,不要使用“图像1”,但activeImage
是全局变量(外和之前的功能定义)。
而且为新上传的图像:
把它放进另一个DIV和与该算法的工作 -
when (uploaded_new)
hide default pics
show DIV with new image
activeImage = uploadedPic
感谢您的帮助!我不太明白“activeImage”的含义。我去image1,image2,image3,所以我可以命名我所有的3个图像。如果你能解释一点,我会很感激,再次感谢! –
activeImage只是一个变量,用于存储所选图像的ID。即当你点击第二个,activeImage将是“image2”。当你调用这些编辑函数时,而不是使用静态的“image1”,它使用变量来存储所需的值(最后选择的图片的ID)。 –
非常感谢!除了着色功能之外,它的工作方式与我想要的完全相同。肯定这是一个小错误,我无法弄清楚它是否完全是新的。 –
我确实有关于颜色/灰度的错误。现在应该修好了。我还添加了一行将此设置分配给'filter' style属性,以便它在FireFox中也能正常工作。 – trincot
所以我在这里和那里添加了一些东西,这就是我现在拥有的[(jsfiddle)](https://jsfiddle.net/bhvcr035/),这里是页面[link](http://web.csulb.edu /〜mmessiha/cecs110 /的MyStuff /)。第一次选择其中一个图像时,显示边框。但是,当我点击我的重置按钮并尝试再次选择图像后,图像被选中,但没有显示边框。 –