您的位置：首页 > Web前端 > JQuery

用jquery实现类似淘宝的显示大图片

2007-10-18 17:22 746 查看

原码如下:
custom-test.js

var G_PIC_DAT=".jpg"; //图片扩展名; 要求大图与小图扩展名相同

var G_BIG_FIX="-b.jpg"; //大图的后缀形式,如pig.jpg(小图); pig-b.jpg(其对应大图)

var G_BIG_ID="bigImage"; //显示块的id

var G_PATH_PIC="images/"; //图片存放路径。现在要求大图与小图存在同一目录下

var G_BPIC_WIDTH="200"; //大图的大约的宽度

var G_CLIENTX; //最大限制宽

var G_CLIENTY; //最大限制高

var G_JQUERY_BIGIMG="#"+G_BIG_ID; //jquery表示的显示大图的块的id

$(document).ready(function() ...{

$("img").mouseover(function()...{

//var isShow = document.all(G_BIG_ID).style.display;

if(this.src.indexOf(G_BIG_FIX) < 0 )...{

var left = document.all[this.id].offsetLeft;

var top = document.all[this.id].offsetTop;

var width = document.all[this.id].width;

var height = document.all[this.id].height;

var bigImg = G_JQUERY_BIGIMG;

//JS方式,实现显示

/**//*

var theVal = document.getElementById("bigImage");

theVal.style.position="absolute";

theVal.style.left = left+width+5;

theVal.style.top = top;

theVal.style.display="";

$(bigImg).css("position","absolute");

$(bigImg).css("left",left+width+5);

$(bigImg).css("top",top);

var theVal = document.getElementById(G_BIG_ID);

var src = this.src;

src = src.substring(src.indexOf(G_PATH_PIC)+7,src.indexOf(G_PIC_DAT)) + G_BIG_FIX;

src = G_PATH_PIC + src;

theVal.src = src;

$(bigImg).animate(...{opacity: 'show' }, 0);

}

});

$("img").mouseout(function()...{

var left = document.all[this.id].offsetLeft;

var top = document.all[this.id].offsetTop;

var width = document.all[this.id].width;

var height = document.all[this.id].height;

//隐藏情况1: 垂直向下移动鼠标的隐藏情

if(parseFloat(window.event.clientY) > parseFloat(top+height))...{

//alert("1");

$(G_JQUERY_BIGIMG).hide();

}

//隐藏情况2: 垂直向上移动鼠标的隐藏情况

//alert(window.event.clientY +"/"+ top)

if(parseFloat(window.event.clientY) < parseFloat(top))...{

//alert("2");

$(G_JQUERY_BIGIMG).hide();

}

$(G_JQUERY_BIGIMG).mouseout(function()...{

$(G_JQUERY_BIGIMG).hide();

})

});

注:要应用jquery需要有实现jquery相应的包. 本文需要的图片存放在images路径下(相对路径).文件扩展名是.jpg.小图的文件名如:cat.jpg则对应的大图文件名为cat-b.jpg. 这些配置在ready()外以全局形式声明. 可以随意修改.
另附html代码:

<html>

<head>

<title>Onion Skin DropShadwo with jQuery</title>

<style>

</style>

<body>

<h1>Change PIC - With jQuery</h1>

<tr>

<br>

<br>

</tr>

</div>

<span >

</span>

</body>

</html>

注: 在html中引入了两个js,第一个是jquery的js; 第二个是上面那个js.
如果有用jquery的朋友可以共同探讨. msn: sunyadonghbjm@hotmail.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航