首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Hexo文章中图片点击实现全屏查看

1 写在前面 方法一存在图片放大后不美观,建议直接跳到方法二 如果想尝试解决第一种方法出现的Bug,可以尝试一下,然后我们讨论一下,方便的话可以加我QQ:2422676183 2 方法一 2.1 修改...post-details.js文件 文件目录:/themes/next/source/js/src/post-details.js 在文件最后添加: //----自定义js---------------...0; bottom: 0; } .zhao-no-scroll{ width: 100%; height: 100vh; overflow: hidden; } 不过还是会存在一个小bug,大图片图片放大时有点不美观...如果您知道如何解决可以给我留言,谢谢啦 3 方法二 这种方法使用了图片浏览放大功能fancybox插件 3.1 切换到lib目录 cd next/source/lib 3.2 下载插件 git clone...theme-next-fancybox3 fancybox image.png 3.3 更改主题配置文件 更改next/_config.yml文件 fancybox: true 3.4 测试效果 部署hexo s之后点击图片

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    点击一张图片背后的风险

    仅仅是因为你点击了某个你一只在访问网站里的一张图片,导致你的用户名、密码泄漏,甚至电脑被植入病毒。这一切可不仅仅是危言耸听。 利用的方法来源于一个算不上漏洞的漏洞 。...首先,我们要准备一张图片,这里用一段代码的图片来演示,但为了提高钓鱼的成功率,我们要做一点小修改,比如修改下它的大小。 ? 看起来非常模糊,很多时候都会忍不住,点击打开查看。...毕竟,“点击查看大图”这一功能已经深入人心了!评论区显示图片的代码如以下的样子。 ? 在评论区里看到的图片应该是下面这个样子 ? 但当你忍不住打开图片的时候,就会发生神奇的事情 ?...JS代码。...同时要关注用户上传的图片,或许你应该像关注xss一样关注一下外链图片的问题。 对用户:小心!小心!再小心!关注一下你点开的链接。使用右键->在新标签中打开链接 来打开新的连接!

    1.3K70

    在FineReport中使用JS实现点击决策报表实现全屏效果

    昨天给我提了一个需求,将大屏界面嵌到目前的系统里,加一个全屏的功能。...因为大屏界面是使用决策报表制作的,所以我本来打算从报表本身入手,添加一个按钮可以全屏与退出全屏,可是这多出来的一个按钮在报表界面中实在太过突兀,没办法只好考虑其他方式。...在搜索文档的过程中,有一种解决方案是通过鼠标单击报表界面实现全屏与退出全屏,高度符合我的需求,于是乎就使用这样的方法了。...在设计器中打开决策报表,右边的组件设置中选择‘body’,然后选“事件-添加事件-点击”,如下图所示: [添加事件] 随后点击铅笔的图标,将以下代码复制进去: var docElm = document.documentElement...docElm.webkitRequestFullScreen(); } } } 对应的实现效果是这样的: [最终效果] 后来完成后又说只需要单击全屏

    3.4K30

    js如何控制一次只加载一张图片,加载完成后再加载下一张

    今天看到一个面试题,是关于img图片加载方面的,有必要记录一下。其实关于这个问题,只要知道图片什么时候加载完成就能解决了。...通过onload事件判断Img标签加载完成 实现逻辑:新建一个Image对象实例,为实例对象设置src属性等,在onload事件中添加此实例对象到父元素中,然后将图片地址数组中的第一个元素剔除,继续调用此方法直到存储图片地址的数组为空...扩展知识 img标签是什么时候发送图片资源请求的? HTML文档渲染解析,如果解析到img标签的src时,浏览器就会立刻开启一个线程去请求图片资源。...如图: image.png 通过设置css属性能否做到禁止发送图片请求资源?...一个完整的页面是由js、html、css组成的,按照解析机制,html元素会优先解析,尽管css样式是放在head标签内的,但也不意味着它会优先加载,它只有等到html文档加载完成后才会执行。

    8710

    一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片

    上周日最得意的事情莫过于搞定了jquery.qrcode生成的二维码图片一键下载。...有时候觉得已经生成了二维码图片,直接打印就行了,但是用户总有新需求诞生,于是用户说每次保存二维码的图片,都需要右键点击,然后另存为,能不能直接一个按钮点一下就下载这个二维码呢?...能不能直接把二维码图片的名称也在保存的时候自动生成?我的上帝呀,你可以知道你的这么一个小小的要求,我需要折腾多久吗?没错,困扰了1周,最后思考了半天,弄了2个小时程序,才实现了。...中间走了不少弯路,期间参考了《点击按钮保存网页中指定的图片,利用js实现》,可惜jquery.qrcode所生成的图片(我用的是image的渲染方式,因为只有这种方式打印的时候能被直接默认打印出来,canvas...js保存" /> 于是百度、Google访问外国网站,终于寻得base64图片一键下载的一些思路,于是诞生了以下可执行的代码。

    4.7K20

    layer弹出图片的问题

    ,暂时选择iframe层来使用 点击iframe层,会出现对应的javascript代码 你可以直接将对应的代码放入javascript进行测试,将content改为 http://layer.layui.com...://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif’ 现在问题来了,如果你想显示你本地的图片,切记要将type值改为1,找来一张图片放入目录..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img...,给图片的地址一个data属性 在javascript中获取到 将img给到content即可,但一定要确保图片的路径正确,才能正常显示 ——————— 本文来自 玥娃娃 的CSDN 博客 ,全文地址请点击

    1.1K20

    RGBA(0,0,0,0)调色

    ,暂时选择iframe层来使用 点击iframe层,会出现对应的javascript代码 你可以直接将对应的代码放入javascript进行测试,将content改为 http://layer.layui.com...://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif’ 现在问题来了,如果你想显示你本地的图片,切记要将type值改为1,找来一张图片放入目录..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img...,给图片的地址一个data属性 在javascript中获取到 将img给到content即可,但一定要确保图片的路径正确,才能正常显示 ——————— 本文来自 玥娃娃 的CSDN 博客 ,全文地址请点击

    1.1K10

    layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

    在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 1 7 8 9 <style...可以看到全屏不正常了 通过调试发现是这个class的处理影响了全屏的展示 ? ? ?...2. video标签的poster属性指代视频未播放前放置的一张图片 如果video容器宽高小于等于poster图的宽高,则图片能充满容器,反之容器左右就会预留黑色栏 除了手动更换一张大图之外,可以结合...> 现在图片宽度比容器小,没铺满,参考这里的讨论 可以用CSS让其撑开(这里相当于放大了,不想放大需自行更换大图) poster里放一个透明图片(这里使用了一个1px*1px的base64

    2.3K10

    Cannot read property ‘appendChild’ of null

    ,暂时选择iframe层来使用 点击iframe层,会出现对应的javascript代码 你可以直接将对应的代码放入javascript进行测试,将content改为 http://layer.layui.com...://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif’ 现在问题来了,如果你想显示你本地的图片,切记要将type值改为1,找来一张图片放入目录..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img..., shade: 0.6 ,//遮罩透明度 maxmin: true ,//允许全屏最小化 anim: 1 ,//0-6的动画形式,-1不开启 content: img...,给图片的地址一个data属性 在javascript中获取到 将img给到content即可,但一定要确保图片的路径正确,才能正常显示 ——————— 本文来自 玥娃娃 的CSDN 博客 ,全文地址请点击

    62810

    iOS APP添加桌面快捷方式

    点击添加到主屏幕,跳转页面可以看到data url格式的内容。添加到主屏幕,就是将编码好的网页内容和图标保存到桌面。...2.2 点击桌面快捷方式图标唤起APP 当点击桌面图标的时候,会先跳转到一个中间页面,然后执行JS文件跳转到App对应的功能。 ?...在js文件中,通过window.navigator.standalone来判断当前页面是否全屏,如果非全屏,那么就显示一个引导页,如果是全屏,就打开一个链接。...假如你在网页里需要放一张图片A,通常方式为: 这种实现方式为http URIscheme,img标记的src属性指定了一个远程服务器上的资源...图片数据 data:image/x-icon;base64, base64编码的icon图片数据 4)设置web application样式 设置桌面图标 <linkrel="apple-touch-icon

    7.3K50

    JS】1705- 重学 JavaScript API - Fullscreen API

    通过 Fullscreen API,开发者可以通过按键、鼠标点击或触摸手势等方式触发全屏切换,并在全屏状态下进行自定义的交互和操作。...演示文稿:通过将演示文稿全屏显示,可以确保观众集中注意力,展示出更好的视觉效果。 图片浏览器:在浏览图片时,将图片全屏显示可以提供更大的展示区域,使用户能够更好地欣赏图片细节。...click", () => { document.documentElement.requestFullscreen(); }); 在这个例子中,我们获取了一个按钮元素,当按钮被点击时,我们调用...图片浏览器:在浏览图片时,将图片全屏显示可以提供更大的展示区域,使用户能够更好地欣赏图片细节。 除此之外,Fullscreen API 还可以应用于各种需要全屏显示的场景中。...接下来使用 Fullscreen API 实现图片全屏展示的示例: <!

    29340

    Android 关于WebView全方面的使用(项目应用篇)

    1、关于WebView的使用: ****与JS交互**** 拨打电话、发送短信、发送邮件 上传图片(版本兼容) 进度条设置 字体大小设置 返回网页上一层、显示网页标题 全屏播放网络视频 ?...4.2 与JS交互 相信大家已经看到了上面"----点击图片"的Toast,这里需要先给WebView设置JavascriptInterface: webView.addJavascriptInterface...img节点, // 并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去 webView.loadUrl(...4.4 上传图片(版本兼容) & 全屏播放网络视频 & 显示网页标题 这里因为篇幅原因,里面的代码很多,就不贴出来了,大家可以点击MyWebChromeClient.java,查看具体代码。 ?...上传图片.png 4.5 返回网页上一层 返回网页上一层及退出全屏等操作: @Overridepublic boolean onKeyDown(int keyCode, KeyEvent event)

    1.5K40
    领券