在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屋!
查看全文