软件开发培训班 >> 编程开发 >> JavaScript


页面图片浮动左右滑动效果的简单实现案例

　　本文标签：左右滑动



核心代码：

1.css：16sucai.css

复制代码 代码如下:

html,body {
 height: 100%;
 margin: 0px;
 padding: 0px;
}
a {outline: none;}
img{ border:0;}
a img {vertical-align: top;}
a img.last {margin-right: 0; }
.box {
 width: 850px;
 height: auto;
 overflow: hidden;
 background: #666;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 10px;
 margin-left: auto;
 padding-top: 10px;
 padding-right: 0;
 padding-bottom: 0;
 padding-left: 10px;
}

.box ul {
 margin: 0px;
 padding: 0px;
 float: left;
 list-style-type: none;
}

.box li {
 width: 150px;
 height: 100px;
 float: left;
 cursor: pointer;
 display: inline;
 margin: 0 10px 10px 0;
 border: 5px solid #333;
}

#bg {
 width: 100%;
 height: 898px;
 position: absolute;
 left: 0px;
 top: 0px;
 background: #000;
 filter: alpha(opacity : 50);
 opacity: 0.5;
 display: none;
}

#bg1 {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0px;
 top: 0px;
 background: #000;
 filter: alpha(opacity : 50);
 opacity: 0.5;
 display: none;
}
#bottom {
 width: 215px;
 height: 50px;
 position: absolute;
 left: 50%;
 bottom: 0px;
 margin: 0 0 0 -107px;
 border: 1px solid #232323;
 background: #444;
 padding: 1px;
 z-index: 1;
 display: none;
}

#bottom ul {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #000;
}

#bottom li {
 background: url(../images/ico.jpg) no-repeat;
 float: left;
 display: inline;
 margin: 8px 0 0 18px;
 cursor: pointer;
}

#bottom li.prev {
 width: 30px;
 height: 33px;
 background-position: 0 0;
}

#bottom li.next {
 width: 30px;
 height: 33px;
 background-position: -35px 0;
}

#bottom li.img {
 width: 30px;
 height: 33px;
 background-position: -106px 0;
}

#bottom li.close {
 width: 31px;
 height: 33px;
 background-position: -70px 0;
}

#frame {
 background: #fff;
 padding: 3px;
 position: absolute;
 z-index: 2;
 display: none;
 filter: alpha(opacity : 0);
 opacity: 0;
 text-align: center;
}

#bottom1 {
 width: 215px;
 height: 50px;
 position: absolute;
 left: 50%;
 bottom: 0px;
 margin: 0 0 0 -107px;
 border: 1px solid #232323;
 background: #444;
 padding: 1px;
 z-index: 1;
 display: none;
}

#bottom1 ul {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #000;
}

#bottom1 li {
 background: url(../../images/ico.jpg) no-repeat;
 float: left;
 display: inline;
 margin: 8px 0 0 18px;
 cursor: pointer;
}

#bottom1 li.prev {
 width: 30px;
 height: 33px;
 background-position: 0 0;
}

#bottom1 li.next {
 width: 30px;
 height: 33px;
 background-position: -35px 0;
}

#bottom1 li.img {
 width: 30px;
 height: 33px;
 background-position: -106px 0;
}

#bottom1 li.close {
 width: 31px;
 height: 33px;
 background-position: -70px 0;
}

#frame1 {
 background: #fff;
 padding: 3px;
 position: absolute;
 z-index: 2;
 display: none;
 filter: alpha(opacity : 0);
 opacity: 0;
 text-align: center;
}
/
html,body {
 height: 100%;
 margin: 0px;
 font-size: 12px;
}

