|
kdsa fda fdjfda fl fdf jdsaf
lkdafldjf ldja lfjdlajfldj afl;d lf dla fda fldsaf dlksf ldjfldj lfjdlfj dlj fldj lfj dlf jdj fdj f dslakf dsf ldfldjfljd lf dlj fdj fl dlf d fdl fdaf lkd fldjfldlfj dfj dls |
左 邊 是 要 實 驗 的 東 東 ！ |
| 一、教學影音： |
| |
| 二、請在<body>之後插入下列 CSS ： |
| <style> .tabdiv1029 { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBRTNI7u4ndv84DLzUc3vNThBk8hP42se-0WTIDcvc8fWMW1RluQ5UF9NAiYkjcpWGcHusHjC47bQgwS5T_IFfBpzDCkwY1SDPnvVDWRrdWp1ANSo0fp9KopLRLb6nY-SGDV3la2Nbh8/w48-h42-no/mouse-2_318-11618.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuypCTBLgUE8Uzgtmk5CBLe_qmT2J5nNApg1Dv6kVuYc4DApKLm3EnCbRyKArw2UX-kq147j3aYL1LzVI_6lYKxAA5Znd0aaN-SVWpTm8RAUwZPuubjTFLcnjOOm9afMmfynaufD8AI4/w1285-h857-no/IMG_1076.JPG); background-repeat: no-repeat, no-repeat; background-size: 48px 42px, 480px 320px; background-position: right 3px bottom 3px, left top; } .tabword1029 { font-family: Verdana, '微軟正黑體'; font-size: 1.02em; font-weight: bold; line-height: 1.4em; text-align: left; padding: 0em 0.3em 0em 0.3em; width: 75%; margin: auto; color: white; background-color: rgba(60, 60, 60, 0.7); } .disheight01 { overflow: hidden; height: 0px; } .disheight02 { height: auto; } </style> |
| 三、請在<body>之後插入下列
jQuery 程式碼： |
| <script
src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css"> <script> $(function() { $( ".tabdiv1029" ).hover(function() { $( this ).find(">div").addClass("disheight02", 400, "easeOutBounce"); } , function() { $( this ).find(">div").removeClass("disheight02", 200, "easeOutBounce" ); }); }); </script> 注意事項： 如因其他互動模式而使用了 1.9.1以及1.9.2那幾條程式，即紅色字體者，就 可以不用再使用。一篇文章原則上有一次即可。 |
沒有留言:
張貼留言