文档章节

博客园图片放大

o
 osc_wws45aot
发布于 2019/08/20 10:44
字数 162
阅读 15
收藏 0

精选30+云产品,助力企业轻松上云!>>>

用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果

前往 zoom.js 的 github 下载需要的 js与css文件

将下载下来的 zoom.js 与zoom.css 上传至自己的博客园文件

页面定制CSS代码 添加自定义代码:

  #main,
  #topics,
  #mainContent,
  .postBody {
    overflow: visible;
  }
  #mainContent .forFlow {
    overflow: visible;
  }
  .zoom-overlay {
    background: transparent;
  }

页脚Html代码 添加自定义代码(注意更换zoom.js与zoom.css的地址):

<!--图片放大-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<script src="https://blog-static.cnblogs.com/files/gaoht/zoom.js"></script>

然后给要放大的图片标签添加 data-action="zoom" 属性: <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果

一. 写在前面 以下内容为zoom.js的实现方式,本博的图片放大功能已经升级,详细可参考博文: 博客园文章图片点击放大功能升级,有问题欢迎留言讨论。 1.下载js和css文件后上传到cnblogs(下载...

osc_o5wlp6ft
2018/07/18
4
0
使用zoom.js设置博客园图片放大缩小

在写博客园时有时会插入图片,如果图片太大放在博客区域里可能不太清晰,我们可以点击图片使其放大。 首先下载zoom,js下载地址(github):https://github.com/jackmoore/zoom 选出zoom.js和...

osc_8b62m5yk
2019/08/06
23
0
美化博客园大全

当前文章所写样式已经跟现在我博客的样式完全不一样了,但是里面的每个小模块还是好用的,照着一步一步来也可以搭建出不错的博客界面。 前言:用了两天的时间把我的博客园好好规划了一下,也...

osc_d4gurmqk
04/16
0
0
博客园文章图片点击放大功能升级

写在前面 在此之前本博的图片放大功能是采用的zoom.js,查看效果并不友好,图片放大后模糊不清。具体操作步骤不再赘述,详细移步:https://www.cnblogs.com/yadongliang/p/9327659.html 功能...

osc_p61a4z2o
2019/05/13
5
0
博客园文章图片点击放大功能升级

写在前面 在此之前本博的图片放大功能是采用的zoom.js,查看效果并不友好,图片放大后模糊不清。具体操作步骤不再赘述,详细移步:https://www.cnblogs.com/yadongliang/p/9327659.html 功能...

习惯沉淀
2019/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

会议通知 | 2020中国计算与认知神经科学会议

关于大会关于 计算神经科学以神经生物实验为基础,以建立数学模型,开展计算模拟和分析作为基本手段,来刻画和描述大脑的神经活动,探究神经系统各种复杂活动和认知功能包括注意、学习、记忆...

脑机接口社区
06/02
0
0
大神分享快3怎么算下期和值

大神分享快3怎么算下期和值{叩67790572}使用的标签:constructor-arg标签出现的位置:bean标签的内部标签中的属性type:用于指定要注入的数据的数据类型,该数据类型也是构造函数中某个...

yiren081
13分钟前
13
0
Matlab系列之运算符和标点符号的功能介绍

本来月初就打算接着写的,但是电脑不小心进水,主板什么的都废了,周末才找时间拿去修好,心塞。 就不多讲太多废话了,开始分享今天的内容,对MATLAB的运算符做个介绍,然后再对标点符号进行...

狂人V
07/06
0
0
Java源码系列(1):Comparable和Comparator的区别

在讲Comparable和Comparator区别之前,先补充一个知识点。 先看代码: Person类 1public class Person<T> { 2  private T id; 3 4  public T getId() { 5    return i...

学习Java的小姐姐
2018/09/19
0
0
ThreadPoolTaskScheduler手写调度中心

先贴一个自己写的demo把,原理其实就是这样的。 CronTrigger这个类可以将cron表达式转换成Date,可以查看schedule源码学到不少东西,下面代码就是转换成下一执行时间。 public Date nextEx...

朝如青丝暮成雪
34分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部