锚点

来源：互联网发布：淘宝装修素材编辑：程序博客网时间：2024/04/30 05:53

File1

-----

<html>
<body>
<iframe height="100%" width="100%"src="index_ori.html"></iframe>
 
 
<a name="out">outofframe</a> 网站设计瀑布流布局浅析几种实现方式
http://www.admin5.com/article/20110915/375828.shtml
http://docs.kissyui.com/docs/html/demo/component/waterfall/demo2.html
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3066463&reltid=3065362&pre_thread_id=0&pre_pos=7&ext=
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3087762&reltid=3065362&pre_thread_id=0&pre_pos=3&ext=
http://www.inwebson.com/demo/blocksit-js/
圆环形状旋转图片的JS代码(电子商务用)
http://www.websbook.com/code/jsym/2226_js.html
</body>
</html>

File2

------

<!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=utf-8" />
<title>纯CSS实现商品图片点击放大效果，带有大图关闭按钮 - 分享JavaScript-www.websbook.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.websbook.com/" />
<meta name="description" content="纯CSS实现商品图片点击放大效果，带有大图关闭按钮,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />

<style type="text/css">
.product {width:320px; height:150px; border:1px solid #ddd; margin:0 auto; padding:10px;}
.productInfo {width:150px; float:left;}
.productMfr {font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0;}
.productType {font:bold 14px/18px arial, sans-serif; color:#000; padding:0; margin:0;}
.features {padding:10px 0; margin:0; list-style:none;}
.features li {font:normal 12px/16px arial, sans-serif; color:#555;}
.price {font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0; margin:0;}

a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none; text-align:center;}
a.clickbox img {display:block; border:0;}

a.clickbox b {display:block;}
a.clickbox em {font:bold 10px/12px arial,sans-serif; color:#000;}
a.clickbox {float:left; margin:0 15px 15px 0; display:inline;}

a.clickbox .lightbox {position:absolute; left:-9999px; top:-10000px; cursor:default; z-index:500;}

a.clickbox .light {position:absolute; left:0; top:0; width:100%;}
a.clickbox .box {position:absolute; left:0; width:100%; text-align:center; height:300px; top:30%; margin-top:-150px;}
/* trigger for IE6 */
a.clickbox:active {direction:ltr;}

a.clickbox:active .lightbox {left:0; top:0; width:100%; height:100%;}
a.clickbox .lightbox:hover,
a.clickbox:focus .lightbox {position:fixed; left:0; top:0; width:100%; height:100%;}

a.clickbox .lightbox:hover .light,
a.clickbox:active .lightbox .light,
a.clickbox:focus .lightbox .light {background:#fff; width:100%; height:100%; filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:0.90;
}

a.clickbox .lightbox:hover .box img,
a.clickbox:active .lightbox .box img,
a.clickbox:focus .lightbox .box img {border:1px solid #ddd; margin:0 auto; padding:30px; background:#fff;}

a.clickbox .lightbox:hover .box span,
a.clickbox:active .lightbox .box span,
a.clickbox:focus .lightbox .box span {display:block; width:560px; padding:0; margin:10px auto; text-align:center; text-decoration:none; background:#fff; border:1px solid #ddd;}
a.clickbox .lightbox .box span.title {font:normal 22px/26px verdana, sans-serif; color:#069;}
a.clickbox .lightbox .box span.text {font:normal 11px/16px verdana, sans-serif; color:#333;}

.clear {clear:left;}

a.clickbox i {display:block; width:32px; height:32px; position:fixed; right:-100px; top:0; z-index:500;}

a.clickbox .lightbox:hover i,
a.clickbox:active i,
a.clickbox:focus i {right:50%; top:30%; background:url(close2.png); margin-right:-295px; margin-top:-165px;}

#close {display:block; position:fixed; width:32px; height:32px; right:50%; top:30%; margin-right:-295px; margin-top:-165px; z-index:1000; background:url(trans.gif); cursor:pointer;}

</style>


</head>
<body>
<a href="#bottom">点击我连接到TOP</a>
<a href="#"target="_top">点击我连接到OUT</a>
<div class="product">
 <a class="clickbox" href="#url">
 <img src="eos500d-thumb.jpg" alt="" title="Click for larger image" />
 • large image •
 
 
 
 <img src="eos500d.jpg" alt="" />
 It's your vision - make it count
 With the EOS 500D, every side of your story comes alive. Capture every detail in stunning 15.1 Megapixel resolution, or switch to shooting pin-sharp Full High Definition video. 
 
 
 </a>
 <div class="productInfo">
 Canon EOS 500D
 Digital SLR Camera
 <ul class="features">
 <li>• 15.1 MP CMOS sensor</li>
 <li>• Full HD (1080p) movies</li>
 </ul>
 £470
 <img src="cart.gif" alt="Checkout" />
 </div>
</div>
 网站设计瀑布流布局浅析几种实现方式
http://www.admin5.com/article/20110915/375828.shtml
http://docs.kissyui.com/docs/html/demo/component/waterfall/demo2.html
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3066463&reltid=3065362&pre_thread_id=0&pre_pos=7&ext=
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3087762&reltid=3065362&pre_thread_id=0&pre_pos=3&ext=
http://www.inwebson.com/demo/blocksit-js/
圆环形状旋转图片的JS代码(电子商务用)

<a name="bottom">bottom</a>
http://www.websbook.com/code/jsym/2226_js.html
<div id="close"></div>

 
<div align="center">

 

更多JS代码下载请访问websbook.com <a href="http://www.websbook.com">http://www.websbook.com</a>
 
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>