javascript - 点击图片更改网址
问题描述
我使用 js 插入一组图像,为所有图像添加了相同的类。现在我想在点击图片时更改网址,但我无法区分图片,有人可以帮忙吗?例如,当单击 image1 时,它会转到一个差异链接,单击 image2 会转到另一个链接。这是下面的代码:
infoArray = [
{
"image": "001.jpg",
"title": "Jordan",
"text": ["Web Development"],
},
{
"image": "tri.jpg",
"title": "Last Night",
"text": ["Web Development"],
},
{
"image": "001.jpg",
"title": "Chatter",
"text": ["Web Development", "Web Design"],
},
]
function insertDiv(array, container) {
array.forEach(function (e, index) {
let div = document.createElement("div");
div.classList.add("box");
container.appendChild(div);
insertImages(array, div, index)
});
}
function insertImages(array, container, index) {
let img = new Image();
img.src = array[index]["image"];
img.classList.add("image");
container.appendChild(img);
insertTitle(array, container, index);
}
function insertTitle(array, container, index) {
let titleContainer = document.createElement("p");
titleContainer.classList.add("title");
let title = document.createTextNode(array[index]["title"]);
titleContainer.appendChild(title);
container.appendChild(titleContainer);
insertText(array, container, index);
}
function insertText(array, container, index) {
let textContainer = document.createElement("div");
textContainer.classList.add("textContainer");
array[index]["text"].forEach(function (e, i) {
let text = document.createElement("p");
let innerText = document.createTextNode(array[index]["text"][i]);
text.appendChild(innerText);
textContainer.appendChild(text);
})
container.appendChild(textContainer);
}
function FadeIn(img){
var ourScene = new ScrollMagic.Scene({
triggerElement: img,
triggerHook: 0.7,
reverse: true,
duration: "100%",
})
.on('start', function(){
TweenMax.to(img, 1, {opacity: 1, y:10})
})
.on('end', function(){
controllerInfo = controller.info("scrollDirection");
TweenMax.to(img, 1, {opacity: 0});
if ( controllerInfo == 'REVERSE'){
TweenMax.to(img, 1, {opacity: 1});
}
})
.addIndicators()
.addTo(controller);
}
function checkHovering(images){ //looks if hovering on img
images.forEach(function(image, index){
document.addEventListener("mousemove", function(e){
if(e.x>image.getBoundingClientRect().x
&& e.x<document.documentElement.clientWidth - image.getBoundingClientRect().x
&& e.y>image.getBoundingClientRect().y
&& e.y<image.getBoundingClientRect().y + image.getBoundingClientRect().height){
TweenMax.to(image, 1, {css: {scale: 1.02}});
appearTitle(index);
} else {
TweenMax.to(image, 0.5, {css: {scale: 1}});
disappearTitle(index);
}
})
})
}
function appearTitle(index){
currentTitles[index].style.opacity = 1;
currentText[index].style.opacity = 1;
}
function disappearTitle(index){
currentTitles[index].style.opacity = 0;
currentText[index].style.opacity = 0;
}
function clickImg(images){
images.forEach(function(image){
})
}
let container = document.querySelector(".container");
let controller = new ScrollMagic.Controller();
insertDiv(infoArray, container);
let currentTitles = document.querySelectorAll(".title");
let currentImages = document.querySelectorAll(".image");
let currentText = document.querySelectorAll(".textContainer");
currentImages.forEach(function(element){
FadeIn(element);
})
checkHovering(currentImages);
解决方案
推荐阅读
- c# - HTTP 范围请求不适用于 IIS Express 静态资源
- java - 如何构建共享相同基础/公共库的项目?
- arrays - 如何从 vb.net 中的不同按钮访问表单数组?
- python - Python请求库POST请求不起作用
- javascript - 删除未使用的 Javascript base.js (Youtube iframe api)
- flutter - 测试 Flutter Facebook Firebase 登录
- javascript - 如何从嵌套字典中的值创建 [number, number][ ] 类型的列表?
- datepicker - 日期选择器没有禁用日期
- javascript - React-Native:未处理的承诺拒绝:错误:对象作为 React 子项无效
- java - 检查是否具有特定属性的对象数组 - java