Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 514|回复: 0

通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

[复制链接]
  • TA的每日心情
    奋斗
    7 天前
  • 签到天数: 745 天

    [LV.9]以坛为家II

    2041

    主题

    2099

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    704660
    发表于 2021-8-31 12:21:20 | 显示全部楼层 |阅读模式

    1.前言

    最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看。然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文字字体阴影效果来解决此问题。

    2.例子说明

    未加入字体阴影之前的效果

       

    加入字体阴影的效果

    如果没加入字体阴影的效果,左图会看不清哪些文字的,而右图没有多大区别。

    3.相关代码

    <div> 
      <img alt="imageSample" style="width:160px;height:90px" data-imgSize="<%=size%>" data-imgResolution="<%=resolution%>" src="http://localhost:8080/xxx/static/images/list/<%=fileName%>">
      <span id="hoverTip" style="font-size:12px;text-shadow:0px 0px 10px #000;color:#ffffff;width:160px;height:20px;position:relative;bottom:33px">
      </span>
    </div> 
    text-shadow:0px 0px 10px #000;
    第一个参数0px:代表阴影距离左5px显示
    第二个参数0px:代表阴影距离上5px显示
    第三个参数10px:代表阴影大小的范围
    第四个参数#000:代表圆阴影颜色
    position:relative;bottom:33px
    加入此属性,文字的span标签就可以让其漂在图片上面
    $('.eachimg').hover(
                    function() {
                        var tip = "Image Size:"+$(this).find('img').attr('data-imgSize')+" Resolution:"+$(this).find('img').attr('data-imgResolution');
                        $(this).find('#hoverTip').html(tip);
                        $(this).find('#hoverTip').css("display","block");
                        //$(this).find('#hoverTip').fadeIn();
                        //$(this).find('#hoverTip').show(100);
                    },
                    function(){
                        $(this).find('#hoverTip').css("display","none");
                        //$(this).find('#hoverTip').fadeOut();
                        //$(this).find('#hoverTip').hide(100);
                    }
                );
    说明一下,上面显示隐藏,有三种方案,fadeIn和fadeOut 从底向上淡入淡出,show和hide是从左上角慢慢地淡入淡出,后两种方案,目前这个代码会出现一个问题,当你多次快速经过某张图片时,由于有延时性,所以淡入淡出会出现多次。
    4.总结
    这个小功能主要是用到了css相对位置和字体阴影的特性及jquery的hover的方法。
    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

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

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 05:04 , Processed in 0.056063 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表