使用jQuery提供阴影效果

Question

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

Answer 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/上的工作示例

Answer 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