.mydiv {
 background-color: #FFCC66;
 background:url(../images/loginbg.png) no-repeat;
 border: 0px solid #f00;
 overflow-y:auto;
 overflow-x:auto;
 text-align: center;
 line-height: 40px;
 font-size: 12px;
 font-weight: bold;
 z-index: 999;
 width: 434px;
 height: 238px;
 left: 50%;
 top: 50%;
 margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
 margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
 margin-top: 0px;
 position: fixed !important; /* FF IE7*/
 position: absolute; /*IE6*/
 _top: expression(eval(document . compatMode &&
             document . compatMode == CSS1Compat) ?
             documentElement . scrollTop +   ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
             document . body . scrollTop +   ( document . body .
  clientHeight -   this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.mydiv1 {
 background-color: #FFCC66;
 border: 0px solid #f00;
 text-align: center;
 line-height: 40px;
 font-size: 12px;
 font-weight: bold;
 overflow-y:auto;
 overflow-x:auto;
 z-index: 999;
 width: 434px;
 height: 238px;
 left: 50%;
 top: 50%;
 margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
 margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
 margin-top: 0px;
 position: fixed !important; /* FF IE7*/
 position: absolute; /*IE6*/
 _top: expression(eval(document . compatMode &&
             document . compatMode == CSS1Compat) ?
             documentElement . scrollTop +   ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
             document . body . scrollTop +   ( document . body .
  clientHeight -   this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.bg,.popIframe {
 background-color: #666;
 display: none;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0; /*FF IE7*/
 filter: alpha(opacity = 50); /*IE*/
 opacity: 0.5; /*FF*/
 z-index: 1;
 position: fixed !important; /*FF IE7*/
 position: absolute; /*IE6*/
 _top: expression(eval(document . compatMode &&
             document . compatMode == CSS1Compat) ?
             documentElement . scrollTop +   ( document .
  documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
             document . body . scrollTop +   ( document . body .
  clientHeight -   this . clientHeight )/ 2 );
}

.popIframe {
 filter: alpha(opacity = 0); /*IE*/
 opacity: 0; /*FF*/
}


2.js事件：
复制代码 代码如下:

  <link rel="stylesheet" type="text/css" href="<%=path%>/css/16sucai.css" />
   <script type="text/javascript">
   function aa(id){
    var ID = id.substring(1,2);
    var obj2 = document.getElementById(ID);
    showPigDyt(obj2);
   }
   function showInfo(id)
  {
   document.getElementById(id).style.display = "block";
  }
  function hiddenInfo(id)
  {
   document.getElementById(id).style.display = "none";
  }
   </script>
  <script language="javascript">
   //首页点击查看景点热门照片
  function showPigDyt(obj2) {
   var srcPath = obj2.name;
   var ID= obj2.id;
   var oBox = document.getElementById("con");
   var oBg = document.getElementById("bg");
   var oBot = document.getElementById("bottom");
   var aBli = oBot.getElementsByTagName("li"); 
   var oFrame = document.getElementById("frame");
   //var aLi = oBox.getElementsByTagName("li");
   var aLi=$("li[class=conn]");//获取所有a标签的li标签(集合)
   //var aImg = oBox.getElementsByTagName("img");
   var aImg=$("img[class=conn]");//获取所有a标签里的img标签(集合)
   //alert(aImg);
   var i = iNow = 0;
   for (i = 0; i < aLi.length; i++) {
    aLi[i].index = i;
    aLi[i].onclick = function () {
     with (oFrame.style) {
      display = "block", top = this.offsetTop + "px", left = this.offsetLeft + "px", width = this.offsetWidth + "px", height = this.offsetHeight + "px";
     }
     //alert(srcPath);
     oFrame.innerHTML = "<img id=\"" + ID + "\" onmouseover=upNext(this) src=\"" + (srcPath) + "\" />";
     var oImg = oFrame.getElementsByTagName("img")[0];
     var iWidth;
     var iHeight;
     if(oImg.width < 600 || oImg.width == 0){
      iWidth = 600;
     }else{
      iWidth = oImg.width;
     }
     if(oImg.width < 425 || oImg.height == 0){
      iHeight = 425;
     }else{
      iHeight = oImg.height;
     }
     var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth / 2));
     var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight / 2) - 50);
     with (oImg.style) {
      height = width = "100%";
     }
     startMove(oFrame, {opacity:100, left:iLeft, top:iTop, width:iWidth, height:iHeight});
     oBg.style.display = "block";
     oBot.style.display = "block";
     iNow = this.index + 1;
    };
   }
   document.onmousedown = function () {
    return false;
   };
   aBli[0].onclick = function () {   //箭头向左事件触发
    if(ID == 0){
     ID = aLi.length;
    }
    ID--;
    var pathImg = document.getElementById(ID).name;
    oFrame.innerHTML = "<img  id=\"" + ID + "\" onmouseover=upNext(this) src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" />";
   };
   aBli[1].onclick = function () {
    oFrame.style.cursor = "move";
    oFrame.onmousedown = function (e) {
     var oEvent = e || event;
     var X = oEvent.clientX - oFrame.offsetLeft;
     var Y = oEvent.clientY - oFrame.offsetTop;
     document.onmousemove = function (e) {
      var oEvent = e || event;
      var L = oEvent.clientX - X;
      var T = oEvent.clientY - Y;
      if (L < 0) {
       L = 0;
      } else {
       if (L > document.documentElement.clientWidth - oFrame.offsetWidth) {
        L = document.documentElement.clientWidth - oFrame.offsetWidth;
       }
      }
      if (T < 0) {
       T = 0;
      } else {
       if (T > document.documentElement.clientHeight - oFrame.offsetHeight) {
        T = document.documentElement.clientHeight - oFrame.offsetHeight;
       }
      }
      oFrame.style.left = L + "px";
      oFrame.style.top = T + "px";
      oFrame.style.margin = 0;
      return false;
     };
     document.onmouseup = function () {
      document.onmouseup = null;
      document.onmousemove = null;
     };
     return false;
    };
   };
   aBli[2].onclick = function () {  //箭头向右事件触发
    if(ID == (aLi.length-1)){
     ID = -1;
    }
    ID++;
    var pathImg = document.getElementById(ID).name;
    oFrame.innerHTML = "<img id=\"" + ID + "\" onmouseover=upNext(this) src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" />";
   };
   aBli[3].onclick = function () {  //箭头关闭事件触发
    //alert("32" + iNow - 1);
    //alert("32" + aImg[iNow - 1].offsetTop);
    startMove(oFrame, {opacity:0, left:aImg[iNow - 1].offsetLeft, top:aImg[iNow - 1].offsetTop, width:150, height:100}, function () {
     oFrame.style.display = "none";
     oBg.style.display = "none";
     oBot.style.display = "none";
     oFrame.onmousedown = null;
     oFrame.style.cursor = "auto";
    });
   };
  }
  function upNext(bigimg){
   var oBox = document.getElementById("con");
   //var aLi = oBox.getElementsByTagName("li");
   var aLi=$("li[class=conn]");//获取所有a标签的li标签
   var ID = bigimg.id;
   var leftId;
   var rightId;
   if(ID == 0){
    leftId = aLi.length;
    rightId = 1;
   }else if(ID == (aLi.length-1)){
    leftId = (aLi.length-1);
    rightId = 0;
   }else{
    var leftId = ID++;
    var rightId = ID--;
   }
   var leftpath = document.getElementById(--leftId).name;
   var rightpath = document.getElementById(rightId).name;
   var lefturl = "<img id=\"" + leftId + "\" onmouseover=upNext(this) src=\"" + leftpath + "\" width=\"100%\" height=\"100%\" />";
   var righturl = "<img id=\"" + rightId + "\" onmouseover=upNext(this) src=\"" + rightpath + "\" width=\"100%\" height=\"100%\" />";
   var width = bigimg.width;
   var height = bigimg.height;
   var imgurl = righturl;
   var oFrame = document.getElementById("frame");
   bigimg.onmousemove=function(){
    if(event.offsetX<width/2){
     bigimg.style.cursor = url(images/arr_left.cur),auto;
     imgurl = lefturl;
    }else{
     bigimg.style.cursor = url(images/arr_right.cur),auto;
     imgurl = righturl;
    }
   }
   bigimg.onmouseup=function(){
    if(event.offsetX < width/2){
     oFrame.innerHTML = lefturl;
    }else{
     oFrame.innerHTML = righturl;
    }
   }
  }

  function startMove(obj, json, onEnd) {
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
    doMove(obj, json, onEnd);
   }, 30);
  }
  function getStyle(obj, attr) {
   return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
  }
  function doMove(obj, json, onEnd) {
   var attr = "";
   var bStop = true;
   for (attr in json) {
    var iCur = 0;
    if (attr == "opacity") {
     iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
    } else {
     iCur = parseInt(getStyle(obj, attr));
    }
    var iSpeed = (json[attr] - iCur) / 5;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    if (json[attr] != iCur) {
     bStop = false;
    }
    if (attr == "opacity") {
     obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")";
     obj.style.opacity = (iCur + iSpeed) / 100;
    } else {
     obj.style[attr] = iCur + iSpeed + "px";
    }
   }
   if (bStop) {
    clearInterval(obj.timer);
    if (onEnd) {
     onEnd();
    }
   }
  }

</javascript>


3.页面div布局：
复制代码 代码如下:

<div class="pic" id="con">
        <table width="100%" border="0" cellpadding="0" cellspacing="0"
         class="table_01">
         <c:choose>
          <c:when test="${empty image_list}">
           <tr style="height: 20px">
            <td colspan="2">
             暂时没有图片信息
            </td>
           </tr>
          </c:when>
          <c:otherwise>
           <%for (int i = 0; i < 3; i++) {%>
            <tr>
           <c:forEach var="image" items="${image_list}"
            begin="<%=i * 5%>" end="<%=(i + 1) * 5 - 1%>" varStatus="strs">

               <td align="left">
                   <ul><li class="conn">
                     <a onclick="aa(this.id)" id="s${strs.index }">
                        <img class="conn" id="${strs.index }" style="height: 116px;width: 116px" src="<%=WholeProperties.IMAGE_IMAGE_URL %>/${image.imagePathSmall}" onclick="showPigDyt(this,${image.imagePathMiddle})" name="<%=WholeProperties.IMAGE_IMAGE_URL %>/${image.imagePathMiddle}"/></a>  
                   </li></ul>
              <ul>
                <li style="line-height:20px">
                  <input type="checkbox" id="upPicID" name="upPicID" value="${image.id }" />
                  <c:choose>
                    <c:when test="${fn:length(image.imageName) > 6}"> 
                       <c:out value="${fn:substring(image.imageName, 0, 6)}..." /> 
                   </c:when>
                    <c:otherwise> 
                       <c:out value="${image.imageName}" /> 
                    </c:otherwise>
                  </c:choose>
                </li>
                <li style="line-height:20px">上传时间：<c:out value="${fn:substring(image.uploadTime,0,9)}"></c:out></li>
                <li style="line-height:20px">图片大小：${image.imageSize }</li>
                       </ul>
                </td>

           </c:forEach>
           </tr>
              <% } %>
          </c:otherwise>
         </c:choose>
        </table>
       </div>
       <div class="shadow_right"></div>
                   <div class="pic_right"></div>
                   <div id="bg"></div>
       <div id="bottom">
         <ul>
           <li class="prev"></li>
              <li class="img"></li>
              <li class="next"></li>
              <li class="close"></li>
          </ul>
       </div>
        <div id="frame"></div>