*YouTube 教學頻道* *影像布落格*
首頁
網路組寫作技能
布落格寫作
小世界習作網
世新新聞匯流網
臉書小品文

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://lh5.googleusercontent.com/-tBDNsvaiOkU/VFCgbbrAbLI/AAAAAAAAYfo/OoyP56WpVVM/w48-h42-no/mouse-2_318-11618.jpg), url(https://lh5.googleusercontent.com/-0CngfpMcgA0/VDqDgCo9MVI/AAAAAAAAYVI/kxdyL4zaSTw/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那幾條程式,即紅色字體者,就 可以不用再使用。一篇文章原則上有一次即可。