更改拖动鬼图像大小
我如何制作它,以便在拖动图像时,拖动的图像大小会根据我指定的内容而改变？例如,当我拖动图像时,我希望重影图像在这种情况下变为更大的尺寸(500),但可能是真的.
使用Javascript:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/custom.js"></script>
<style>
/* Pikachu fits in the container */
.size {
height:200px;
width:200px;
}
.size img {
z-index:10;
width:100%;
}
</style>
</head>
<body>
<div class="size">
<img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png" >
</div>
</body>
</html>
解释 1
如果您的意思是“幽灵图像”，即当您在任何网站上单击并拖动图像时显示的图像副本，当您将其拖动到文件夹时（请参见下面的屏幕截图说明我的意思），那么您可以使用新的HTML5 可拖动标签。您可以在此处查看更多示例，并且您应该阅读以下内容setDragImage()：
document.getElementById("size").addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "URL to 500px image";
e.dataTransfer.setDragImage(img, 0, 0);
}, false);
如果您不想制作 500px 的图像副本，您可以按如下方式更改大小，此处有一个工作演示：
document.getElementById("size").addEventListener("dragstart", function(e) {
var dragIcon = document.createElement("img");
dragIcon.src = "http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png";
dragIcon.style.width = "500px";
var div = document.createElement('div');
div.appendChild(dragIcon);
div.style.position = "absolute"; div.style.top = "0px"; div.style.left= "-500px";
document.querySelector('body').appendChild(div);
e.dataTransfer.setDragImage(div, 0, 0);
}, false);
但这有点hacky，因为我们需要创建一个元素div，如果传递一个. 然后，我们需要将其添加到页面，然后将其移出页面，因为要求该元素可见（所以是不允许的）setDragImage()imgimgdisplay:none
解释 2
现在，如果您的意思是在页面中移动图像时更改图像的大小，那么您可以使用 jQueryUI 来做到这一点.draggable()：
$(function() {
$( ".size" ).draggable({
opacity:0.6,
drag: function(event,ui) {
$("div.size").width(500);
},
stop: function(event,ui) {
$("div.size").width(200);
}
});
$("div.size").width(200);
});
工作演示在这里： https: //jsfiddle.net/9L4hxk1j/
| 归档时间： |
|
| 查看次数： |
3913 次 |
| 最近记录： |