嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-03-31 2443 次浏览 标签 : ZzBlog

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

<style type="text/css">
  .content_img_wrap{
      position: relative;
      display: block;
      background: #000;
  }
  .content_img{
      max-width: 480px;
      float: none;
      margin: 0px auto;
      display: block;
      border: 5px solid #fff;
      box-shadow: 0px 0px 5px #aaa;
  }
  .content_img img{
      max-width: 480px;
      display: block;
      cursor: pointer;
  }
  .magnifier{
      display: none;
      z-index: 2;
      position: absolute;
      cursor: pointer;
  }
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
      //匹配img标签,在其外面包裹一层
      $(".content").find('img').wrap("<span class='content_img'></span>");
      $(".content_img").hover(function(){
          var img_element = $(this).find('img');
          var imgurl = img_element.attr('src');
          img_element.wrap("<a class='content_img_wrap' alt='查看大图' href='"+imgurl+"' target='_blank' ></a>").animate({'opacity':'0.5'}).after('<a class="magnifier" alt="查看大图" href="'+imgurl+'" target="_blank" ><img src="./link.png"></a>');
          var _top = img_element.height();
          var _left = img_element.width();
          $(this).find('.magnifier').fadeIn('slow').css({
              top:((_top-20)/2),
              left:((_left-20)/2)
          }).fadeIn();
      },function(){
          $(this).find('img').next('.magnifier').remove();
          $(this).find('img').unwrap().animate({'opacity':'1'});
      })
  })
</script>
<div class="content">
    <img src="./1.jpg">
    <img src="./1.jpg">
    <img src="./1.jpg">
</div>

放在博客里面,对于图片<img>外面的<span class="content_img"></span>我不知道是在php端匹配好,还是页面渲染的时候用js来处理哪个更好。往长远了想服务器端的数据可能用于pc端,也可能用于移动端,也可能用于更多的地方,也就是api的作用,所以出于这样的考虑,服务器端的数据,原生态更好。再着,把这个替换的放到每个客户端上去操作,是不是可以减少服务器端的压力呢?但是jquery的替换,是否要比php里做正则替换要慢很多呢?我暂时还不知道。所以有些纠结。

效果演示:http://mengkang.net/43.html

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表