javascript - js 扫描效果插件
本文介绍了javascript - js 扫描效果插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
求一个js插件。
如下图所示，一个扫描，从所有tab上扫描过；如果tab报警，则扫描条变为报警的扫描效果。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
body{position: relative;}
div#content{height:500px;border:2px solid #f00;}
div#scan{height:500px;width:300px;position: absolute;;left:-100px;top:0px;
background: -webkit-linear-gradient(left,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* 标准的语法 */
}
div#scan.yellow{
background: -webkit-linear-gradient(left,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* 标准的语法 */
}
</style>
</head>
<body>
<div id="content" style="">
</div>
<div id="scan" style=""></div>
<script type="text/javascript">
$(function(){
$("#scan").animate({left:"+=1000px"},1000*20,"linear",function(){
$(this).css({left:"-100px"});
});
setInterval(function(){
$("#scan").animate({left:"+=1000px"},1000*20,function(){
$(this).css({left:"-300px"});
});
},1000*20);
setTimeout(function(){
$("#scan").addClass("yellow");
},3000)
})
</script>
</body>
</html>
@挺问中原 提供的答案我赞同，我就不写什么其他的想法了这篇关于javascript - js 扫描效果插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
