<link type="text/css" href="https://www.jb51.net/<%=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=https://www.jb51.net/article/\"" + ID + "https://www.jb51.net/article/\" src=https://www.jb51.net/article/\"" + (srcPath) + "https://www.jb51.net/article/\" />";
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=https://www.jb51.net/article/\"" + ID + "https://www.jb51.net/article/\" src=https://www.jb51.net/article/\"" + pathImg + "https://www.jb51.net/article/\" width=https://www.jb51.net/article/\"100%\" height=https://www.jb51.net/article/\"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=https://www.jb51.net/article/\"" + ID + "https://www.jb51.net/article/\" src=https://www.jb51.net/article/\"" + pathImg + "https://www.jb51.net/article/\" width=https://www.jb51.net/article/\"100%\" height=https://www.jb51.net/article/\"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=https://www.jb51.net/article/\"" + leftId + "https://www.jb51.net/article/\" src=https://www.jb51.net/article/\"" + leftpath + "https://www.jb51.net/article/\" width=https://www.jb51.net/article/\"100%\" height=https://www.jb51.net/article/\"100%\" />";
var righturl = "<img id=https://www.jb51.net/article/\"" + rightId + "https://www.jb51.net/article/\" src=https://www.jb51.net/article/\"" + rightpath + "https://www.jb51.net/article/\" width=https://www.jb51.net/article/\"100%\" height=https://www.jb51.net/article/\"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布局：
复制代码 代码如下: