JQuery控制圖片由中心點逐漸放大效果
更新時間：2016年06月26日 08:40:59 作者：我愛默小兜
這篇文章主要介紹了JQuery控制圖片由中心點逐漸放大效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
有的時候我們需要做一個當鼠標放置在圖片上的時候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時，其left值與top值沒有改變，故看似不是從中心點進行縮放的。如下圖：
從中心點進行縮放
實現(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控制圖片由中心點逐漸放大效果的相關知識，希望對大家有所幫助，如果大家想了解更多內容敬請關注腳本之家網站！
您可能感興趣的文章:
相關文章
現(xiàn)在很多朋友都喜歡使用jquery了，所以很多的表格判斷都是基于jquery的，但實現(xiàn)方法與javascript原生代碼不同，對于checkbox的判斷大家可以參考下。2010-10-10
這篇文章主要介紹了jQuery+HTML5實現(xiàn)圖片上傳前預覽效果,涉及jquery操作圖片動態(tài)顯示效果,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JQuery實現(xiàn)簡單的服務器輪詢效果,結合實例形式分析了jQuery的ajax交互結合.net處理實現(xiàn)輪詢效果的相關技巧,需要的朋友可以參考下2016-03-03
jQuery獲取訪問者IP地址的方法(基于新浪API與QQ查詢接口)
這篇文章主要介紹了jQuery獲取訪問者IP地址的方法,實例分析了jQuery基于新浪API與QQ查詢接口獲取來訪者IP的相關參數(shù)傳遞與數(shù)據(jù)處理技巧,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄胘query快速解決IE輸入框不能輸入的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
自定義錯誤消息的顯示方式2010-07-07
jquery統(tǒng)計輸入文字的個數(shù)并對其進行判斷
判斷輸入文字個數(shù)并提示還可以輸入多少個字，類似的功能使用jquery便可輕松實現(xiàn)2014-01-01
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼,需要的朋友可以參考下。2010-10-10
使用Javascript實現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實現(xiàn)下拉菜單可選擇互相移動并實現(xiàn)菜單排序，代碼簡單易懂，具有參考價值，需要的朋友參考下吧2016-02-02
本文主要介紹了用的jqueryRotate插件實現(xiàn)轉盤抽獎功能的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01