请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › Apple网站超靓的图片放大效果! 差一点研究?

发新帖

查看: 7093|回复: 24

Apple网站超靓的图片放大效果! 差一点研究? [复制链接]

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-13 02:33:35 |显示全部楼层

苹果网址: http://www.apple.com/macosx/leopard/features/desktop.html

请留意网页下方偏左一点有个"Gallery",点击小图片,将动态弹出大图,效果非常之棒!!!
研究了一个多小时也没搞明白是如何实现的,只知道是靠几个JS,但实在太复杂,越看越不明白
请高手抽空研究研究吧!

相关的JS文件:

[ 本帖最后由 dx1 于 2007-6-13 02:35 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

希望能够帮到你……

西部数码顶级域名注册商39元抢注！

使用道具举报

罗亮

超级版主 

帖子: 15895
体力: 19488
威望: 19
居住地: 北京市海淀区

发表于 2007-6-13 07:41:18 |显示全部楼层

类似这种

<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo">
	<img src="http://www.davison.com.cn/images/Thinktank_Treehouse.jpg" />
	<img src="http://www.davison.com.cn/images/bike_d.jpg" />
	<img src="http://www.davison.com.cn/images/paxingdan_pp.jpg" />
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	ts.onclick = function(event){
		event = event || window.event;
		ei.style.display = "block";
		ei.innerHTML = '<img src="' + this.src + '" />';
		ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
		ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
	}
	ts.onmouseout = function(){
		ei.innerHTML = "";
		ei.style.display = "none";
	}
}
</script>

提示：您可以先修改部分代码再运行

银子博客 | 歪藕 | 新浪围脖 | 腾迅围脖

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 70
体力: 278
威望: 0

发表于 2007-6-13 09:52:17 |显示全部楼层

效果不错

使用道具举报

哲服千里

帖子: 1075
体力: 3612
威望: 0

发表于 2007-6-13 11:55:54 |显示全部楼层

呵呵，没想到我写的也被银子拿出来讲了

使用道具举报

zcfg　

帖子: 169
体力: 341
威望: 5

发表于 2007-6-14 02:30:10 |显示全部楼层

很明显,apple的gallery效果在关闭时是有透明度的减小的

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-18 17:20:16 |显示全部楼层

还是想学习苹果的这种效果,不知哪位高手能抽空研究一下? 今天我自己又研究了一下但未果,郁闷得很啊.......

希望能够帮到你……

使用道具举报

匪徒田老大

帖子: 2382
体力: 13417
威望: 180

发表于 2007-6-19 07:57:16 |显示全部楼层

从前做的类似的东西，不过没有它的那种半透明效果，也没有缩小的效果：

提示：您可以先修改部分代码再运行

[ 本帖最后由 mozart0 于 2007-6-19 07:59 编辑 ]

居处恭执事敬与人忠

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-19 11:08:41 |显示全部楼层

mozart0版主的这个已经很像了, 研究一下,谢谢!!!

希望能够帮到你……

使用道具举报

小扣扣子

高级会员 

帖子: 867
体力: 847
威望: 4

发表于 2007-6-19 11:54:10 |显示全部楼层

<!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>无标题文档</title>
</head>

<body>
<script language="JavaScript" type="text/JavaScript" >

function hideLayer()
{	
	var layer = document.getElementById("popImageLayer");
	layer.style.visibility='hidden';
}
function dispear(){
	var layer = document.getElementById("popImageLayer");
	if ((layer.style.width>0)&& (layer.style.height>0)){
		layer.style.width-=1;
		layer.style.height-=1;
	}
	else {
		layer.style.visibility='hidden';
		if (window.interval)
		clearInterval(interval);
	}
}

function popImage(obj,img,href) 
{ 
	var layer = document.getElementById("popImageLayer");
	var t=obj.offsetTop;
	var l=obj.offsetLeft;
	while(obj=obj.offsetParent){
		t+=obj.offsetTop;
		l+=obj.offsetLeft;
	}
	var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'>\n"+
	"<A href="+href+" target=_blank><IMG src='"+img+"' onload='DrawImage(this,180,180);'  onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)'></A></td></tr></table>"; // onClick='hideLayer();'

layer.innerHTML=content;
			layer.style.left =l + 35 -90;
			layer.style.top = t+35-90;
			layer.style.visibility='visible';
} 
function moveToMouseLoc(e) 
{ 
	var layer = document.getElementById("popImageLayer");
	var offsetX = -5; 
	var offsetY = -5;
	var	 x = event.x + document.body.scrollLeft;
	var	 y = event.y + document.body.scrollTop; 
	layer.style.left = x + offsetX;
	layer.style.top = y + offsetY;
	return true; 
}

