收藏本帖 楼主热帖
  • 去顶部
  • 239 次浏览
  • 0 次回复
  • 0 次收藏
  • 0 次点赞
  • 去底部

文章内容页实现点击图片放大功能

  1. Seven
    帖子里的图片<img />标签是带一些参数的,门户没有。
    可以利用网上的一些js来做类似效果。
    因为正好我在学做一个插件,也需要文章内容里图片放大效果,就临时找了个特效。
    zoomify.min
    HTML
    1. <div class="show-content">文章内容……</div>
    复制代码
    内容区域容器是class="show-content"。

    CSS
    1. <style>.zoomify.zoomed{z-index:9999;position: relative;}.zoomify-shadow{background-color: rgb(0, 0, 0);opacity: 0.5;position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index:800;}</style>
    复制代码
    这个css是给图片和背景遮罩用的。

    JQ
    1. <script src="{$plugin_path}/static/js/zoomify.min.js"></script>
    2. <script type="text/javascript">
    3.   jQuery('.show-content img').css('cursor','pointer');
    4.   jQuery('.show-content img').zoomify();
    5. </script>
    复制代码
    jQuery是我的防止冲突改名,原本为$,{$plugin_path}是我的插件路径,换成自己的。

    补充:
    zoomify()本身有一些参数,比如放大开始,放大完成,缩小开始,缩小完成,每一步都可以添加一些效果,详情百度zoomify.min.js。

共 0 条回复,还没有人回复,抢个沙发吧!

高级模式
您需要登录后才可以回帖 登录 | 立即注册

QQ|Archiver|小黑屋|7 talk

GMT+8, 2021-1-17 08:27 , Processed in 0.029293 second(s), 28 queries . Powered by Discuz!