js 鼠标悬浮放大图片有关问题
日期：2014-05-16 浏览次数：20434 次
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)&n
现在的效果是鼠标悬浮到图片上可以实现
但小弟现在想实现，
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)&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