function DrawImage(img,width,height){ 
	if(DrawImage.arguments.length <= 1) 
		width=height=70;
	var image=new Image(); 
	image.src=img.src; 
	if(image.width>0 && image.height>0)
	{
	  if(image.width>width)
	  {
	  	rate=image.height/image.width;
	  	newHeight=rate*width;
	  	img.width=width;
	  	img.height=newHeight;
	  } 
	}
	if(img.height>height)
	{
		rate=image.width/image.height;
		newWidth=rate*height;
		img.height=height;
		img.width=newWidth;
	}
}

function DrawImage50(img){ 
	DrawImage(img,50,50);
}

function resetForm(){
	var f=document.frmsearch;
   f.Page.value = 1;
   f.ClassCode.value ='' ;
   f.SortType.value ='' ;		
   f.KeyWord.value='';
   f.Area.value='';
   f.MinPrice.value=f.MaxPrice.value='';
	return false;		
}		
function manualSearch(){
	var f=document.frmsearch;
   f.Page.value = 1;
  // f.ClassCode.value ='' ;
   f.SortType.value ='' ;		
   f.submit();
	return false;		
}
function checkCondition(obj) {
	return true;
}
function selectview(obj)
{
   var f=document.frmsearch;
   if ((obj.selectedIndex>0) && (obj.selectedIndex <7))
   		f.SortType.value = obj.options[obj.selectedIndex].value;
	else if ((obj.selectedIndex>6) && (obj.selectedIndex <10))
   		f.View.value = obj.options[obj.selectedIndex].value;
	else if ((obj.selectedIndex>9) && (obj.selectedIndex <13))
   		f.PageSize.value = obj.options[obj.selectedIndex].value;
   f.submit();
	return false;		
}
function changeLocation(obj){
	var f=document.frmsearch;
   f.Area.value = obj.options[obj.selectedIndex].value;
   f.submit();
	return false;		
}
function changeViewMode(mode){
	var f=document.frmsearch;
   f.View.value = mode;
   f.submit();
	return false;
}
function changePage(page){
	var f=document.frmsearch;
   f.Page.value = page;
   f.submit();
	return false;
}
function changePageSize(pagesize){
	var f=document.frmsearch;
   f.Page.value = 1;
   f.PageSize.value = pagesize;		
   f.submit();
	return false;
}

function changeSortType(type){
	var f=document.frmsearch;
   f.Page.value = 1;		
   f.SortType.value = type;
   f.submit();
	return false;
}
function changeClassCode(code){
	var f=document.frmsearch;
   f.ClassCode.value = code;
   f.Page.value=1;
   f.submit();
	return false;
}

function high(which2){
	theobject=which2;
	highlighting=setInterval("highlightit(theobject)",40);
}
function low(which2){
	clearInterval(highlighting);
	which2.filters.alpha.opacity=40;
}
function highlightit(cur2){
	if (cur2.filters.alpha.opacity<100)
		cur2.filters.alpha.opacity+=5
	else if (window.highlighting)
		clearInterval(highlighting)
}

function delightit(cur2){
	if (cur2.filters.alpha.opacity>5)
		cur2.filters.alpha.opacity-=5;
	else if (window.highlighting)
			clearInterval(highlighting);
}
</script>
<div id="popImageLayer" align="center"  name="popImageLayer"  style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<div id="090" ><img src="http://admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" onMouseOver="popImage(this,'http://admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0>hkjhgkhk</div></a>
</center>
</body>
</html>

提示：您可以先修改部分代码再运行

在路上，还要走多远

使用道具举报

帖子: 14
体力: 34
威望: 0

发表于 2007-6-19 13:42:04 |显示全部楼层

原帖由 mozart0 于 2007-6-19 07:57 发表
从前做的类似的东西，不过没有它的那种半透明效果，也没有缩小的效果：

[html]

.d{width:200px;position:relative;left:400px;top:200px}
.d img{marging:20px;cursorointer}

...

载入更新时候有点慢，甚至在本地测试的时候也会发现载入的图片有点缓慢～
不过效果还是很好的～

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-19 13:53:57 |显示全部楼层

原帖由 ripen 于 2007-6-19 13:42 发表
载入更新时候有点慢，甚至在本地测试的时候也会发现载入的图片有点缓慢～
不过效果还是很好的～

mozart0的代码已经很近似苹果的了,载入图片慢,是因为我们访问苹果网站的速度慢所导致,不关代码的问题!
不知能否将"鼠标移开图片消失" 变为 "鼠标在图片上单击图片消失" ?

希望能够帮到你……

使用道具举报

匪徒田老大

帖子: 2382
体力: 13417
威望: 180

发表于 2007-6-19 13:58:39 |显示全部楼层

回复 #11 dx1 的帖子

你可以自己下载那个js文件，尝试改动。很简单

居处恭执事敬与人忠

使用道具举报

at63　

享受枯萎

