怎么使用jquery实现圆形图片

本文小编为大家详细介绍“怎么使用jquery实现圆形图片”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用jquery实现圆形图片”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 HTML模板首先，在HTML模板中添加一张图片。在这张图片的父元素中，我们需要添加一个空白的div元素。这个div元素的作用是为了容纳图片，并为图片添加样式。

CSS样式接着，在CSS中为父元素和图片添加基础样式。给父元素设置一个宽高相等的正方形，并将其圆角属性设置为50%。同时，为图片设置宽度、高度和边框。注意，父元素的圆角属性和图片的宽度和高度需要根据具体的需求进行调整。

.img-circle-container{
width:150px;/*父元素的宽度*/
height:150px;/*父元素的高度*/
border:2pxsolid#222;/*图片边框*/
border-radius:50%;/*圆角属性*/
overflow:hidden;/*图片超出父元素的部分隐藏*/
}
.img-circle-containerimg{
width:100%;/*图片宽度*/
height:auto;/*图片高度*/
border:none;/*去除图片边框（可选）*/
}

jquery操作现在，我们需要使用jquery操作DOM元素，为图片添加一个圆形遮罩层。具体操作如下：（1）为父元素添加遮罩层

//获取图片父元素
var$imgContainer=$('.img-circle-container');

//动态添加遮罩层
var$mask=$('
',{
"class":"mask"//自定义样式名称
}).appendTo($imgContainer);
（2）为遮罩层添加css样式
.mask{
position:absolute;/*绝对定位*/
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);/*遮罩层背景色*/
border-radius:50%;/*圆角属性*/
opacity:0;/*初始透明度为0*/
transition:opacity0.3sease-in-out;/*过渡动画效果*/
}


（3）为遮罩层添加鼠标移入事件

//鼠标移入时，遮罩层的透明度改为1
$imgContainer.on('mouseenter',function(){
$(this).find('.mask').css('opacity',1);
});
//鼠标移出时，遮罩层的透明度改为0
$imgContainer.on('mouseleave',function(){
$(this).find('.mask').css('opacity',0);
});

通过上述操作，我们就可以使用jquery实现圆形图片了。当鼠标移入图片时，图片被遮罩层覆盖，同时遮罩层的透明度从0逐渐变为1；当鼠标移出图片时，遮罩层的透明度又从1逐渐变为0，图片重新显示。
读到这里，这篇“怎么使用jquery实现圆形图片”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。


推荐阅读：


jQuery学习笔记之Ajax用法详解


怎么为JQuery EasyUI表单组件增加焦点切换功能





免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

   免费云主机、域名             


jquery






上一篇新闻：

jquery如何实现两秒后消失功能


下一篇新闻：

怎么使用jQuery实现抽奖功能





猜你喜欢



web前端入门到实战：CSS3中width值为max/min-content及fit-content
web前端入门到实战：html中div使用CSS实现水平/垂直居中的多种方式
web前端入门到实战：HTML 转 PDF 图文报表实践
web前端入门到实战：html5 canvas模拟实现树的生长
mac 抓包工具Charles 使用(pc端)
vue使用jsonp
web前端入门到实战：几种HTML标签伪元素绑定事件的方式
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
web前端入门到实战：CSS3边框与圆角
web打印的最佳解决方案


        （2）为遮罩层添加css样式

.mask{
position:absolute;/*绝对定位*/
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);/*遮罩层背景色*/
border-radius:50%;/*圆角属性*/
opacity:0;/*初始透明度为0*/
transition:opacity0.3sease-in-out;/*过渡动画效果*/
}
（3）为遮罩层添加鼠标移入事件

//鼠标移入时，遮罩层的透明度改为1
$imgContainer.on('mouseenter',function(){
$(this).find('.mask').css('opacity',1);
});
//鼠标移出时，遮罩层的透明度改为0
$imgContainer.on('mouseleave',function(){
$(this).find('.mask').css('opacity',0);
});
通过上述操作，我们就可以使用jquery实现圆形图片了。当鼠标移入图片时，图片被遮罩层覆盖，同时遮罩层的透明度从0逐渐变为1；当鼠标移出图片时，遮罩层的透明度又从1逐渐变为0，图片重新显示。读到这里，这篇“怎么使用jquery实现圆形图片”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
相关推荐: react中map怎么使用

这篇文章主要介绍了react中map怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react中map怎么使用文章都会有所收获，下面我们一起来看看吧。 react中map的用法：1、使用“{this.state.ToDoLi…

文章页内容下