在jquery中增加box-shadow css [英] incrementing box-shadow css in jquery
本文介绍了在jquery中增加box-shadow css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
box-shadow具有这样的语法
box-shadow：h-shadow v-shadow blur spread color inset;
我想设置一个jQuery函数，增加h阴影，v阴影，每次按钮点击发生时模糊2px。它会是什么样子？
$（'button [type = submit]'）。bind（'click'：function ）{pre>
$（'div'）。css（'box-shadow'???，'+ = 2'）;
}）
解决方案您可以尝试：
< html>
< head>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< style type =text / css>
#test {box-shadow：2px 2px 2px; width：100px; height：100px;}
button {height：20px; width：100px}
< / style>
< script type =text / javascript>
$（document）.ready（function（）{
$（button）。click（function（）{
$（＃test）。css '，incValues（$（＃test）。css（'box-shadow'）））;
}）;
}）;
function incValues（values）{
var splits = values.split（'px'）;
splits [0] = splits [0] .split（''）;
splits [0] = splits [0] [splits [0] .length-1];
return（parseInt（splits [2]）+ 2）+'px'+（parseInt（splits [1]）+ 2）+'px' px';
}
< / script>
< / head>
< body>
< div id ='test'>< / div>
< br />
< button>测试< / button>
< / body>
< / html>
box-shadow has a syntax like this
box-shadow: h-shadow v-shadow blur spread color inset;I would like to set up a jQuery function that increments the h-shadow, v-shadow, and blur by 2px everytime a button click takes place. What would it look like?
$('button[type=submit]').bind('click': function(){ $('div').css('box-shadow'???, '+=2'); })
解决方案You can try:
<html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style type="text/css"> #test{ box-shadow: 2px 2px 2px; width: 100px; height: 100px;} button{ height: 20px; width: 100px} </style> <script type="text/javascript"> $(document).ready(function() { $("button").click(function(){ $("#test").css('box-shadow', incValues($("#test").css('box-shadow'))); }); }); function incValues(values){ var splits = values.split('px'); splits[0] = splits[0].split(' '); splits[0] = splits[0][splits[0].length-1]; return (parseInt(splits[0])+2) +'px ' + (parseInt(splits[1])+2) +'px ' + (parseInt(splits[2])+2) +'px '; } </script> </head> <body> <div id='test'></div> <br/> <button>Test</button> </body> </html>
这篇关于在jquery中增加box-shadow css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
