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


Posted in Javascript onFebruary 10, 2014

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

核心代码:

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>
 
Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 #Javascript
使用js实现关闭js弹出层的窗口
Feb 10 #Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 #Javascript
js实现省市联动效果的简单实例
Feb 10 #Javascript
js+div实现图片滚动效果代码
Feb 10 #Javascript
javascript实现数字验证码的简单实例
Feb 10 #Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 #Javascript
You might like
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
javascript操作数组详解
2014/12/17 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
javascript求日期差的方法
2016/03/02 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python之文字转图片方法
2018/05/10 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
c++工程师面试问题
2013/08/04 面试题
创意活动策划书
2014/01/15 职场文书
铲车司机岗位职责
2014/03/15 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
师范毕业生求职信
2014/07/11 职场文书
公民代理授权委托书
2014/09/24 职场文书
班主任高考寄语
2015/02/26 职场文书
法人代表资格证明书
2015/06/18 职场文书
《检阅》教学反思
2016/02/22 职场文书