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

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