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

核心代码：

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>