本文實(shí)例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內(nèi)容如下
注釋：
small img size：600x400
big img size：1200x800
原理：
1、大圖是小圖的 2倍整
2、大圖以小圖片中心點(diǎn)為中心
a.transform : translate(-50%,-50%)
b.(rate-0.5)*50%
c.clip : rect(t,r,b,l) 以小圖邊界為邊界
3、rect必須有absolute
4、獲取鼠標(biāo)在圖片中的位置
a.獲取鼠標(biāo)位置 XY
b.獲取圖片位置、寬度、高度
i.得到鼠標(biāo)在圖片的百分比位置
ii.將百分比位置應(yīng)用于大圖 left，top
問題：
居中理解太差：
absolute ,left ,top,right,bottom,margin
放大縮小問題：
起初： transform： scale() 縮放
利用 transition 過渡
結(jié)果，采用這種方法會(huì)使得鼠標(biāo)移動(dòng)時(shí)很卡頓
可能原因：每次hover 都會(huì)觸發(fā) transition事件
解決方法：采用了 Animate 動(dòng)畫來實(shí)現(xiàn)縮放
細(xì)節(jié)：
以 onmouse 事件 e 動(dòng)態(tài)獲得 e.pageX 和 e.pageY
以 $().offset().top /left 獲取圖片位置
以 $().width() /height() 獲取圖片寬高
在錯(cuò)誤的操作中也忘了獲取 class 的方法
$().attr("class")
$().prop("class")
event.traget.className
如果要實(shí)現(xiàn) hover出現(xiàn) 透明的塊狀就在外部 opacity:0.5; 設(shè)置z-index就可以了。
<html> <head> <meta charset="UTF-8"> <title>WEBGOD</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #warpper{ margin: 0 auto; padding: 0; position: relative; z-index: 1; width: 600px; height: 400px; } .small{ text-align: center; } .big{ display: none; clip: rect(200px,900px,600px,300px); position: absolute; width: 1200px; height: 800px; top: 50%; left:50%; transform: translate(-50%,-50%); } .big img{ position: absolute; width: 600px; height: auto; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div id="warpper"> <div class="small"> <img src="img/small_19.jpg"/> </div> <div class="big"> <img src="img/img_19.jpg"/> </div> </div> <script type="text/javascript"> $(function(){ var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY; $("#warpper").hover(function(){ $(".big").css("display","block"); $(".big img").animate({"width":"1200px"},500); },function(){ $(".big img").animate({"width":"600px"},1); $(".big").css("display","none"); }) $("#warpper").on("mousemove",function(e){ x = e.pageX; y = e.pageY; top = $(".small img").offset().top; left = $(".small img").offset().left; width = $(".small img").width(); height = $(".small img").height(); // imgWidth = $(".big img").width(); imgHeight = $(".big img").height(); rateX = (left+width-x)/width; rateY = (top+height-y)/height; if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){ $(".big img").css("left",(rateX-0.5)*50+"%"); $(".big img").css("top",(rateY-0.5)*50+"%"); } }) }) </script> </body></html>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
