Magic Thumb 产品图片放大特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Magic Thumb 产品图片放大特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="keywords" content="JS代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Magic Thumb" />
<title>Magic Thumb</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content="Magic Toolbox" />
	<meta name="author" content="Magic Toolbox" />
    
    <style type="text/css">
    body, p {
        background:#edf6ca;
        font-size: 13px;
        font-family:"Helvetica Neue","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        line-height:2;
    }
    a {color:#91b817;}
    a:hover {text-decoration:none;}
    .cp, .cp a {color:#888;font-size:11px;}
    </style>								    
</head>
<body>
<h1>Magic Thumb</h1>
<h2>Here are few Magic Thumb examples:</h2>
<ul>
    <li><a href="example-basic.html" target="_blank">Basic example</a></li>
    <li><a href="example-keep-thumbnail.html" target="_blank">Visible thumbnail example</a></li>
    <li><a href="example-caption.html" target="_blank">Caption example</a></li>
    <li><a href="example-speed.html" target="_blank">Custom speed example</a></li>
    <li><a href="example-slideshow.html" target="_blank">Slideshow example</a></li>
    <li><a href="example-background.html" target="_blank">Fading background example</a></li>
</ul>
</body></html>

CSS代码(magicthumb.css):

/* ©2008 MagicToolbox.com. To use this code on your own site,visit http://www.magictoolbox.com */
/* CSS class for thumbnail link <A> */
.MagicThumb{cursor:url(cursor/zoomin.cur),pointer;outline:none;}
/* CSS class for the thumbnail link <A> when the big image is zoomed */
.MagicThumb-zoomed{cursor:default;}
/* CSS class for span inside the thumbnail <A> */
.MagicThumb span{display:none;}
/* CSS class for the thumbnail image */
.MagicThumb img{border:1px solid #808080;outline:none;}
/* CSS class for the big image while zooming */
.MagicThumb-image{border:1px solid #cccccc;outline:none;}
/* CSS class for the zoomed big image */
.MagicThumb-image-zoomed{cursor:url(cursor/zoomout.cur),pointer;}
/* CSS class for the caption under the big zoomed image */
.MagicThumb-caption{color:#333333;background-color:#F0F0F0;border:1px solid #CCCCCC;border-top:none;font-family:Verdana,Helvetica;font-size:11px;padding:8px 16px;}
/* CSS class for the control bar */
.MagicThumb-controlbar{display:block;height:18px;}
.MagicThumb-controlbar a{display:block;width:18px;height:18px;margin:0px 1px;outline:none;float:left;overflow:hidden;}
.MagicThumb-controlbar a span{display:block;width:1000px;height:1000px;background:transparent url(graphics/controlbar.png) no-repeat 0 0;outline:none;position:absolute;left:0px;top:0px;}

附件:下载该文件资源,减少时间成本(增值服务)