室內設計2:其他應用

範例結果

五、形影相隨的注解

在內文中加入相關單詞注解,在<a>連結中,加入【class=”preview”】,利用【data-*】加入圖片路徑

<a href="javascript:;" class="preview" data-prev="images/AD1.png" title="">室內設計Interior Design</a>


<a href="javascript:;" class="preview" data-prev="images/AD1.png" title="Title Notes1">室內設計Interior Design1</a>

相關CSS美化,其中【#preview】為利用程式目的加入CSS美化中。

.preview {
    color: #c40808; font-weight: bolder; font-size: 24px;
}    
#preview{
    position:absolute;           /*為程式中加入定位*/  
    display:none;                /*預先隱藏,當滑鼠靠近再顯示*/
}
#preview span {
    display: block; 
    color:#ffffff; text-align: center; font-weight: bolder; 
    background: #a80663; line-height: 30px;
}

 

S1:在段落中某一處加入下方結構,以利程式加入滑鼠目前所在位置

<span class="page"></span>

參考連結:【jQuery event.pageX 屬性】、【相關事件

//S10: mousemove事件,e.pageX、e.pageY 確認滑鼠位置
$(document).mousemove(function(event){
    $("span.page").text("X: " + event.pageX + ", Y: " + event.pageY);
});

S2:寫入程式語法

程式寫入位置必須寫在 第3頁的內頁

//S11: 在文中,加入隨身註解

var $thisTitle ;
$("a.preview").hover(
    function(e){	
         $thisTitle = $(this).attr('title');
 //       console.log($thisTitle);
        $(this).attr('title','') ;          /*若現有連結項目有title時,移除之*/
        var c = ($thisTitle != "") ? '<span>' + $thisTitle +'</span>': "";
        $("body").append('<p id="preview">'+ c +'<br><img src="'+ $(this).data('prev') +'"/></p>');

        $("#preview").css({top:e.pageY +10,left:e.pageX + 10}).fadeIn();
        
        }
	,function(){
        $("#preview").remove();
        $(this).attr('title',$thisTitle);
    });

S3:若出現注解時,若超出視窗時,會產生捲軸,利用寫程式判斷

//S11: 在文中,加入隨身註解

var $thisTitle ;
$("a.preview").hover(
    function(e){	
         $thisTitle = $(this).attr('title');
 //       console.log($thisTitle);
        $(this).attr('title','') ;
        var c = ($thisTitle != "") ? '<span>' + $thisTitle +'</span>': "";
        $("body").append('<p id="preview">'+ c +'<br><img src="'+ $(this).data('prev') +'"/></p>');

   //確認視窗大小為避免物件超出範圍,顯示捲軸                           /*新增*/
        var $targetW = $(window).width();
        var $prevW = $("#preview").outerWidth(true);
        var $prevLeft = e.pageX + 10;
  //      console.log($targetW+'/'+$prevLeft+'/'+$prevW);
        if($prevW+$prevLeft>=$targetW ){
            $("#preview").css({top:e.pageY +10,right:0}).fadeIn();
        }else{
            $("#preview").css({top:e.pageY +10,left:e.pageX + 10}).fadeIn();
        }

    }
	,function(){
        $("#preview").remove();
        $(this).attr('title',$thisTitle);
    });