Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2013/12/29 4:40:59
php下js效果调用右侧小图左侧放大显示_php资料_编程技术

一、css部分：
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}

.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}

#container{ width:995px;text-align:left; margin:0 auto;}
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}

.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff}
img.thumb_img {cursor:pointer;display:block;margin-bottom:10px; width:80px; height:50px; }
img#main_img {cursor:pointer;display:block;width:500px; height:400px;}
#gotop {cursor:pointer;display:block;}
#gobottom {cursor:pointer;display:block;}
#showArea {height:355px;margin:10px;overflow:hidden}
.info {color:#666;font:normal 9px Verdana;margin-top:20px}
.info a:link, .info a:visited {color:#666;text-decoration:none}
.info a:hover {color:#fff;text-decoration:none}

二、js部分
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = 'uploadpic/'; //图片路径
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
//thumbs[i].onclick = function () {location = this.link}
thumbs[i].onclick = function () {$('main_img').src=this.rel; $('main_img').link=this.link;}
}
$('main_img').onclick = function () {parent.location= this.link;}
$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);}
function gotop() {$('showArea').scrollTop-=spec;}
function gobottom() {$('showArea').scrollTop+=spec;}

三、php页面调用部分

赞