jquery大神帮我做个遮罩吧

Posted 2023-04-23

这个图可以从中间一分为二，

右边的9张小图，我希望可以在上面各自有一层遮罩，默认显示遮罩，鼠标移动到对应的图上，遮罩改变下颜色，这样用户就知道自己鼠标指着的是哪个小图了

遮罩可以是文字 也可以是透明图，求大神默认给出2套方案，一套是文字，一套是透明图

用纯css实现

无需js

修改透明度时，修改filter和opacity属性即可（默认是80%）

图片地址换成你自己的

li的排列随你的喜好

唯一需要注意的是div一定要把li填满

如果有一点html基础，代码你一看就懂的

参考技术A

就是要实现下面图的效果吗？

为了方便你看 做的简单实例

<style>
.small-img
 width:80px;
 height:80px;
 background:url(003.png);

.m_over
 opacity:0.8;
 filter:  alpha(opacity=80);  
 background:#333 url('覆盖图片'); 
 width:80px;
 height:80px;

</style>
<div class='small-img'  title='xxx1'>
<div></div>
</div>
<script>
$(function()
$(".small-img").hover(
  function () 
    $(this).children().addClass("m_over");
  ,
  function () 
    $(this).children().removeClass("m_over");
  
);
)
</script>

参考技术B 用下面这个做下修改：

01 $(function()
02 var oBig = $('#box .big');
03 var oBigKeep = oBig.find('.bigKeep');
04 var aLi = $('#box ul li');
05 oBig.hover(function()
06 oBigKeep.stop().animate(
07 opacity:1
08 ,500)
09 ,function()
10 oBigKeep.stop().animate(
11 opacity:0
12 ,500)
13 )
14 var oKeep,oTxt;
15 aLi.hover(function()
16 oKeep = $(this).find('.keep');
17 oTxt = $(this).find('.txt');
18 oKeep.stop().animate(
19 opacity:0.8
20 ,300);
21 oTxt.stop().animate(
22 left:0,
23 opacity:1
24 ,200);
25 ,function()
26 oKeep.stop().animate(
27 opacity:0
28 ,300);
29 oTxt.stop().animate(
30 left:-170,
31 opacity:0
32 ,200);
33 )
34 ) 参考技术C 遮罩就是一层透明的div，你写在网页中 ， 设置 好 class .
例子 不class="on" $(".on").hover(function()$(this).hide();,function()$(this).show(););
$(".on") 这里换成你的 css 就行了

你好，请问能帮我做个计时器吗？

参考技术A 用Timer控件就可以实现！ 参考技术B 就只要计时吗？ 参考技术C 可以追问

你会做计时器？我想要类似这种的，软件里面要8个独立的小计时器。有开始，暂停，继续，复位4种按钮。能帮我做个吗？谢谢