javascript 使用 jQuery 提供阴影效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5367026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Give shadow effect using jQuery
提问by sampada pai
i want to give overlay and shadow effect using jQuery.i have difficulty in using it
我想使用 jQuery 提供叠加和阴影效果。我使用它有困难
回答by Hussein
You do not need a shadow plugin for this. Use the following cross browser shadow CSS properties and put them in a class name .shadow. Then using jquery's addClass()function you can add the shadow class to any element that you want to have a shadow.
为此，您不需要影子插件。使用以下跨浏览器阴影 CSS 属性并将它们放在类名中.shadow。然后使用 jquery 的addClass()函数，您可以将阴影类添加到您想要阴影的任何元素。
CSS
CSS
.shadow{
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
}
jQuery
jQuery
$('div').addClass('shadow');
The above jQuery selector will apply shadow to div element. Similarly you can apply the same shadow class to any element that you want to have a shadow. You can Adjust the shadow CSS properties as needed.
上面的 jQuery 选择器将阴影应用于 div 元素。类似地，您可以将相同的阴影类应用于您想要阴影的任何元素。您可以根据需要调整阴影 CSS 属性。
Check working example at http://jsfiddle.net/ttCSQ/1/
在http://jsfiddle.net/ttCSQ/1/检查工作示例
回答by Ram Kumar
the shadow part:
阴影部分：
<script type="text/javascript">
$(function(){
$("#exampleDiv").shadow({
width:5,
startOpacity:60,
endOpacity:10,
cornerHeight:8,
color:"#000000"
});
})
</script>
this is for the overlay part : http://flowplayer.org/tools/overlay/index.html
