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


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 继承机制的实现
Aug 12 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
js实现翻牌小游戏
Jul 31 Javascript
点击弹出层效果&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
德劲1103二次变频版的打磨
2021/03/02 无线电
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php解析xml方法实例详解
2015/05/12 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python决策树之CART分类回归树详解
2017/12/20 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
房地产开发项目建议书
2014/05/16 职场文书
户籍证明格式
2014/09/15 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
旷课检讨书范文
2015/01/27 职场文书
电影红河谷观后感
2015/06/11 职场文书