一款鼠标放在图片或图层焦点位置时产生抖动的特效代码

稿源：互联网 2018-09-21 02:01:57 点击： 9453 撤稿纠错

鼠标放在图层或图片上面，可导致图层或图片抖动的JS特效代码分享

以下讨论的是和鼠标焦点图层抖动相关的一款鼠标放在图片或图层焦点位置时产生抖动的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一款鼠标焦点图层抖动特效代码 by js.alixixi.com</title>
<style type="text/css">
* { padding:0; margin:0;}
#box li { position:relative; display:inline-block; *display:inline; zoom:1; margin:10px; width:100px; height:100px; background:#080; }
</style>
<script type="text/javascript">
    window.onload = function(){
  var obj = document.getElementById("box"),
      oLi = obj.getElementsByTagName("li"),
   len = oLi.length,
   timer = null,
   iNow = 3;
  
  for(var i = len;i--;){
      oLi[i].onmouseover = function(){
    shade(this);
   } 
      oLi[i].onmouseout = function(){
    clearInterval(timer);
    this.style.left = 0;
    this.style.top = 0;
   } 
  };
  
  function shade(el){
     clearInterval(timer);
     timer = setInterval(function(){
      el.style.left = iNow+"px";
      el.style.top = iNow+"px";
      iNow = -iNow;
      },50);
  }
      
 }
 
</script>
</head>

<body>
<ul id="box">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
</body>
</html>

关于一款鼠标放在图片或图层焦点位置时产生抖动的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092184921.shtml方便下次再访问哦。

·上一篇： 网页上可点击关闭的纯代码无图版浮动tips提示特效代码
·下一篇： 很简洁的js树状竖型风格导航菜单代码

一款鼠标放在图片或图层焦点位置时产生抖动的特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