快捷導(dǎo)航

JQuery控制圖片由中心點(diǎn)逐漸放大效果

更新時(shí)間：2016年06月26日 08:40:59 作者：我愛(ài)默小兜

這篇文章主要介紹了JQuery控制圖片由中心點(diǎn)逐漸放大效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

有的時(shí)候我們需要做一個(gè)當(dāng)鼠標(biāo)放置在圖片上的時(shí)候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時(shí)，其left值與top值沒(méi)有改變，故看似不是從中心點(diǎn)進(jìn)行縮放的。如下圖：

從中心點(diǎn)進(jìn)行縮放

實(shí)現(xiàn)代碼如下：

<meta charset="utf-8"> 
<style type="text/css"> 
#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; padding-left:50px;} 
#div1 img{ position:absolute; left:0; top:0; margin: 0 auto;} 
</style> 
<div id="div1"> 
<img src="images/1.jpg" width="100px" height="80px"> 
</div> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#div1 img').mouseenter(function(){ 
var wValue=1.5 * $(this).width(); 
var hValue=1.5 * $(this).height(); 
$(this).animate({width: wValue, 
height: hValue, 
left:("-"+(0.5 * $(this).width())/2), 
top:("-"+(0.5 * $(this).height())/2)}, 1000); 
}).mouseleave(function(){ 
$(this).animate({width: "100", 
height: "80", 
left:"0px", 
top:"0px"}, 1000 ); 
}); 
}); 
</script>

以上所述是小編給大家介紹的JQuery控制圖片由中心點(diǎn)逐漸放大效果的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章:

相關(guān)文章

jquery判斷checkbox(復(fù)選框)是否被選中的代碼
現(xiàn)在很多朋友都喜歡使用jquery了，所以很多的表格判斷都是基于jquery的，但實(shí)現(xiàn)方法與javascript原生代碼不同，對(duì)于checkbox的判斷大家可以參考下。
2010-10-10
jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
這篇文章主要介紹了jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果,涉及jquery操作圖片動(dòng)態(tài)顯示效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
JQuery實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器輪詢效果實(shí)例
這篇文章主要介紹了JQuery實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器輪詢效果,結(jié)合實(shí)例形式分析了jQuery的ajax交互結(jié)合.net處理實(shí)現(xiàn)輪詢效果的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
jQuery獲取訪問(wèn)者IP地址的方法(基于新浪API與QQ查詢接口)
這篇文章主要介紹了jQuery獲取訪問(wèn)者IP地址的方法,實(shí)例分析了jQuery基于新浪API與QQ查詢接口獲取來(lái)訪者IP的相關(guān)參數(shù)傳遞與數(shù)據(jù)處理技巧,需要的朋友可以參考下
2016-05-05
用jquery快速解決IE輸入框不能輸入的問(wèn)題
下面小編就為大家?guī)?lái)一篇用jquery快速解決IE輸入框不能輸入的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jquery validate使用攻略第四步
自定義錯(cuò)誤消息的顯示方式
2010-07-07
jquery統(tǒng)計(jì)輸入文字的個(gè)數(shù)并對(duì)其進(jìn)行判斷
判斷輸入文字個(gè)數(shù)并提示還可以輸入多少個(gè)字，類(lèi)似的功能使用jquery便可輕松實(shí)現(xiàn)
2014-01-01
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼,需要的朋友可以參考下。
2010-10-10
使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實(shí)現(xiàn)下拉菜單可選擇互相移動(dòng)并實(shí)現(xiàn)菜單排序，代碼簡(jiǎn)單易懂，具有參考價(jià)值，需要的朋友參考下吧
2016-02-02
jquery實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01