项目当中最近有个需求就是。需要提醒进行某些操作的地方,要把那个操作做一个提醒的样式,比如高亮闪烁。
代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width:200px;padding: 50px;margin:0 auto;border:1px solid lightblue;}.operation-reminds{ //闪烁交替的样式-webkit-box-shadow: 0 0 20px 0 #fff0d5,0 0 0 2px #f1a325 !important; //阴影变大box-shadow: 0 0 20px 0 #fff0d5,0 0 0 2px #f1a325 !important; //阴影变大transition: box-shadow 1s!important; //阴影动态变大(小变大是个动画)color: #fff !important;background: #F6BE63;}.operation-reminds:hover{-webkit-box-shadow: 0 0 20px 0 #fff0d5,0 0 0 7px #f1a325 !important;box-shadow: 0 0 20px 0 #fff0d5,0 0 0 7px #f1a325 !important;transition: box-shadow 1s!important;}</style></head><body><div><a href="" id="bling">blingbling的~</a></div><script src="jquery-1.8.3.min.js"></script><script>$(function(){$("#bling").addClass("operation-remind-flag");setInterval(function(){if($('.operation-remind-flag').hasClass("operation-reminds")){$('.operation-remind-flag').removeClass("operation-reminds")}else{$('.operation-remind-flag').addClass("operation-reminds")}},900);})</script></body></html>
只要就是用到定时器,如果是有条件的闪烁,只要给需要加闪烁的标签:
1)加上一个operation-remind-flag类即可
2)调用一下事件(包含定时器的事件)
3)样式的问题:
operation-remind-flag类只是为了判断存在的,operation-reminds类才是和正常样式交替的样式;
如果不想要阴影变大的效果,可以去掉shadow的效果;