js移动图片（怎么用javascript实现图片移动我只要一张图片向左移动一小段距离就好）

本文目录

• 怎么用javascript实现图片移动我只要一张图片向左移动一小段距离就好
• js控制鼠标移动图片
• js实现左右点击按钮，图片横向循环移动，一次移动一张
• js中如何拖动DIV中的图片
• javascript让图片移动的函数
• 想做一个简单的JS图片移动，但是到后面就乱了
• 为什么我用js控制图片移动，没有效果
• js点击图片使图片位移的代码
• JS让图片移动的效果
• js如何实现鼠标从图片左边移动到右边的时候，切换图片呢不点击！

怎么用javascript实现图片移动我只要一张图片向左移动一小段距离就好

创建个DIV，把图片当里面，比如这样《div》《img href = “asd“》《/div》然后在DIV属性里加上position : absolute，具体是这样《div style = “position:absolute“》《div》

你要是前面都用HTML做了那直接var pic = getElementById(“你的DIV的ID号，要自己先前写好“)
或者var pic = getElementsByTagName(“div“)[你的页面里图片在第N个DIV里就写N-1]

然后调用setInterval
setInterval( “ pic.style.left -= 3“, 300);//每300毫秒 执行pic.style.left -= 3 一次
想停掉它调用clearInterval();
只想移动一次这样：setTimeout( “ pic.style.left -= 3“, 300);

全JS表示
var createDiv = document.createElement(“div“);
createDiv.style.height = “111px“;
createDiv.style.width = “111px“;
document.body.appendChild(createDiv);
createDiv.style.position = “absolute“;
createDiv.style.overflow = “visible“;//这里看你具体需要吧
createDiv.style.top = “111px“;
createDiv.style.left = “111px“;

var createImg = document.createElement(“img“);
createImg.setAttribute(“src“,“https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif“);
createImg.height = 111;
createImg.width = 111;
createDiv.appendChild(createImg);

setInterval( “ createDiv.style.left -= 3“, 300);

js控制鼠标移动图片

图片外边套一个和图片大小一样的div，设置div样式相对定位、或者绝对定位看你需要，div里边的标签用绝对定位，鼠标拖动时移动这个div，里边标签是会随着移动的，代码就别跟我要了，我比较懒得写这个

js实现左右点击按钮，图片横向循环移动，一次移动一张

给个思路吧,设装着所有图片的层为boxa,
它的父层为boxb,
点击移动的时候你把boxa向左移一张图片的宽度就是了,也就是点击的时候更改boxa的margin-left为负数,
boxb要设置over-flow为hidden
,
boxa要足够长

js中如何拖动DIV中的图片

实现思路：

①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离

用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()

drag.js代码：

var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 
};

//拖拽的实现
var startDrag = function(bar, target, callback){
if(getCss(target, “left“) !== “auto“){
params.left = getCss(target, “left“);
}
if(getCss(target, “top“) !== “auto“){
params.top = getCss(target, “top“);
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}  
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(target, “left“) !== “auto“){
params.left = getCss(target, “left“);
}
if(getCss(target, “top“) !== “auto“){
params.top = getCss(target, “top“);
}
};
document.onmousemove = function(event){
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + “px“;
target.style.top = parseInt(params.top) + disY + “px“;
}

if (typeof callback == “function“) {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
}
}
};

HTML/CSS

《style type=“text/css“》
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
《/style》
《div id=“box“》
    《div id=“main“》
        《div id=“bar“》拖拽《/div》
        《div id=“content“》
            内容……
        《/div》
    《/div》
《/div》

JS部分

《script src=“drag.js“ type=“text/javascript“》《/script》
《script type=“text/javascript“》
    var oBox = document.getElementById(“box“);
    var oBar = document.getElementById(“bar“);
    startDrag(oBar, oBox);
《/script》

javascript让图片移动的函数

