鼠标移过去就显示的JS代码

本文介绍了一种利用HTML元素的title属性来替代复杂JavaScript代码实现提示框效果的方法,这不仅简化了代码,还提高了网页的用户体验。

<span onmouseover="showdes()">showdes</span>

<div style="position:absolute;font-size:9pt;background-color:#F1FAF7;width:150;display:none" id="des"></div>

function showdes(){

 var obj=event.srcElement.parentElement.children(5);
 var obj2=event.srcElement.parentElement.children(3);
 if(obj!=null||obj2!=null){
  if(obj.innerText!=""||obj2.innerText!=""){
   document.getElementById('des').style.display="block";
   document.getElementById('des').innerHTML="<table border=1 bordercolor=black width=150><tr><td style='white-space:normal;padding:5pt'>"+obj2.innerText+obj.innerText+"</td></tr></table>";
   x=event.clientX;
   y=event.clientY;
   var bwidth=document.body.offsetWidth;
   if((x+150)>bwidth){
    x=x-150;
   }
   document.getElementById('des').style.top=y+5;
   document.getElementById('des').style.left=x+5;
  }
  else{
   document.getElementById('des').style.display="none";
  }
 }
 event.cancelBubble=true;
}

document.body.attachEvent("onmouseover",closedes);

function closedes(){
 document.getElementById('des').style.display="none";
}

 

 

更简单的方法:<span title="no des">blockname</span>  用title就可以代替以上的代码了

可以使用jQuery的定时器和鼠标事件来实现幻灯片每张图停留时间不同并且鼠标移动过去停止播放移开后恢复的效果。 HTML结构: ``` <div class="slider"> <ul> <li><img src="image1.jpg" data-timeout="5000"></li> <li><img src="image2.jpg" data-timeout="3000"></li> <li><img src="image3.jpg" data-timeout="4000"></li> </ul> </div> ``` CSS样式: ``` .slider { position: relative; overflow: hidden; width: 600px; height: 400px; } .slider ul { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .slider li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; list-style: none; } .slider img { width: 100%; height: 100%; display: block; } ``` JavaScript代码: ``` $(function() { var slider = $(".slider"); var ul = slider.find("ul"); var li = ul.find("li"); var img = li.find("img"); var active = 0; var timer; // 播放下一张图片 function next() { active++; if (active >= li.length) { active = 0; } show(); } // 显示当前图片 function show() { li.eq(active).fadeIn().siblings().fadeOut(); var timeout = parseInt(img.eq(active).data("timeout")); clearInterval(timer); timer = setInterval(next, timeout); } // 鼠标移动到幻灯片上时停止播放 slider.mouseenter(function() { clearInterval(timer); }); // 鼠标移开幻灯片时恢复播放 slider.mouseleave(function() { var timeout = parseInt(img.eq(active).data("timeout")); timer = setInterval(next, timeout); }); // 初始化播放 show(); }); ``` 以上代码实现了每张图片停留时间不同并且鼠标移动过去停止播放移开后恢复的效果。其中,在HTML中使用了data-timeout属性来指定每张图片停留的时间,在JavaScript中使用了定时器和鼠标事件来控制播放和暂停。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值