js 鼠标悬浮放大图片有关问题
js 鼠标悬浮放大图片问题
现在的效果是鼠标悬浮到图片上可以实现
但小弟现在想实现，
1.鼠标悬浮到某个图片上后，单击这个图片，加上href="src\xxx.jsp"连接 使其可以跳转页面
2. 在这四个图片的每个图片的正下面，都加入一行文字
代码如下，可以运行的，求高手帮小弟改一下
跪谢！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS图片放大展示效果</title>
<style>
* {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
#banner ul {}
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
#goUp:hover {background-position:-34px 4px}
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
#goDown:hover {background-position:-34px -52px}
</style>
</head>
<body>
<div class="wrap">
<div id="banner">
<ul class="cf">
<li><span></span><img src="/jscss/demoimg/wall1.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
</ul>
<div class="btn_wrap">
<a href="javascript:;" id="goUp">向上走着</a>
<a href="javascript:;" id="goDown">向下走着</a>
</div>
</div>
</div>
<script type="text/javascript">
var JSHELPER = {
initi: function() {
},
animate: function(obj, attrList, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var isStop = true;
for(var attr in attrList) {
var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
var speed = (attrList[attr] - curAttr) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr === "opacity") {
obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
obj.style.opacity = (curAttr + speed) / 100;
} else {
obj.style[attr] = curAttr + speed + "px";
}
curAttr != attrList[attr] && (isStop = false);
}
if(isStop) {
clearInterval(obj.timer);
!!callback && callback();
}
}, 15);
},
$: function(params) {
switch (params.charAt(0)) {
case "#":
return document.getElementById(params.substring(1));
break;
case ".":
return this.getByClass(document, params.substring(1));
default:
return document.getElementsByTagName(params);
}
},
getStyle: function(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
},
getByClass: function(pn, cn) {
var ae = pn.getElementsByTagName("*"),
rent = [],
re = new RegExp('\\b' + cn + '\\b', 'i');
for(var i = 0, len = ae.length; i < len; i++) {
ae[i].className.search(re) != -1 && rent.push(ae[i]);
}
return rent;
}
};
window.onload = function() {
var btnDown = JSHELPER.$("#goDown"),
btnUp = JSHELPER.$("#goUp"),
wrap = JSHELPER.$("#banner"),
liList = wrap.children[0].children,
len = liList.length;
wrap.style.overflow = "visible";
现在的效果是鼠标悬浮到图片上可以实现
但小弟现在想实现，
1.鼠标悬浮到某个图片上后，单击这个图片，加上href="src\xxx.jsp"连接 使其可以跳转页面
2. 在这四个图片的每个图片的正下面，都加入一行文字
代码如下，可以运行的，求高手帮小弟改一下
跪谢！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS图片放大展示效果</title>
<style>
* {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
#banner ul {}
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
#goUp:hover {background-position:-34px 4px}
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
#goDown:hover {background-position:-34px -52px}
</style>
</head>
<body>
<div class="wrap">
<div id="banner">
<ul class="cf">
<li><span></span><img src="/jscss/demoimg/wall1.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
</ul>
<div class="btn_wrap">
<a href="javascript:;" id="goUp">向上走着</a>
<a href="javascript:;" id="goDown">向下走着</a>
</div>
</div>
</div>
<script type="text/javascript">
var JSHELPER = {
initi: function() {
},
animate: function(obj, attrList, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var isStop = true;
for(var attr in attrList) {
var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
var speed = (attrList[attr] - curAttr) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr === "opacity") {
obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
obj.style.opacity = (curAttr + speed) / 100;
} else {
obj.style[attr] = curAttr + speed + "px";
}
curAttr != attrList[attr] && (isStop = false);
}
if(isStop) {
clearInterval(obj.timer);
!!callback && callback();
}
}, 15);
},
$: function(params) {
switch (params.charAt(0)) {
case "#":
return document.getElementById(params.substring(1));
break;
case ".":
return this.getByClass(document, params.substring(1));
default:
return document.getElementsByTagName(params);
}
},
getStyle: function(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
},
getByClass: function(pn, cn) {
var ae = pn.getElementsByTagName("*"),
rent = [],
re = new RegExp('\\b' + cn + '\\b', 'i');
for(var i = 0, len = ae.length; i < len; i++) {
ae[i].className.search(re) != -1 && rent.push(ae[i]);
}
return rent;
}
};
window.onload = function() {
var btnDown = JSHELPER.$("#goDown"),
btnUp = JSHELPER.$("#goUp"),
wrap = JSHELPER.$("#banner"),
liList = wrap.children[0].children,
len = liList.length;
wrap.style.overflow = "visible";