帖子: 7275
体力: 377
威望: 0
居住地: 广东省深圳市

发表于 2007-6-19 14:17:24 |显示全部楼层

不错

使用道具举报

帖子: 14
体力: 34
威望: 0

发表于 2007-6-19 16:24:17 |显示全部楼层

的确是如此！

[ 本帖最后由 ripen 于 2007-6-19 17:13 编辑 ]

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-21 13:00:12 |显示全部楼层

原帖由 mozart0 于 2007-6-19 13:58 发表
你可以自己下载那个js文件，尝试改动。很简单

我试了,不行啊,能教一下到底如何将"鼠标移开图片消失" 变为 "鼠标在图片上单击图片消失" 吗? 谢谢!

希望能够帮到你……

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-27 08:43:42 |显示全部楼层

自己顶一下,请指导一下好吗?

希望能够帮到你……

使用道具举报

帖子: 39
体力: 138
威望: 0

发表于 2007-6-27 16:30:01 |显示全部楼层

在代码里把 onmouseout事件改成 onclick
当然得先把 zoomMask 函数里面的 mask.onclick 屏蔽

使用道具举报

dx1　楼主

帖子: 48
体力: 133
威望: 0
居住地: 广东省广州市

发表于 2007-6-27 17:46:16 |显示全部楼层

谢谢rick903的解答,我马上去试试!
Thank you!!!

希望能够帮到你……

使用道具举报

帖子: 126
体力: 575
威望: 0

发表于 2007-7-1 12:53:39 |显示全部楼层

kouyubo 不错

7tzone.com

使用道具举报

帖子: 44
体力: 9
威望: 0

发表于 2007-7-17 16:45:05 |显示全部楼层

效果演示

http://www.51page.cn/temp/Apple_popup/popup.htm

打包下载 http://www.51page.cn/temp/Apple_popup/Apple_popup.rar

急流设计工作室 Rush Studio
--------------------------------------
www.51page.cn

使用道具举报

帖子: 65
体力: 185
威望: 0
居住地: 湖北省武汉市

发表于 2007-7-17 16:57:23 |显示全部楼层

前天接触jQuery, 玩了2天后, 感觉很爽.
这种效果用jQuery做, 肯定是小菜一蝶了.

Simple is Beauty...

使用道具举报

绝世好猫

帖子: 224
体力: 1149
威望: 0

发表于 2007-8-29 20:08:01 |显示全部楼层

原帖由 sandman 于 2007-7-17 16:45 发表
 http://www.51page.cn/temp/Apple_popup/popup.htm

打包下载 http://www.51page.cn/temp/Apple_popup/Apple_popup.rar

这才是对的不错谢谢啊！~~~

绝世※好猫

使用道具举报

binghexijian　

帖子: 209
体力: 825
威望: 0
居住地: 福建省泉州市

发表于 2007-8-29 23:43:13 |显示全部楼层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD><TITLE>Apple - Mac OS X Leopard - Features - Desktop</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=pics-label 
content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))'>
<META http-equiv=Expires content="Fri, 26 Mar 1999 23:59:59 GMT">
<META content="Apple Computer, Inc." name=Author>
<META content=products,macs name=Category>
<META 
content="The new look of Mac OS X Leopard showcases your favorite desktop image and puts new file Stacks at your fingertips for a stunning, clutter-free workspace." 
name=Description>
<META content=width=1024 name=viewport>
<script src="http://images.apple.com/global/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/ac_quicktime.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/macosx/leopard/scripts/pagenav.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/macosx/leopard/scripts/gallery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://images.apple.com/macosx/leopard/styles/leopard.css" type="text/css" charset="utf-8">
</head>
<body class="macosx leopard features" id="desktop">
<script src="http://images.apple.com/global/nav/scripts/shortcuts.js" type="text/javascript" charset="utf-8"></script>

<DIV id=container>
<DIV id=main>
<DIV id=localnav></DIV>
<DIV class=grid2colc id=content>
  <DIV class="column last">
    <DIV class=grid2col>
<DIV class="column first">
  <DIV class="gallery callout">
  <UL>
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_clean20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_cleanthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stacks20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Stacks" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stacksthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stackszoom20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Stacks" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stackszoomthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_grid20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Grid" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_gridthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_menu20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Menu" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_menuthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_hero20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Hero" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_herothumb20070611.jpg" 
  width=80 border=0></A> </LI></UL>
</BODY></HTML>

提示：您可以先修改部分代码再运行

使用道具举报

帖子: 26
体力: 0
威望: 0

发表于 2007-8-30 09:55:41 |显示全部楼层

楼上的比较像

使用道具举报

帖子: 121
体力: 565
威望: 0

发表于 2007-8-30 10:15:17 |显示全部楼层

效果真强，学习了。

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 10:27 , Processed in 0.208003 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部