开发者社区> Java学习录> 正文

JS之使用原生JS加CSS样式实现图片点击放大缩小功能

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80859064 前几天网站测试的时候发现了博客中的图片的有的太小了看不清楚,随想到了使用一个图片放大的插件,不过度娘了好几分钟以后实在没有找到比较优雅的。
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80859064

前几天网站测试的时候发现了博客中的图片的有的太小了看不清楚,随想到了使用一个图片放大的插件,不过度娘了好几分钟以后实在没有找到比较优雅的。然后就自己写了一个,在这里分享给大家。

对比我度娘的结果,此功能实现没有基于任何框架,原生js、css和html就可以实现,相信聪明的你看了就明白了。

因为我的网站不是博客么,当我的一篇博客从后台查询出来的时候,有一个字段会记录博客的正文。我们需要放大的图片就在这个正文里了。

首先我先调用了一个方法为我的正文做了一下转换:

imgHander(context) {
    var subStr=new RegExp('<img','ig');
    return context.replace(subStr, "<img onclick='picBig(this)' ");
}

我给正文中所有的img标签都添加了一个picBig函数,这个参数传递的是这个图片本身,那么这个函数又是怎么实现的呢?

function picBig(img) {
    var i=img.currentSrc;
    var v = document.getElementById('divCenter');
    var bigImg = document.getElementById('bigImg');
    bigImg.src=i;
    v.style.display = "block";
}

大致上呢,这个函数获取了调用者的图片地址,然后给了一个id为bigImg的img标签,然后呢又把一个di为divCenter的东西给设置了display

为显示。那么这两个东西又是什么呢,接着忘下看:

<div id="divCenter" align="center"
     style="position: absolute; display: none;  width: 100%; height: 100%; overflow:auto;  position:fixed;z-index:9999;margin-top: 30px;">
    <img id="bigImg" class="bigImg" onclick="picClose();"
            src="" style="width:90%;"/>
</div> 

看到这里相信你已经明白了,这个div会显示出来,并且我们刚才点击的图片大小会变成宽度为90%,其实我们的图片放大功能已经实现了不是么。接着图片缩小,是不是very easy,隐藏这个div就是了,点击图片时调用picClose函数。

function picClose() {
    var v = document.getElementById('divCenter');
    v.style.display = "none";
}

功能已经完全实现了,如果你不着急走的话就在附送你两个小样式。

.blog img {
    cursor:url(img/big.png),auto;
}
.bigImg  {
    cursor:url(img/small.png),auto;
}

上方两个样式呢,第一个是当我们鼠标放在需要放大的图片上时会显示一个放大镜,第二个就是图片放大以后鼠标放上就会显示一个缩小的样式,在这里顺便把这两个icon附上


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云物联网平台物模型功能测试示例Demo
物模型指将物理空间中的实体数字化,并在云端构建该实体的数据模型。在物联网平台中,定义物模型即定义产品功能。完成功能定义后,系统将自动生成该产品的物模型。物模型描述产品是什么,能做什么,可以对外提供哪些服务。物模型将产品功能类型分为三类:属性、服务、和事件。定义了这三类功能,即完成了物模型的定义。
3817 0
使用node+express+mongodb实现用户注册、登录和验证功能
使用node+express+mongodb实现用户注册、登录和验证功能
849 0
函数计算+云市场实现手机号归属地和图片爬虫系统设计
本文通过两个无服务器的实用案例来演示无服务器架构的真正魅力,case1:通过函数计算+Http触发器+云市场三者结合起来,提供一个能查询手机号归属地天气预报,case2,通过输入指定的网站抓取图片的案例,这两个例子都不需要配置WEB容器、不需要搭建运行环境、不需要购买负载均衡,通过简单配置和业务代码即可完成一个高可用高弹性无服务器的应用服务。
1742 0
RedisManager使用手册(六)-- 监控功能介绍
RedisManager Monitor功能和query功能介绍,Monitor模块对Redis 集群的重要指标进行监控,如平均内存占用、客户端连接数、cache命中率,节点内存碎片等,Monitor 模块中支持查看 Config、Info、Slowlog 和查询数据功能。
1946 0
+关注
Java学习录
专注于Java知识体系学习,Spring、SpringBoot、SpringCloud源码解析
57
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载