⑴ 如何使用js的計時器來讓一個div背景從左向右移動全部代碼
你好，給你寫了一個很基礎的例子。參照著自己優化成你想要的效果吧。
示例是這樣的，滑鼠移動到div上，背景圖片會從左往右移動直至最右端。滑鼠移出div，背景圖標從右往左直至最左端。
備註：考慮到寬度變化，本例背景圖片使用百分比定位。根據你的實際情況也可改為使用像素(px)定位。
<style>
.bg-div{
height:110px;
background:url(https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/27267a776a746b7505.jpg)0%centerno-repeat#ccc;
}
</style>
<divid="J_BgDiv"class="bg-div"></div>
<script>
(function(){
vardiv=document.getElementById('J_BgDiv');
//背景百分比（從左至右，0%-100%）
varpos=0;
//背景向右移還是向左移（0：向右，1：向左）
vardir=0;
//每次移動的百分比，控制速度
varstep=3;
div.addEventListener('mouseover',function(){
varnode=div;
dir=0;
if(!div.mover){
div.mover=setInterval(function(){
//每次移動10%
if(dir===0){
pos+=step;
}else{
pos-=step;
}
pos=pos>=100?100:pos;
pos=pos<=0?0:pos;
node.style.backgroundPosition=pos+'%center';
},20);
}
},false);
div.addEventListener('mouseout',function(){
dir=1;
},false);
})();
</script>
希望能幫你解決問題，如有疑問可以追問。
⑵ JS腳本如何實現DIV的移動
給div的omousedown指定匿名函數獲取當前的滑鼠坐標
然後在onmouseover中獲取實時的滑鼠坐標 根據div的屬性動回態的設置width height top left 等屬答性
onmouseup 釋放即可
⑶ js,控制一個div向左右勻速移動循環
這個不來需要js， 直接使源用css就行，給你一個簡單的demo，有不懂的可以問我：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{height: 100%; position: relative;}
.demo{position: absolute; width: 80%; height: 200px; background: #2aa198;animation: move 1s linear infinite alternate;}
@keyframes move {
from{left: 0}
to{left: 10%}
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
⑷ js實現div自動在窗口左右移動
<!DOCTYPEHTML>
<html>
<head>
<metacharset=utf-8/>
<title>UFO來了</title>
<script>
window.onload=function(){
vari=10;
varj=0;
vare=target;
varwin=document.documentElement||.body;
functionintern(){
varwidth=e.clientWidth;
varheight=e.clientHeight;
varleft=parseFloat(e.style.left);
vartop=parseFloat(e.style.top);
varwindowWidth=win.clientWidth;
varwindowHeight=win.clientHeight;
if(windowWidth-width<(left+i)){
i=-i;
}elseif((left+i)<0){
i=-i;
}
if(windowHeight-height<(top+j)){
j=-j;
}elseif((top+j)<0){
j=-j;
}
e.style.left=left+i+"px";
e.style.top=top+j+"px";
}
setInterval(intern,30);
};
</script>
</head>
<body>
<divid="target"style="border-radius:90px;background-color:red;width:30px;height:30px;position:absolute;top:100px;left:0px;"></div>
</body>
</html>
⑸ 怎麼樣實現一個div左右翻轉180度 用JavaScript和css
看給你的參考資料哈
翻轉指定角度
IE用matrix
現代瀏覽器用transform
如果需要動畫效果的話
IE用定時器來做
現代瀏覽器用transition就行
⑹ JS讓div左右來回滾動，到達頁面右端時，從右端回到左端，然後到達左端時，從左端到達右端
在你原來的代碼上進行了修改，加粗傾斜的部分是添加或者修改的位置
<script>
var timer1 = null;
var el = null;
var left = 1;
function moveItRight() {
if (parseInt(el.style.left) > (screen.width - 50)) //el.style.left = 0;
{
left = -1;
}
else if (parseInt(el.style.left) <= 0) {
left = 1;
}
el.style.left = parseInt(el.style.left) + 2 * left + 'px';//本題目最關鍵的一句代碼，讓el對象的左邊距每次循環都增加2像素，也就是向右移動了2像素
timer1 = setTimeout(moveItRight, 25);//隔25毫秒後運行一次moveItRight函數
}
window.onload = function () {
el = document.getElementById("div1");
el.style.left = '500px';
moveItRight();
}
</script>
⑺ js怎麼實現div左右滾動效果
js做動畫需要自己做for循環動作 大致就是累加某個樣式參數 例如left值 再判斷是否等於設定值 如果支持css3建議使用css3動畫去做