在div内自动水平移动图像 [英] Horizontally move image automatically within a div
本文介绍了在div内自动水平移动图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的图片尺寸为15152 * 404.我只想在div中显示img。但是这个图像需要通过css或jquery水平改变（当它自动改变时，即img做一些像gif这样的动作）。我已经尝试了以下html，Img正确显示但需要水平移动。请帮帮我。
IMG： jasper.png [ ^ ]
我尝试过：
HTML：
< ！DOCTYPE html >
div.picture1 {
background-image：url（'jasper.png'）;
transform-origin：0px 0px 0px;
z-index：82;
transform：translate（250px，0）;
宽度：200px;
身高：404px;
保证金：0自动;
填充：0;
}
& lt; / style
< body >
< div class = picture1 > < / div >
< / body >
< / html >
解决方案
我试过以下..它正在工作
<！DOCTYPE html>
< meta http-equiv =X-UA-Compatiblecontent =IE = 9>
< canvas id = icanvaswidth =200pxheight =404px>
var imgTag = new Image（）;
imgTag.src =https://d27jyp35i1l6s7.cloudfront.net/v3.2/agni/assets/carousel/classic/new-classic/kimberly.png;
var canvas = document.getElementById（'icanvas'）;
var ctx = canvas.getContext（2d）;
ctx.drawImage（imgTag，0,0）;
var lsFrameWidth = -202.0;
var lsWidth = 0;
timesRun = 1;
var interval = setInterval（function（）{
if（timesRun === 75）{
timesRun = 1;
lsWidth = 0;
}否则if（timesRun& lt; 75）
{
timesRun = timesRun + 1;
ctx.clearRect（0,0，canvas.width，canvas.height）
ctx.drawImage（imgTag， lsWidth，0）;
lsWidth = lsWidth +（lsFrameWidth）;
}
}，90）;
I have a image with dimension 15152 * 404. I just want to show that img in div. But that image need to change horizontally(when its changed automatically, that img person doing some action like gif) by css or jquery. I have tried the following html, Img shown correctly but need to move horizontally. Please help me for this.
FOR IMG : jasper.png[^]
What I have tried:
HTML :
<!DOCTYPE html>
div.picture1 {
background-image:url('jasper.png');
transform-origin: 0px 0px 0px;
z-index: 82;
transform: translate(250px, 0);
width: 200px;
height: 404px;
margin: 0 auto;
padding: 0;
}
</style
<body>
<div class="picture1"></div>
</body>
</html> 解决方案
I have try the following.. Its working
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<canvas id="icanvas" width="200px" height="404px">
var imgTag = new Image();
imgTag.src = "https://d27jyp35i1l6s7.cloudfront.net/v3.2/agni/assets/carousel/classic/new-classic/kimberly.png";
var canvas = document.getElementById('icanvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(imgTag, 0, 0);
var lsFrameWidth = -202.0;
var lsWidth = 0;
timesRun = 1;
var interval = setInterval(function(){
if(timesRun === 75){
timesRun = 1;
lsWidth = 0;
}else if(timesRun < 75)
{
timesRun = timesRun + 1;
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(imgTag, lsWidth, 0);
lsWidth = lsWidth + (lsFrameWidth);
}
}, 90);
这篇关于在div内自动水平移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![^](https://d27jyp35i1l6s7.cloudfront.net/v3.2/agni/assets/carousel/new/jasper.png\"target){kind=link}
