我试图在OnClick图像上移动图像, 这是一个例子: http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq 我希望有这样的链接解释,由于某种原因它不在这里工作,也许有人在这里可以帮助我,我已经谷歌搜索了几个小时了。
以下是我想要做的事情:http://orakels.org/php/?m=wo_lonline
这是我想要的结果;')
这里是我的JsFiddle: http://jsfiddle.net/3cv92hxy/3/
目前我的代码看起来像这样:
<body>
<div id="cardcontainer">
<div class="cards">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
</div>
</div>
<div id="result">
Picture 1 | Picture 2 | Picture 3
</div>
<script type="text/javascript">
/*http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq
Here add:
'image_path': ['id_elm1', 'id_elm2']
"id_elm1" is the ID of the tag where the image is initially displayed
"id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
'img/kaart.png': ['cards', 'result'],
/* 'imgs/girl.jpg': ['cards', 'result'],
'imgs/dog.jpg': ['dog1', 'dogto'] */
};
// function executed when click to move the image into the other tag
function whenAddImg() {
/* Here you can add a code to be executed when the images is added in the other tag */
return true;
}
/* From here no need to edit */
// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
// http://coursesweb.net/javascript/
// put the image in element with ID from "ide"
obaImg.putImg = function(img, ide) {
if(document.getElementById(ide)) {
document.getElementById(ide).innerHTML = '<img src="'+ img+ '" />';
}
}
// empty the element with ID from "elmid", add image in the other element associated to "img"
obaImg.alternateImg = function(elmid) {
var img = obaImg.storeim[elmid];
var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
document.getElementById(elmid).innerHTML = '';
obaImg.putImg(img, addimg);
// function executed after the image is moved into "addimg"
whenAddImg();
}
obaImg.storeim = {}; // store /associate id_elm: image
// add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
// add the image in the first tag associated to image
// register 'onclick' to each element associated with images in "obimids"
obaImg.regOnclick = function() {
for(var im in obimids) {
obaImg.storeim[obimids[im][0]] = im;
obaImg.storeim[obimids[im][1]] = im;
obaImg.putImg(im, obimids[im][0]);
document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
document.getElementById(obimids[im][1]).onclick = function(){ obaImg.alternateImg(this.id); };
}
}
obaImg.regOnclick(); // to execute regOnclick()
</script>
</body>
css:
body{
background-color:black;
}
#cardcontainer {
margin:10px;
padding:10px;
}
.cards {
width:960px;
margin: auto;
padding:15px;
margin-top:14px;
}
.cards img {
margin-left:-40px;
}
.cards img:hover, .cards img:focus, .cards img:active {
-webkit-transform: translate(0px -50px);
transform: translate(0px,-50px);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#result {
width:960px;
padding:20px;
margin:0 auto;
background-color:yellow;
}
答案 0 :(得分:0)
当我改变
var obimids = {
'img/kaart.png': ['cards', 'result'],
到
var obimids = {
'img/kaart.png': ['cardcontainer', 'result'],
它有点起作用,但这不是我想要的,问题一定是因为卡片是一个类,任何想法如何修复?