`

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

阅读更多


核心代码:

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布局:


                   
    <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>

              

                     <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>
                          

                 </td>
               
           </c:forEach>
            </tr>
               <% } %>
           </c:otherwise>
          </c:choose>
         </table>
       

        <div class="shadow_right"></div>
                    <div class="pic_right"></div>
                    <div id="bg"></div>
        <div id="bottom">
         

                <li class="prev"></li>
                   <li class="img"></li>
                   <li class="next"></li>
                   <li class="close"></li>
              

        </div>
         <div id="frame"></div>
  • 大小: 102.2 KB
0
0
分享到:
评论

相关推荐

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

    本文将详细介绍如何通过HTML和CSS实现一个简单的页面图片浮动左右滑动效果。 首先,我们需要设置基本的CSS样式。`html`和`body`标签的设置是为了确保全屏无边距,使得内容能够完全显示。`a`标签的`outline`属性设置...

    从腾讯科技热点推荐扒下的图片滑动效果代码 修正版.zip

    该压缩包文件“从腾讯科技热点推荐扒下的图片滑动效果代码 修正版.zip”主要包含了一个前端代码示例,用于实现类似腾讯科技热点推荐页面中的图片滑动效果。这种效果通常在新闻网站、博客或者产品展示页面中非常常见...

    JS特效例子(浮动广告,图片特效等)

    在网页中,JS可以极大地提升用户体验,实现丰富的动态效果。在这个"JS特效例子"压缩包中,我们可能会找到一些用于创建浮动广告、滚动图片以及文字变化等效果的代码示例。 1. **浮动广告**:浮动广告是网页上常见的...

    jQuery菜单背景动态滑动效果导航条.zip

    "jQuery菜单背景动态滑动效果导航条"是一个利用jQuery库实现的互动性菜单,旨在提升用户体验,使用户更容易浏览和理解网站结构。在这个项目中,开发者使用了版本为1.7.2的jQuery迷你版(jquery-1.7.2.min.js)来实现...

    九宫格图片鼠标悬停上下滑动图片切换显示代码.zip

    这个"九宫格图片鼠标悬停上下滑动图片切换显示代码"就是一个很好的实例,它利用JavaScript技术实现了一个动态的图片展示效果,尤其适用于产品展示或者画廊类的网页设计。下面我们将深入探讨这个代码实现的技术细节和...

    jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示

    `find('.submenu')`用于找到当前菜单项内的子菜单元素,然后使用`slideDown`和`slideUp`方法实现滑动效果。 为了增强用户体验,我们还可以添加一些过渡动画效果,如改变背景色、添加阴影等,以及处理菜单项的点击...

    jQuery弹出层 可移动层 提示框 浮动层

    在网页开发中,用户交互体验的重要性日益凸显,其中弹出层(Popup Layer)作为一种常见的交互元素,被广泛应用于提示信息、表单填写、图片预览等场景。jQuery,作为JavaScript库的杰出代表,提供了丰富的API和插件,...

    jquery左侧浮动层热门新闻列表滑动动画展示

    3. **jQuery动画方法**:熟悉`.slideToggle()`, `.slideDown()`, `.slideUp()`等动画方法,用于控制元素的显示和隐藏,实现滑动效果。 4. **CSS样式和布局**:理解CSS在实现浮动层和列表布局中的作用,如`position: ...

    flash实现右侧浮动在线客服代码.zip

    在这个案例中,它可能是一个实现浮动在线客服窗口的动态效果,比如平滑出现、消失、跟随滚动等。特效代码可以使页面更加生动有趣,同时也可以提高用户与网站的互动性。 2. **jQuery插件**: jQuery是一个广泛使用...

    浮动窗口

    浮动窗口在IT行业中通常指的是那些在用户界面中可以自由移动、不会被其他元素遮挡的窗口组件,常见于各种软件和网页设计中。这种技术在实现动态广告、通知提示、设置面板等方面非常实用。在本篇文章中,我们将深入...

    jquery浮动层动画loading页面加载特效

    在本案例中,jQuery被用来创建浮动层,即一个覆盖在网页上的透明或半透明层,它会在页面内容加载期间显示,以告知用户页面正在处理数据。 浮动层通常是一个弹出窗口,可以设置为全屏或只占据屏幕的一部分。在...

    百度右下角浮动留言效果-多风格

    "百度右下角浮动留言效果-多风格"是一个针对网页互动设计的案例,旨在模仿百度网站上的一种流行功能,即在页面右下角显示一个可弹出的小窗口,提供留言或交互服务。这种效果能够吸引用户的注意力,同时不会过于干扰...

    阿里巴巴滑动菜单效果

    阿里巴巴滑动菜单效果是一个典型的应用案例,它通过CSS样式实现了动态的菜单显示与隐藏功能,不仅提升了用户体验,也增强了网站的视觉吸引力。 #### 二、核心CSS样式分析 根据提供的代码片段,我们可以看到该滑动...

    js实现可控制左右方向的无缝滚动效果

    在本案例中,我们重点讨论如何使用JavaScript实现一个可以控制左右滚动方向的无缝滚动效果。 首先,要实现这样的效果,我们需要了解几个关键的技术点:CSS布局、JavaScript定时器以及DOM操作。 在提供的代码示例中...

    CSS加JS滑动门效果

    滑动门效果是一种常见的网页设计技术,主要用于创建具有动态视觉吸引力的导航菜单或图像展示。这一效果通常是通过结合HTML、CSS以及JavaScript实现的。在本文中,我们将深入探讨如何使用这两种技术来创建滑动门效果...

    DIV+CSS案例(21-30)

    在这个案例中,`DIV+CSS`被用来创建清晰的板块划分,如美食图片展示区、描述区和评论区,通过浮动(float)、定位(positioning)和盒模型(box model)来实现元素的排列和间距。 其次,"交通运输网"可能是一个展示...

    网页设计与开发HTML、CSS、JavaScript实例教程教程 课后习题

    例如,创建一个带有导航菜单、图片滑动展示和表单验证功能的网页。这样的练习旨在让你熟悉整个开发流程,从构思页面结构,到设计美观样式,再到实现动态功能。 总的来说,这个实例教程通过课后习题提供了实践HTML、...

    jquery仿腾讯视频鼠标滑过图片滑动动画特效

    在这个案例中,可能通过调整图片的`left`或`right`属性,让隐藏的图片从侧边滑入视野,同时可能还调整了`opacity`属性,以实现淡入淡出效果。 此外,jQuery还提供了链式操作,使得代码更加简洁。例如,可以写成`$(...

    div+css网站布局案例精粹(第2版)30个书本案例代码2015

    6. 静态和动态轮播图:使用CSS动画和JavaScript实现图片切换效果。 除了核心的30个案例,书中还附赠了50个额外的案例,这些案例涵盖了更多实际应用场景,如响应式设计、自适应图像、多列布局等,进一步加深对Div+...

Global site tag (gtag.js) - Google Analytics