/**
* 简单自定义动画函数
* @param {objec} obj 一个元素对象
* @param {string} pos 表示移动到的目标地点
* @param {number} speed 速度大小，表示每秒移动的像素数，默认为1px/100ms
* @param {function} callback 动画执行完后调用的函数
* @return {[object]} 元素自身，方便链式写法
*/
function ani(obj, pos, speed, callback) {
/* 清除无用的定时器 */
if (obj.move) {
clearTimeout(obj.move);
}

obj.style.position = “absolute“;

var speed = speed || 10,
x = parseInt(obj.style.left) || 0,
y = parseInt(obj.style.top) || 0;
/* 初始化元素的相关属性值 */
if (!obj.x) {
obj.x = x;
obj.y = y;
obj.fx = x + pos;
obj.fy = y + pos;
}
/* 如果元素到达指定位置，则跳出并执行回调函数 */
if (x === (pos + obj.x) && y === (pos + obj.y)) {
if (typeof callback === “function“) {
callback();
}
obj.x = null;
obj.y = null;
obj.fx = null;
obj.fy = null;
return obj;
}
/* 判断在水平方向上是应该往哪个方向移动 */
if (obj.x 《 obj.fx) {
if (x 《 obj.fx) {
obj.style.left = (x + speed) + “px“;
}
} else {
if (x 》 obj.fx) {
obj.style.left = (x - speed) + “px“;
}
}
/* 判断在垂直方向上是应该往哪个方向移动 */
if (obj.y 《 obj.fy) {
if (y 《 obj.fy) {
obj.style.top = (y + speed) + “px“;
}
} else {
if (y 》 obj.fy) {
obj.style.top = (y - speed) + “px“;
}
}

obj.move = setTimeout(function() {
ani(obj, pos, speed, callback);
}, 100);
}

window.onclick = function() {
ani($(“#testAni“), [100, 0], 5, function() {
ani($(“#testAni“), [-100, 0],null,function(){
alert(“success“)
});
})
}

可供参考

想做一个简单的JS图片移动，但是到后面就乱了

你设置的setTimeout没有及时消除，所以不同时间产生多个setTimeout对象，图片移动速度越来越快。这是修改后的，你看看，加了三个延时的标识符

《script type=“text/javascript“》 
    window.onload = function () { doMove(); doMove2(); doMove3();}
var t1;
var t2;
var t3;
    function doMove() {
        t1 = setTimeout(“doMove()“, 10);
        var aa = document.getElementById(“moveDiv“);
        var bb = parseInt(aa.style.left);
        aa.style.left = (bb - 1)+“px“;
        if (aa.style.left == 0+“px“) {
            clearTimeout(t1);
            t1=setTimeout(“doMove()“, 3000);
        }
        if (aa.style.left == -100 + “px“) {
            clearTimeout(t1);
            t1=setTimeout(“doMove()“, 3000);
        }
        if (aa.style.left == -200 + “px“) {
            clearTimeout(t1);
            t1=setTimeout(“doMove()“, 3000);
            aa.style.left = 100 + “px“;
        }
        if (aa.style.left == 100 + “px“) {
            clearTimeout(t1);
            t1=setTimeout(“doMove()“, 3000);
        }
    }
    function doMove2() {
        t2 = setTimeout(“doMove2()“, 10);
        var aa = document.getElementById(“moveDiv2“);
        var bb = parseInt(aa.style.left);
        aa.style.left = (bb - 1) + “px“;
        if (aa.style.left == 0 + “px“) {
            clearTimeout(t2);
            t2=setTimeout(“doMove2()“, 3000);
        }
        if (aa.style.left == -100 + “px“) {
            clearTimeout(t2);
            t2=setTimeout(“doMove2()“, 3000);
        }
        else { }
        if (aa.style.left == -200 + “px“) {
            clearTimeout(t2);
            t2=setTimeout(“doMove2()“, 3000);
            aa.style.left = 100 + “px“;
        }
        if (aa.style.left == 100 + “px“) {
            clearTimeout(t2);
            t2=setTimeout(“doMove2()“, 3000);
        }
    }
    
《/script》

为什么我用js控制图片移动，没有效果

你代码写错了，不是innerHtml而是innerHTML，不是offsetleft---是offsetLeft，setInterval使用也错了，正确的js代码如下：

《script language=“javascript“》
window.onload=function()
{
    var oDiv=document.getElementById(’body1’);
    var oUl=oDiv.getElementsByTagName(’ul’);
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    setInterval(function(){
        oUl.style.left=oUl.offsetLeft-2+’px’;
        },30);
    }
《/script》

js点击图片使图片位移的代码

var a= document.getElementsByClassName(“类名“);
for(var i=0;i《a.length;i++){
a[i].onclick=function(){
this.style.top=“移动的值“;
}
}

JS让图片移动的效果

《img id=“image“ src=“ufo.png“ width=“240“ height=“140“
style=“position: absolute; left: 0px; top: 0px;“ /》

js如何实现鼠标从图片左边移动到右边的时候，切换图片呢不点击！

通过给标签增加onmousemove或onmouseover事件监听，可以捕获到鼠标悬停于该标签或移动时的事件
通过事件回调可以加以判断，动态去修改图标标签的源地址，以实现你提出的需求
但鼠标悬停和移动是十分高频率的事件，建议配合鼠标按键事件作为限制条件