鼠标悬念时背景变灰色焦点突出显示所悬停图片及显示浮动文字

稿源：互联网 2018-09-03 01:34:26 点击： 15338 撤稿纠错

这样一个效果，鼠标经过悬停后，突出显示。同时周围的其它内容变暗...

以下讨论的是和悬停浮动文字焦点相关的鼠标悬念时背景变灰色焦点突出显示所悬停图片及显示浮动文字教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(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>鼠标焦点突出显示所悬停图片及显示浮动文字 demo by js.alixixi.com</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
 var countArr = [];
 var obj = getClass(document.body,"box");
 for(var i=0;i<obj.length;i++){
  for( var j=0;j<obj[i].getElementsByTagName("li").length;j++){
   var liObj = obj[i].getElementsByTagName("li")[j];
   countArr.push(liObj);
   liObj.onmouseover = function(){
    for(var k=0;k<countArr.length;k++){
     startMove(countArr[k],{opacity:30});
    }
    startMove(this,{opacity:100});
   }
   liObj.onmouseout = function(){
    for(var k=0;k<countArr.length;k++){
     startMove(countArr[k],{opacity:100});
    }
   }
  }
 }
}
/**
* 通过class获取对象
*/
function getClass(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
}
/**
* 动作类
* 用法：
* startMove(目标对象 ,目标属性(多个), 动作完成后执行(fun))
*/
function startMove(target, object, onComplete){
 if(target.timer)clearInterval(target.timer);
 target.timer = setInterval(function (){
  doMove(target, object, onComplete);
 }, 30);
}
function getStyle(target, attr){
 return target.currentStyle?target.currentStyle[attr]:getComputedStyle(target, false)[attr];
}
function doMove(target, object, onComplete){
 var iCur = 0;
 var attr = '';
 var bStop = true;
 for(attr in object){
  attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(target, 'opacity'))*100) : iCur = parseInt(getStyle(target, attr));
  if(isNaN(iCur))iCur = 0;
  if(navigator.userAgent.indexOf("Firefox") > 0){
   var iSpeed = (object[attr]-iCur) / 3;
  }else{
   var iSpeed = (object[attr]-iCur) / 3;
  }
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if(parseInt(object[attr])!=iCur)bStop = false;
  if(attr=='opacity'){
   target.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
   target.style.opacity = (iCur + iSpeed) / 100;
  }else{
   attr == 'zIndex' ? target.style[attr] = iCur + iSpeed : target.style[attr] = iCur + iSpeed +'px';
  }
 }
 if(bStop){
  clearInterval(target.timer);
  target.timer = null;  
  if(onComplete)onComplete();
 }
}
$(function(){
$(".box li").each(function() {
  $(this).hover(function() {
   $(this).find('.txtDesc').slideDown(200);
   if(!$(this).hasClass('hover'))
   {
    $(this).addClass("hover");
   }
 },
  function() {
   $(this).find('.txtDesc').hide(); 
   if($(this).hasClass('hover'))
   {
    $(this).removeClass("hover");
   }  
  });
 });
})

</script>
<style type="text/css">
img{border:0px;}
body{
 background:#333;
 background-color: #000;
}
.box{ width:1300px;  margin:0 auto;}
.albumIndex .albumTitle{ width:100%; position:absolute; bottom:0px; background:#fff; z-index:999999; display:none;}
.box li{list-style:none; float:left; margin-right:50px; cursor:pointer; margin-bottom:50px;padding:1px;}
.box li img{display:block;border:none;width:200px;height:230px;}
.box li a {margin:0px;display:block;position: relative;border:1px solid #069;
}
.box li.hover{border:1px dotted #d60000;padding:0px;}
.box li.hover a{border:0px;}
.box li span{margin-top:-30px;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;text-align:center;background:#4C4C4C;color:#fff;position:absolute;display:none;width:200px;height:30px;line-height:30px;}
</style>
</head>

<body>
<div class="box">
 <ul>
     <li><img src="http://www.alixixi.cn/images/index/t10.gif" /><span class="txtDesc">我是文字描述1</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t8.gif" /><span class="txtDesc">我是文字描述2</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t6.gif" /><span class="txtDesc">我是文字描述3</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t4.gif" /><span class="txtDesc">我是文字描述4</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t2.gif" /><span class="txtDesc">我是文字描述5</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t11.gif" /><span class="txtDesc">我是文字描述6</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t3.gif" /><span class="txtDesc">我是文字描述7</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t5.gif" /><span class="txtDesc">我是文字描述8</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t7.gif" /><span class="txtDesc">我是文字描述9</span></li>
        <li><img src="http://www.alixixi.cn/images/index/t12.gif" /><span class="txtDesc">我是文字描述0</span></li>
    </ul>
</div>

</body>
</html>

关于鼠标悬念时背景变灰色焦点突出显示所悬停图片及显示浮动文字的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090391720.shtml方便下次再访问哦。

·上一篇： 兼容谷歌浏览器，IE浏览器和360极速浏览器等多浏览器的加入收藏特效代码
·下一篇： js实现两个单选按钮，选不同的选项弹出显示不同的下拉框

鼠标悬念时背景变灰色焦点突出显示所悬停图片及显示浮动文字

文章分类LIST >>返回首页

最新游戏

最新新闻

鼠标悬念时背景变灰色 焦点突出显示所悬停图片及显示浮动文字

文章分类LIST >>返回首页

最新游戏

最新新闻

鼠标悬念时背景变灰色焦点突出显示所悬停图片及显示浮动文字