1.DIV阴影

1.-jQuery.shadow.js插件
 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Shadow for the jQuery Library</title>
 8 <script src="js/jquery-1.2.3.js" type="text/javascript"></script>
 9 <script type="text/javascript" src="js/jquery.shadow.js"></script> 
10 <style type="text/css">
11     *{
12         font-size: 14px;
13     }
14 </style>
15 <script type="text/javascript">
16     $(function(){
17         $("#contentDiv").shadow();
18         $("#example1").shadow();
19         $("#exampleDiv").shadow({
20             width:5,
21             startOpacity:60, 
22             endOpacity:10,
23             cornerHeight:1, 
24             color:"#111222"
25             });
26     });
27 
28 </script>
29 </head>
30 <body>
31     <div id="contentDiv" style="border: 1px soild #000000;padding: 5px;">
32         <table style="width:800px;">
33             <tr>
34                 <td nowrap="true">
35                     <span style="font-size: x-large;font-weight: bold;">Jquery Shadow</span>
36                 </td>
37             </tr>
38         </table>
39         
40         <span style="font-weight:bold">demo:</span>
41         
42         <br />
43         
44         <table border="1">
45                     <tr>
46                         <td style="text-align:center; font-weight:bold;">
47                             Before
48                         </td>
49                         <td style="text-align:center; font-weight:bold;">
50                             After
51                         </td>
52                     </tr>
53                     <tr>
54                         <td style="padding:15px;">
55                             <div id='example1Before' style='width:100px; padding:5px; border-style:solid; border-width:1px; background-color:#ddddff;'>
56                                 this is some content
57                             </div>
58                         </td>
59                         <td style="padding:15px;">
60                             <div id='example1' style='width:100px; padding:5px; border-style:solid; border-width:1px; background-color:#ddddff;'>
61                                 this is some content
62                             </div>
63                         </td>
64                     </tr>
65                 </table>
66     
67                 <br />
68                 
69                 <table border="1">
70                     <tr>
71                         <td style="text-align:center; font-weight:bold;">
72                             Before
73                         </td>
74                         <td style="text-align:center; font-weight:bold;">
75                             After
76                         </td>
77                     </tr>
78                     <tr>
79                         <td style="padding:15px;">
80                             <div style='width:100px; padding:5px; border-style:solid; border-width:1px; background-color:#ddddff;'>
81                                 exampleDiv Before
82                             </div>
83                         </td>
84                         <td style="padding:15px;">
85                             <div id='exampleDiv' style='width:100px; padding:5px; border-style:solid; border-width:1px; background-color:#ddddff;'>
86                                 exampleDiv After
87                             </div>
88                         </td>
89                     </tr>
90                 </table>
91     </div>
92 </body>
93 </html>
posted on 2017-01-08 19:13 Sharpest 阅读(173) 评论(0) 收藏举报