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


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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
javascript中Function类型详解
Apr 28 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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
php定界符
2014/06/19 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
js函数排序的实例代码
2013/07/01 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
详解a++和++a的区别
2017/08/30 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
实例讲解React 组件
2020/07/07 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
让python在hadoop上跑起来
2016/01/27 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python变量命名的7条建议
2019/07/04 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
继电保护工岗位职责
2014/01/05 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
涨价通知
2015/04/23 职场文书
小爸爸观后感
2015/06/15 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
mysql sock文件存储了什么信息
2022/07/15 MySQL