zoukankan      html  css  js  c++  java
  • 图片放大显示

    刚在网上看到一个的放大图片的显示,觉得以后用得着,先存下来。

    要准备一张小图和一张清晰点的大图,然后在页面中引入JQUERY和这个插件的JS

    <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

    然后再引入一个CSS

    <link rel="stylesheet" href="../css/jqzoom.css" type="text/css">

    接着是两张大图和小图

    <a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">   <img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen"></a>

    这里注意的是一张大图,一张小图,并且"kawasakigreen_small.jpg"这个小图中,那个title是要出现在放大镜里的文字标题

    然后在JS中

    <script type="text/javascript">

    $(function() {

      var options3 = {zoomWidth: 200, zoomHeight: 200, xOffset: 20, title: false,lens:false }

    $(".jqzoom").jqzoom(options3); }); </script>

    这里就是放大镜的效果了,具体的文档和例子请参考

    http://www.mind-projects.it/projects/jqzoom/index.php#howtouse

    如果觉得不够详细请仔细参考文档

  • 相关阅读:
    静态库,动态库
    vim
    消息队列-Rabbitmq处理消息及在Spring中的应用
    消息队列 -- 队列(Queue)和主题(Topic)
    Sing的签名算法
    Jquery
    VUE
    node
    vue 加载静态图片
    vue :style 动态绑定style
  • 原文地址:https://www.cnblogs.com/bingrong/p/3269479.html
Copyright © 2011-2022 走看看