HTML焦点移动到图片上，图片位置发生移动

本文链接：https://blog.youkuaiyun.com/huzijia888/article/details/78702942

<!doctype html>

<html>
<head>

<style>
#tu1{
position:absolute;/*图片不能设置为static，这样才能保证Javascript可以设置位置数据*/
top:0px;
left:30px;
}
#span1{
position:absolute;
top:50px;
left:0px;
}
#shop{
position:absolute;
top:0px;
left:0px;
width:132px;
height:100px;
}
</style>
<script>
var c;
var flag=0;//位置赋值标志位，标志位都是为了避免重复触发脚本
var flag1=0;//向右移动标志位
var flag2=0;//向左移动标志位
function mouseover(){
var pic=document.getElementById("tu1");//读取图片元素
var c=Number(pic.style.left.substring(0,pic.style.left.indexOf('p')));//读取位置信息中的数值字符串，并转化成数字，以实现后面的位置数值加减操作
c=c+1;//向右移动一个像素点
if(c>40){//如果移动到位
clearTimeout(c);//清除时间循环
return;//退出程序
}
pic.style.left=""+c+"px";//更新元素的位置数据
c=setTimeout("mouseover()",30);//设置时间循环
}
function mouseout(){
var pic=document.getElementById("tu1");//读取图片元素
var c=Number(pic.style.left.substring(0,pic.style.left.indexOf('p')));//读取位置信息中的数值字符串，并转化成数字，以实现后面的位置数值加减操作
c=c-1;//向左移动
if(c<30){//如果移动到了指定位置，退出函数
clearTimeout(c);//清除时间循环
return;//退出时间函数
}
pic.style.left=""+c+"px";//更新位置信息
c=setTimeout("mouseout()",30);//设置时间循环
}
function right(){
var pic=document.getElementById("tu1");//读取图片元素
clearTimeout(c);//清除时间循环
if(flag==0){//必须在Javascript中至少写入一次位置数据，才可以读取位置数据，在css中事先设置的参数读不出来
pic.style.left="30px";
flag=1;//将标志取反，避免重复赋值
}
if(flag1==0){
flag1==1;//右移标志位复位
flag2==0;//左移标志位置位
mouseover();//右移
}
}
function left(){
clearTimeout(c);
if(flag2==0){
flag1==0;//右移标志位置位
flag2==1;//左移标志位复位
mouseout();//左移
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<div id="shop" οnmοuseοver="right()" οnmοuseοut="left()">
<span id="span1">柯基</span><img src="../网页/image/coji.jpeg" height="100" id="tu1">
</div>
</body>
</html>