码迷,mamicode.com
首页 > Web开发 > 详细

CSS+JS打造的精美放大镜效果

时间:2015-04-10 13:27:07      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
    <html>
    <head>
    <base href="http://www.CsrCode.Cn/" />
    <meta charset="utf-8"/>
    <title>CSS+JS打造的精美放大镜效果丨梨花粉价格河北叉车</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style>
    .test
    {
    margin: 50px 0 0 200px;
    }
    .test a
    {
    font-size: 14px;
    color: #404040;
    }
    .test img
    {
    border: #4b4b4b 1px solid;
    }
    </style>
    </head>
    <body>
    <script src="imagesforcode/201205/Magnifier-min.js"></script>
    <pre>所需js文件:<a href="/imagesforcode/201205/Magnifier-min.js">Magnifier-min.js</a></pre>
    <div class="test">
    <h3>预览效果:</h3>
    <img src="images/m01.jpg" bigsrc="images/1.jpg" />
    </div>
    </body>
    </html>
    <br><hr>所需js文件和图片:<a href="/imagesforcode/201205/Magnifier-min.js">Magnifier-min.js</a>
    <br><a href="/imagesforcode/201205/mask.png" target=_blank>mask.png</a><a href="/imagesforcode/201205/pic.png" target=_blank>pic.png</a>
    <br>需要重新编辑Magnifier-min.js文件,修改里面的上面两个图片路径地址。
    <br><hr>

 

CSS+JS打造的精美放大镜效果

标签:

原文地址:http://www.cnblogs.com/youtianxia/p/4413972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!