一款JS+CSS打造的带Loading效果的图片切换效果丨芯晴网页特效丨CsrCode.Cn

最新推荐文章于 2024-07-06 16:47:02 发布

dfsfdsds5241

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量130

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/csr04/archive/2012/08/24/2654209.html

版权

<!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>一款JS+CSS打造的带Loading效果的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type= " text/css ">
body,div,ul,li{margin: 0;padding: 0;}
li{list-style:none;}
body{font:12px/ 1.5 \5fae\8f6f\96c5\9ed1;background:# 000;}
#big{position:relative;width:600px;height:auto!important;height:400px;min-height:400px;margin:20px auto;text-align:center;}
#title{position:absolute;top: 0;left: 0;width: 100%;background:# 000;color:#fff;opacity: 0.7;filter:alpha(opacity= 70);font-size:20px;height:50px;}
#title span{padding: 0 5px;line-height:50px;display:block;}
#big.loading{background:url(http: // www.CsrCode.cn/imagesforcode/201206/loading.gif) 50% 50% no-repeat;}
#masks_L,#masks_R{position:absolute;top: 0;width:400px;height: 100%;cursor:pointer;background:#f0f0f0;opacity: 0;filter:alpha(opacity= 0);}
#masks_L{left: 0;}
#masks_R{right: 0;}
#btn_L,#btn_R{position:absolute;top: 50%;margin-top:-40px;width:39px;height:80px;overflow:hidden;cursor:pointer;text-indent:-9999px;background:url(http: // www.CsrCode.cn/imagesforcode/201206/btn.png) no-repeat;opacity:0;filter:alpha(opacity=0);}
#btn_L{left:10px;background-position: 0 0;}
#btn_R{right:10px;background-position:-39px 0;}
</style>
<script type= " text/javascript ">
function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]}
window.onload = function ()
{
var oBig = document.getElementById( " big ");
var oMasksL = document.getElementById( " masks_L ");
var oMasksR = document.getElementById( " masks_R ");
var oBtnL = document.getElementById( " btn_L ");
var oBtnR = document.getElementById( " btn_R ");
var oTitle = document.getElementById( " title ");
var oSpan = oTitle.getElementsByTagName( " span ")[ 0];
var iNow = 0;
var aData = [
  { " imgSrc " : " http://www.CsrCode.cn/images/1.jpg ", " title " : " 红叶传情。 "},
  { " imgSrc " : " http://www.CsrCode.cn/images/2.jpg ", " title " : " 野花绽放。 "},
  { " imgSrc " : " http://www.CsrCode.cn/images/3.jpg ", " title " : " 往事如茶。 "},
  { " imgSrc " : " http://www.CsrCode.cn/images/4.jpg ", " title " : " 油菜花开。 "},
  { " imgSrc " : " http://www.CsrCode.cn/images/5.jpg ", " title " : " 玫瑰情思。 "}
];

oMasksL.onmouseover = oBtnL.onmouseover = function ()
{
  startMove(oBtnL, " opacity ", 100)
};
oMasksL.onmouseout = oBtnL.onmouseout = function ()
{
  startMove(oBtnL, " opacity ", 0)
};

oMasksR.onmouseover = oBtnR.onmouseover = function ()
{
  startMove(oBtnR, " opacity ", 100)
};
oMasksR.onmouseout = oBtnR.onmouseout = function ()
{
  startMove(oBtnR, " opacity ", 0)
};

function startMove(obj, attr, iTarget, fnEnd)
{
  clearInterval(obj.timer);
  obj.timer = setInterval(function ()
  {
   doMove(obj, attr, iTarget, fnEnd)
  }, 30)
}

function doMove(obj, attr, iTarget, fnEnd)
{
   var iCur = parseFloat(getStyle(obj, attr));
   if (attr == " opacity ")
  {
   iCur = parseInt(iCur * 100)
  }
   var iSpeed = (iTarget - iCur) / 5;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

   if (iTarget == iCur)
  {
   clearInterval(obj.timer);
   fnEnd && fnEnd();
  }
   else
  {
    if (attr == " opacity ")
   {
    obj.style.filter = " alpha(opacity = " + (iCur + iSpeed) + " ) ";
    obj.style.opacity = (iCur + iSpeed) / 100;
   }
    else
   {
    obj.style[attr] = iCur + iSpeed + " px ";
   }
  }
}

oBtnL.onclick = function ()
{

   if (iNow <= 0)
  {
   alert( " 前面没有图片了！ ")
    return;
  }
  iNow--;
  loadImg();
};

oBtnR.onclick = function ()
{
   if(iNow >= aData.length - 1)
  {
   alert( " 这是最后一张图片了！ ")
    return;
  }
  iNow++;
  loadImg();
};

loadImg();
function loadImg()
{
  oBig.className = " loading ";
  oSpan.style.opacity = oTitle.style.height = 0;
  oSpan.style.filter = " alpha(opacity=0) ";
   var oImg = oBig.getElementsByTagName( " img ");
  oImg[ 0] && oBig.removeChild(oImg[ 0]);
   var oTemp = document.createElement( " img ");
   var oNewImg = new Image();
  oNewImg.onload = function ()
  {
   oBig.className = "";
   oTemp.src = this.src;
   oBig.appendChild(oTemp);
   oTemp.style.width = (oTemp.offsetWidth > 800 ? 800 : oTemp.offsetWidth) + " px ";
   oBig.style.height = oTemp.style.height = oTemp.offsetHeight * oTemp.offsetWidth / oTemp.offsetWidth + " px ";
   oSpan.innerHTML = aData[iNow].title;
   startMove(oTitle, " height ", 50, function (){
    startMove(oTitle.childNodes[ 0], " opacity ", 100)
   })
  };
  oNewImg.src = aData[iNow].imgSrc
}
};
</script>
</head>
<body>
<div id= " big ">
     <div id= " masks_L "></div>
     <div id= " masks_R "></div>
        <div id= " btn_L ">左</div>
        <div id= " btn_R ">右</div>
        <div id= " title "><span></span></div>
    </div>
</body>
</html>

<br><br><hr><p align= " center "><font color=skyblue>本特效由 <a target= " _blank " href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/24/2654209.html

dfsfdsds5241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一款JS+CSS打造的带Loading效果的图片切换效果丨芯晴网页特效丨CsrCode.Cn

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><met...
复制链接

扫一扫

一款JS+CSS打造的带Loading效果的图片切换效果丨芯晴网页特效丨CsrCode.Cn

“相关推荐”对你有帮助么？