雅安工程交易建设网站,不花钱自己可以做网站吗,做网站的客户资料交换qq群,网站标题改动1.前言 最近需要加入一个小功能#xff0c;在鼠标越过图片时#xff0c;提示其大小和分辨率#xff0c;而不想用增加属性title来提醒#xff0c;不够好看。然而发现如果文字是一种颜色#xff0c;然后总有概率碰到那张图上浮一层的文字会看不到#xff0c;所以加入文字字… 1.前言 最近需要加入一个小功能在鼠标越过图片时提示其大小和分辨率而不想用增加属性title来提醒不够好看。然而发现如果文字是一种颜色然后总有概率碰到那张图上浮一层的文字会看不到所以加入文字字体阴影效果来解决此问题。 2.例子说明 未加入字体阴影之前的效果 加入字体阴影的效果 如果没加入字体阴影的效果左图会看不清哪些文字的而右图没有多大区别。 3.相关代码 div img altimageSample stylewidth:160px;height:90px data-imgSize%size% data-imgResolution%resolution% srchttp://localhost:8080/xxx/static/images/list/%fileName%span idhoverTip stylefont-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的方法。 转载于:https://www.cnblogs.com/fanbi/p/7044587.html
