使用jQuery提供阴影效果

时间:2011-03-20 05:56:47

标签: javascript jquery html css shadow

我想使用jQuery给出叠加和阴影效果.i使用它有困难

2 个答案:

答案 0 :(得分:9)

你不需要一个影子插件。使用以下跨浏览器阴影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/

处的工作示例

答案 1 :(得分:0)

阴影部分:

<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