使用jQuery提供阴影效果

Question

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

Answer 1

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{
    -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');

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.

Check working example at http://jsfiddle.net/ttCSQ/1/

Answer 2

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