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

现在的位置: 首页 > 综合 > 正文

RSS

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

2014年01月28日 ⁄ 综合 ⁄ 共 3068字 ⁄ 字号小中大 ⁄ 评论关闭

原码如下:
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

【上篇】ASP.NET系统用户权限设计与实现
【下篇】java优化-java内存管理

作者: militia

该日志由 militia 于10年前发表在综合分类下，最后更新于 2014年01月28日.
转载请注明: 用jquery实现类似淘宝的显示大图片 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: militia

书签

最新文章New

本站推荐

返回首页