htmldiv⿏标选中状态,html+css+javascript实现跟随⿏标移动显
⽰选中效果
1，显⽰效果：
2,html结构
End customer get product11
Log in EFOSE website and present installation or maintenance requirements 22
EFOSE prefer contact service point33
Customer contact service point to get service44
Customer pays the bill directly or EFOSE pays the maintenance cost55
3，主要的css样式
.line-lpu{ height:55px; position:relative; width:100%; overflow:hidden;}
.line-lpu span{ width:43px; height:46px; background:url('www.efose/images/banners/lpu_03.png') no-repeat; position:absolute;top:0;}
.border-lpu{border-bottom:1px solid #959595; height:23px; }
.join-lpu li{ width:19%; float:left; margin-right:8px;background:none; padding:0; }
.join-lpu li a{ display:block; color:#606060; text-decoration:none; border:1px solid #959595; min-height:215px;
padding:10px;position:relative; overflow:hidden;}
.
join-lpu li a:hover{border:1px solid #337ab7;}
.join-lpu li b{ font-size:60px; position:absolute; bottom:7px; right:-1px; font-style:italic; color:#c7c7c7;}
.clear{clear:both;}
.step-lpu span{ background:url('www.efose/images/banners/icon-lpu.png') no-repeat; display:block; width:75px; height:65px; margin-left:28px;}
.step-lpu .icon0{ background-position:0 0;}
.step-lpu .icon1{ background-position:0 -70px;}
.step-lpu .icon2{ background-position:0 -140px;}
.step-lpu .icon3{ background-position:0 -204px; height:58px; margin-bottom:7px;}
.step-lpu .icon4{ background-position:0 -260px;}
4，JavaScript的编写
//实例化animationHover对象
var ah = new animationHover();
ah.init();
};
//初始化标签对象
function animationHover(){
this.step = ElementById('step');
this.stepLi = ElementsByTagName('li'); this.line = ElementById('line');
this.attr = null;
this.timer = null;
this.target = null;
}
//初始化事件
animationHover.prototype.init=function(){
This =this;
for(var i=0;i
this.stepLi[i].index=i;
//给li标签绑定事件
this.stepLi[i].οnmοuseοver=function(e){
var myIndex=this.index;
};
this.stepLi[i].οnmοuseοut=function(){
This.line.style.left=myIndex*162+55+'px';
};
}
};
//定义⿏标经过的处理函数
Over=function(obj,target){ This=this;
clearInterval(this.timer);
This.target=target;
timer=setInterval(function(){
var target=This.target; //停⽌的⽬标点
css鼠标点击样式var attrValue=Style(obj,'left'));
var dx=target-attrValue; //距⽬标点的"路程"
var speed=1/10*dx;
speed=speed>il(speed):Math.floor(speed);
//防⽌取整引起的抖动
if(target==attrValue) clearInterval(timer);
//如果到达⽬标点，关闭定时器
else{
obj.style.left=attrValue+speed+'px';
}
},100);
};
//获取当前标签对象的css属性值
Style =function(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
};
总结
以上所述是⼩编给⼤家介绍的html+css+javascript实现跟随⿏标移动显⽰选中效果 ，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！