2014年10月29日 星期三

漂亮彈跳地出現文字說明框：easy JQuery




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那幾條程式，即紅色字體者，就 可以不用再使用。一篇文章原則上有一次即可。



沒有留言:

張貼留言