使用 jQuery 提供阴影效果答案

【问题标题】：Give shadow effect using jQuery使用 jQuery 提供阴影效果
【发布时间】：2011-07-19 00:44:00
【问题描述】：

我想使用 jQuery 提供叠加和阴影效果。我很难使用它

【问题讨论】：

你尝试过任何 Jquery 插件吗？
请更具体。你在使用插件吗？您指的是模态窗口效果吗？您遇到了哪些困难？

【解决方案1】：

您不需要为此使用影子插件。使用以下跨浏览器阴影 CSS 属性并将它们放在类名 .shadow 中。然后使用 jquery 的 addClass() 函数，您可以将阴影类添加到您想要有阴影的任何元素。

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

$('div').addClass('shadow');

上面的 jQuery 选择器将阴影应用到 div 元素。同样，您可以将相同的阴影类应用于您想要有阴影的任何元素。您可以根据需要调整阴影 CSS 属性。

在http://jsfiddle.net/ttCSQ/1/查看工作示例

【讨论】：

【解决方案2】：

阴影部分：

<script type="text/javascript">
    $(function(){
       $("#exampleDiv").shadow({
           width:5, 
           startOpacity:60, 
           endOpacity:10, 
           cornerHeight:8, 
           color:"#000000"
       });
    })
</script>

这是用于覆盖部分：http://flowplayer.org/tools/overlay/index.html

【讨论】：