怎么才能把js特效中的图片加上链接,急在线等!谢谢 本帖最后由 g00gg 于 2009-06-18 11:33:12 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 背景是黑色的 <img alt="" src="images/welimg_03.jpg" class="imgsrc"><img alt="" src="images/welimg_05.jpg" class="imgsrc"> <img alt="" src="images/welimg_07.jpg" class="imgsrc"> <img alt="" src="images/welimg_09.jpg" class="imgsrc"> <img alt="" src="images/welimg_15.jpg" class="imgsrc"> <img alt="" src="images/welimg_16.jpg" class="imgsrc"> <img alt="" src="images/welimg_17.jpg" class="imgsrc"> <img alt="" src="images/welimg_18.jpg" class="imgsrc"> <img alt="" src="images/welimg_23.jpg" class="imgsrc"> <img alt="" src="images/welimg_24.jpg" class="imgsrc"> <img alt="" src="images/welimg_25.jpg" class="imgsrc"> <img alt="" src="images/welimg_26.jpg" class="imgsrc"> 我想把这些图片加上连接 <a href="index.html"><img .... border="0"></a>这样不行吗? 不行 - -! 试了 下面的方法也不行! <img src='xx.jpg' onclick="window.location='index.html';"> <img src="" onclick="{location.href=''}"> 为什么啊~~~~~ 在这个函数里加一句 window.location.href = "index.html"; this.img.onclick = function() { window.location.href = "index.html"; if (!this.O.click) { if (diapo.zo && diapo.zo != this) diapo.zo.onclick(); this.O.click = true; this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2; this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2; diapo.zo = this; setOpacity(this, diapo.transparency); } else { this.O.click = false; this.O.over = false; this.O.resize(); diapo.zo = 0; } } 也可以, 先给img加个属性<img alt="" src="images/welimg_05.jpg" class="imgsrc" rel="http://www.baidu.com" >rel里的内容表示链接地址在下面这个函数里加上一句 /* ==== create diapo ==== */CDiapo: function(o) { ... /* ==== create thumbnail image ==== */ this.img = document.createElement("img"); this.img.className = "imgDC"; this.img.src = o.src; this.img.rel = o.getAttribute("rel"); //加这句...};再把刚加的哪句 window.location.href = "index.html" 改成window.location.href = this.rel;OK了.. <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title><style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #diapoContainer { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: #222; overflow: hidden; } .imgDC { position: absolute; cursor: pointer; border: #000 solid 2px; filter: alpha(opacity=90); opacity: 0.9; visibility: hidden; } .spaDC { position: absolute; filter: alpha(opacity=20); opacity: 0.2; background: #000; visibility: hidden; } .imgsrc { position: absolute; width: 120px; height: 67px; visibility: hidden; margin: 4%; } #bkgcaption { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 6%; background:#1a1a1a; } #caption { position: absolute; font-family: arial, helvetica, verdana, sans-serif; white-space: nowrap; color: #fff; bottom: 0px; width: 100%; left: -10000px; text-align: center; }</style><script type="text/javascript">var xm;var ym;/* ==== onmousemove event ==== */document.onmousemove = function(e){ if(window.event) e=window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY);}/* ==== window resize ==== */function resize() { if(diapo)diapo.resize();}onresize = resize;/* ==== opacity ==== */setOpacity = function(o, alpha){ if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;}/////////////////////////////////////////////////////////////////////////////////////////////* ===== encapsulate script ==== */diapo = { O : [], DC : 0, img : 0, txt : 0, N : 0, xm : 0, ym : 0, nx : 0, ny : 0, nw : 0, nh : 0, rs : 0, rsB : 0, zo : 0, tx_pos : 0, tx_var : 0, tx_target : 0, /////// script parameters //////// attraction : 2, acceleration : .9, dampening : .1, zoomOver : 2, zoomClick : 6, transparency : .8, font_size: 18, ////////////////////////////////// /* ==== diapo resize ==== */ resize : function(){ with(this){ nx = DC.offsetLeft; ny = DC.offsetTop; nw = DC.offsetWidth; nh = DC.offsetHeight; txt.style.fontSize = Math.round(nh / font_size) + "px"; if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize(); rsB = rs; } }, /* ==== create diapo ==== */ CDiapo : function(o){ /* ==== create thumbnail image ==== */ this.img = document.createElement("img"); this.img.className = "imgDC"; this.img.src = o.src; this.img.rel = o.getAttribute("rel"); /* ==== init variables ==== */ this.o = o; this.x_pos = this.y_pos = 0; this.x_origin = this.y_origin = 0; this.x_var = this.y_var = 0; this.x_target = this.y_target = 0; this.w_pos = this.h_pos = 0; this.w_origin = this.h_origin = 0; this.w_var = this.h_var = 0; this.w_target = this.h_target = 0; this.over = false; this.click = false; /* ==== create shadow ==== */ this.spa = document.createElement("span"); this.spa.className = "spaDC"; diapo.DC.appendChild(this.spa); /* ==== create thumbnail image ==== */ this.img = document.createElement("img"); this.img.className = "imgDC"; this.img.src = o.src; this.img.O = this; diapo.DC.appendChild(this.img); setOpacity(this.img, diapo.transparency); /* ==== mouse events ==== */ this.img.onselectstart = new Function("return false;"); this.img.ondrag = new Function("return false;"); this.img.onmouseover = function(){ diapo.tx_target=0; diapo.txt.innerHTML=this.O.o.alt; this.O.over=true; setOpacity(this,this.O.click?diapo.transparency:1); } this.img.onmouseout = function(){ diapo.tx_target=-diapo.nw; this.O.over=false; setOpacity(this,diapo.transparency); } this.img.onclick = function() { window.location.href = this.rel;} { /* if(!this.O.click){ if(diapo.zo && diapo.zo != this) diapo.zo.onclick(); this.O.click = true; this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2; this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2; diapo.zo = this; setOpacity(this,diapo.transparency); } else { this.O.click = false; this.O.over = false; this.O.resize(); diapo.zo = 0; }*/ } /* ==== rearrange thumbnails based on "imgsrc" images position ==== */ this.resize = function (){ with (this) { x_origin = o.offsetLeft; y_origin = o.offsetTop; w_origin = o.offsetWidth; h_origin = o.offsetHeight; } } /* ==== animation function ==== */ this.position = function (){ with (this) { /* ==== set target position ==== */ w_target = w_origin; h_target = h_origin; if(over){ /* ==== mouse over ==== */ w_target = w_origin * diapo.zoomOver; h_target = h_origin * diapo.zoomOver; x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1)); y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1)); } else { /* ==== mouse out ==== */ x_target = x_origin; y_target = y_origin; } if(click){ /* ==== clicked ==== */ w_target = w_origin * diapo.zoomClick; h_target = h_origin * diapo.zoomClick; } /* ==== magic spring equations ==== */ x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening; y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening; w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5); h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5); diapo.rs += (Math.abs(x_var) + Math.abs(y_var)); /* ==== html animation ==== */ with(img.style){ left = Math.round(x_pos) + "px"; top = Math.round(y_pos) + "px"; width = Math.round(Math.max(0, w_pos)) + "px"; height = Math.round(Math.max(0, h_pos)) + "px"; zIndex = Math.round(w_pos); } with(spa.style){ left = Math.round(x_pos + w_pos * .1) + "px"; top = Math.round(y_pos + h_pos * .1) + "px"; width = Math.round(Math.max(0, w_pos * 1.1)) + "px"; height = Math.round(Math.max(0, h_pos * 1.1)) + "px"; zIndex = Math.round(w_pos); } } } }, /* ==== main loop ==== */ run : function(){ diapo.xm = xm - diapo.nx; diapo.ym = ym - diapo.ny; /* ==== caption anim ==== */ diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02; diapo.txt.style.left = Math.round(diapo.tx_pos) + "px"; /* ==== images anim ==== */ for(var i in diapo.O) diapo.O[i].position(); /* ==== loop ==== */ setTimeout("diapo.run();", 16); }, /* ==== load images ==== */ images_load : function(){ // ===== loop until all images are loaded ===== var M = 0; for(var i=0; i<diapo.N; i++) { if(diapo.img[i].complete) { diapo.img[i].style.position = "relative"; diapo.O[i].img.style.visibility = "visible"; diapo.O[i].spa.style.visibility = "visible"; M++; } resize(); } if(M<diapo.N) setTimeout("diapo.images_load();", 128); }, /* ==== init script ==== */ init : function() { diapo.DC = document.getElementById("diapoContainer"); diapo.img = diapo.DC.getElementsByTagName("img"); diapo.txt = document.getElementById("caption"); diapo.N = diapo.img.length; for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i])); diapo.resize(); diapo.tx_pos = -diapo.nw; diapo.tx_target = -diapo.nw; diapo.images_load(); diapo.run(); }}</script></head><body><div id="diapoContainer"> <img class="imgsrc" src="images/08081201001.jpg" alt="Reconsider your Existence" rel="http://www.sina.com"> <img class="imgsrc" src="images/08081201004.jpg" alt="Something Needs to be Discovered"> <img class="imgsrc" src="images/08081201005.jpg" alt="They Said Very Little"> <img class="imgsrc" src="images/08081201006.jpg" alt="Only in Your Mind"> <img class="imgsrc" src="images/08081201011.jpg" alt="The Power of Imagination"> <img class="imgsrc" src="images/08081201012.jpg" alt="Objectivity is Impossible"> <img class="imgsrc" src="images/08081201013.jpg" alt="Cleaning Up Operation"> <img class="imgsrc" src="images/08081201014.jpg" alt="Arbitrary Contents"> <div id="bkgcaption"> </div> <div id="caption"> </div></div><script type="text/javascript">/* ==== start script ==== */function dom_onload() { if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);}dom_onload();</script></body></html> 问1个简单的JQuery的animate的问题 大家在10秒之内给个JS输出答案,只能肉眼判断。(超简单,但你会错) web上组卷策略算法? setAttribute问题:为什么不能触发TEST1()? 值同步问题 100分求如何禁止IE的刷新功能,如刷新按钮,IE查看里的刷新功能 请帮忙改一下程序?? 在线求救,一个关于进度条的问题! 如何统一风格呀? 使用jquery append方法在jsp页面中加入html代码后,页面可显示写入的内容,但是页面所引用的js对新增内容无效 求一个正则表达式,求得答案就散分 js控制div居中的问题,求大神指教~~急急急~~~
<img alt="" src="images/welimg_05.jpg" class="imgsrc">
<img alt="" src="images/welimg_07.jpg" class="imgsrc">
<img alt="" src="images/welimg_09.jpg" class="imgsrc"> <img alt="" src="images/welimg_15.jpg" class="imgsrc">
<img alt="" src="images/welimg_16.jpg" class="imgsrc">
<img alt="" src="images/welimg_17.jpg" class="imgsrc">
<img alt="" src="images/welimg_18.jpg" class="imgsrc"> <img alt="" src="images/welimg_23.jpg" class="imgsrc">
<img alt="" src="images/welimg_24.jpg" class="imgsrc">
<img alt="" src="images/welimg_25.jpg" class="imgsrc">
<img alt="" src="images/welimg_26.jpg" class="imgsrc"> 我想把这些图片加上连接
为什么啊~~~~~
this.img.onclick = function() {
window.location.href = "index.html";
if (!this.O.click) {
if (diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this, diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
}
<img alt="" src="images/welimg_05.jpg" class="imgsrc" rel="http://www.baidu.com" >rel里的内容表示链接地址在下面这个函数里加上一句
/* ==== create diapo ==== */
CDiapo: function(o) {
...
/* ==== create thumbnail image ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.rel = o.getAttribute("rel"); //加这句
...
};
再把刚加的哪句
window.location.href = "index.html" 改成window.location.href = this.rel;OK了..
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<style type="text/css">
html {
overflow: hidden;
} body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
} #diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
} .imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
} .spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
} .imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
} #bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}</style>
<script type="text/javascript">
var xm;
var ym;/* ==== onmousemove event ==== */
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0, /////// script parameters ////////
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
////////////////////////////////// /* ==== diapo resize ==== */
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
}, /* ==== create diapo ==== */
CDiapo : function(o){
/* ==== create thumbnail image ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.rel = o.getAttribute("rel");
/* ==== init variables ==== */
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false; /* ==== create shadow ==== */
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa); /* ==== create thumbnail image ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency); /* ==== mouse events ==== */
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
window.location.href = this.rel;
}
{
/*
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}*/
} /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
} /* ==== animation function ==== */
this.position = function (){
with (this) {
/* ==== set target position ==== */
w_target = w_origin;
h_target = h_origin;
if(over){
/* ==== mouse over ==== */
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
/* ==== mouse out ==== */
x_target = x_origin;
y_target = y_origin;
}
if(click){
/* ==== clicked ==== */
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
} /* ==== magic spring equations ==== */
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var)); /* ==== html animation ==== */
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
}, /* ==== main loop ==== */
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
/* ==== caption anim ==== */
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
/* ==== images anim ==== */
for(var i in diapo.O) diapo.O[i].position();
/* ==== loop ==== */
setTimeout("diapo.run();", 16);
}, /* ==== load images ==== */
images_load : function(){
// ===== loop until all images are loaded =====
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
}, /* ==== init script ==== */
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}</script>
</head><body><div id="diapoContainer">
<img class="imgsrc" src="images/08081201001.jpg" alt="Reconsider your Existence" rel="http://www.sina.com">
<img class="imgsrc" src="images/08081201004.jpg" alt="Something Needs to be Discovered">
<img class="imgsrc" src="images/08081201005.jpg" alt="They Said Very Little">
<img class="imgsrc" src="images/08081201006.jpg" alt="Only in Your Mind">
<img class="imgsrc" src="images/08081201011.jpg" alt="The Power of Imagination">
<img class="imgsrc" src="images/08081201012.jpg" alt="Objectivity is Impossible">
<img class="imgsrc" src="images/08081201013.jpg" alt="Cleaning Up Operation">
<img class="imgsrc" src="images/08081201014.jpg" alt="Arbitrary Contents">
<div id="bkgcaption">
</div>
<div id="caption">
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script></body></html>