我正在尝试在图像上单击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;
}
当我改变
var obimids = {
'img/kaart.png': ['cards', 'result'],
到
var obimids = {
'img/kaart.png': ['cardcontainer', 'result'],
它有点用，但是那不是我想要的，问题一定是因为卡是一类，知道如何解决？
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句