鼠标经过:
&nbs">
首頁 > web前端 > js教程 > 主體

當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery

WBOY
發布: 2016-05-16 17:32:35
原創
1638 人瀏覽過

原始狀態:
當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery 
鼠標經過:
當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery 

複製代碼 代碼如下:




>
無標題文件


$(function(){
var offsetX=20-$(" #imgtest").offset().left;
var offsetY=20-$("#imgtest").offset() .top;
var size=1.2*$('#imgtest ul li img' ).width();
$("#imgtest ul li").mouseover(function(event) {
var $target=$(event.target);
if($target.is( 'img'))
{
$("當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery").css({
"高度" :尺寸,
"寬度":尺寸,
"頂部":event.pageX offsetX,
" left":event.pageY offsetY,
}).appendTo($("#imgtest" ));
}
}).mouseout(function() {
$("#tip" ).remove();
}).mousemove(function(event) {
$("#tip").css(
{
"left":event.pageX offsetX,
"top":event.pageY offsetY
})
})
;

img{ 高度:262px;寬度:400px;位置:絕對;邊框:5px實心#FFF;}
#imgtest{ 高度:自動;寬度:840px;保證金:0 自動;位置:絕對; }
#imgtest ul{ 位置:相對;寬度:840px;高度:自動;背景:#00F;}
#imgtest ul li{位置:相對;高度:276 像素;寬度:410px;列表樣式:無;浮動:左;邊距:3px;邊框:1px 實心#999;}
;
頭>


    ;
  • 當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery

  • 當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery

  • 當滑鼠移動到圖片上時跟隨滑鼠顯示放大的圖片效果_jquery




身體>


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!