*YouTube 教學頻道* *影像布落格*
首頁
初學者技能專區
布落格寫作
小世界習作網
《台灣立報》
臉書小品文

2015年3月28日 星期六

滑鼠移入,照片就會滑動



photos with czj 35/2.4 Thanks to deadfish1206


教學影音:




CSS語法:請 放置於<body>之後

<style>
.baimg032801 {
background-image: url(https://lh3.googleusercontent.com/--SjwjQEH5iw/VRQegF-l_kI/AAAAAAAAaxY/X4Hl4PW5odI/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size: 420px;
}
</style>

jQuery程式:請放 到<body>之後

<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">

驅動程式碼:請放到 <body>之後

<script>
$(function() {
$('.baimg032801').hover(function() {
$(this).find('>img').hide('slide', {direction: 'right'}, 400);
},
function() {
$(this).find('>img').show('slide', {direction: 'right'}, 400);
});

});
</script>

說明:
移動的方向有:left, right, up, down 四種方向。
移動的速度是:一秒為1000。所以400是0.4秒。