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

2024-11-30 15:28:43

核心代码：

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事件：

代码如下:

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

jquery实现上下左右滑动的方法

本文实例讲述了jquery实现上下左右滑动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
jQuery点击后一组图片左右滑动的实现代码

复制代码代码如下: $(function () { var page = 1;//初始化page变量 var i = 2;//每版放两组图片 var $pictureShow = $(".pictures4"); var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 var pa
用jquery写的菜单从左往右滑动出现

最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5).CSS.Javascri
android 左右滑动+索引图标实现方法与代码

使用Gallery和ImageView实现android左右滑动+索引图标效果. 首先自定义Gallery实现一次只能滑动一个页面复制代码代码如下: public class MGalleryView extends Gallery{ public MGalleryView(Context context, AttributeSet attrs) { super(context, attrs); } //一次只能滑动一张图片注:一张图充满全屏 @Override public boolean
Android左右滑出菜单实例分析

现在的Android应用,只要有一个什么新的创意,过不了多久,几乎所有的应用都带这个创意.这不,咱们公司最近的一个持续性的项目,想在首页加个从左滑动出来的菜单,我查阅网上资料,并自己摸索,实现了左.右两边都能滑出菜单,并且,左.右菜单中,都可以加ListView等这类需要解决GestureDetector冲突的问题(如在首页面中,含有ListView,上下滚动时,左右不动,相反,左右滑动菜单时,上下不动,听着头就大了吧!) 先上几张图,给大家瞧瞧,对整体有个了解: 一.首页布局: 复制代码代
Android NavigationController 右滑手势详解

苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecognizer.enabled = YES; 这个api功能就是在NavigationController堆栈内的UIViewController可以支持右滑手势,也就是不用点击右上角的返回按钮,轻轻在屏幕左边一滑,屏幕就会返回,随着ios设备屏幕的增大,这个小功能让手指短,拇指大和手残人士看到了福音. 这
如何在Android中实现左右滑动的指引效果

本文的目的是要实现左右滑动的指引效果.那么什么是指引效果呢?现在的应用为了有更好的用户体验,一般会在应用开始显示一些指引帮助页面,使用户能更好的理解应用的功能,甚至是一些新闻阅读器会把一些头条新闻以指引效果的形式显示.说个最基本的,就是我们的手机主屏幕就是这种效果. 下面我们就开始实现我们的左右滑动指引效果.为了大家更好的理解,我们先看下实现效果,如下图所示: 在这里,我们需要用到google提到的一个包--android-support-v4.jar,这个包包含了一些非常有用的类,其中
Android实现左右滑动效果的方法详解

本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果.为了方便大家理解,我们先来看一下效果图:主要效果图如下图: 接下来我们看一下程序结构图: MainActivity文件中代码: 复制代码代码如下: package com.android.flip;import android.app.Activity;import a
jQuery控制的不同方向的滑动(向左、向右滑动等)

引入jquery.js,复制以下代码,即可运行. <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width: 100% } </style> 1.slidetoggle() 交替slided
如何在Android中实现渐显按钮的左右滑动效果

先看下运行效果: 程序结构: MainActivity文件中代码: 复制代码代码如下: package com.android.buttonpageflipper;import android.app.Activity;import android.graphics.PixelFormat;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.Gra

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

相关推荐

随机推荐