快捷導(dǎo)航

jQuery簡(jiǎn)易圖片放大特效示例代碼

更新時(shí)間：2014年06月09日 11:23:34 作者：

這篇文章主要介紹了通過(guò)jQuery實(shí)現(xiàn)的簡(jiǎn)易圖片放大特效,需要的朋友可以參考下

DEMO點(diǎn)擊圓形圖片，圖片方法，將水的圖片放置與下層，鼠標(biāo)移上去的時(shí)候，圖片高與寬同比增大，并且圖片向左上移動(dòng)

代碼

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無(wú)標(biāo)題文檔</title> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(e) { 
$(".water1").mouseover(function(){ 
$("#img1").stop(true,true).animate({top:"-32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow"); 
$("#img2").stop(true,true).animate({top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow"); 
$("#img3").stop(true,true).animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow"); 
}) 
$(".water1").mouseout(function(){ 
$("#img1").stop(true,true).animate({top:"0px",left:"0px",width:"335px",height:"335px"},"slow"); 
$("#img2").stop(true,true).animate({top:"0px",left:"0px", width:"95px",height:"95px"},"slow"); 
$("#img3").stop(true,true).animate({top:"0px",left:"0px", width:"33px",height:"33px"},"slow"); 
}) 
}); 
</script> 
<style> 
.show{ width:1440px; height:474px; position:relative; background-color:#3d9abc;} 
.water1{ height: 335px; width:335px; border-radius:167.5px; overflow:hidden; position:absolute; left:186px; top:69px;} 
.water2{ height: 95px; width:95px; border-radius:47.5px; overflow:hidden; position:absolute; left:545px; top:294px;} 
.water3{ height: 33px; width:33px; border-radius:16.5px; overflow:hidden; position:absolute; left:549px; top:220px;} 
#img1{ position:absolute;} 
#img2{ position:absolute; } 
#img3{ position:absolute;} 
</style> 
</head> 
<body> 
<div class="show"> 
<div class="water1"><img id="img1" src="images/big.jpg" /></div> 
<div class="water2"><img id="img2" src="images/middle.jpg" /></div> 
<div class="water3"><img id="img3" src="images/small.jpg" /></div> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

圖片放大

相關(guān)文章

jquery 插件學(xué)習(xí)（一）
jquery插件，有幾種方法，有全局的，有對(duì)象方法的，一直覺(jué)得jquery插件迷迷糊糊，這陣子特地研究下，供那些像我一樣的初學(xué)者借鑒下。嘻嘻
2012-08-08
jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能,結(jié)合完整實(shí)例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關(guān)操作技巧,需要的朋友可以參考下
2019-08-08
Jquery $.getJSON 在IE下的緩存問(wèn)題解決方法
$.getJSON 的url都是相同的問(wèn)題來(lái)了我修改或者新增樹節(jié)點(diǎn) 然后刷新tree IE竟然毫無(wú)變化在其他瀏覽器上面都OK，于是搜到一個(gè)可行的解決方法
2014-10-10
jQuery中內(nèi)容過(guò)濾器簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中內(nèi)容過(guò)濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了jQuery中內(nèi)容過(guò)濾器的相關(guān)概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用方法,需要的朋友可以參考下
2018-03-03
簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼
寫了簡(jiǎn)單的跟隨鼠標(biāo)移動(dòng)效果。這個(gè)拖拽排序的效果的區(qū)別在于：運(yùn)用了插入insertBefore 和 insertAfter 的方法
2011-09-09
JQuery插件Quicksand實(shí)現(xiàn)超炫的動(dòng)畫洗牌效果
Quicksand這是一個(gè)非常不錯(cuò)的 jQuery 插件，用于實(shí)現(xiàn)動(dòng)畫洗牌效果，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-05-05
IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問(wèn)題
這篇文章主要介紹了IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-10-10
文本框的字?jǐn)?shù)限制功能jquery插件
由于Html里只有input元素?fù)碛衜axlength屬性，而textarea沒(méi)有,所以以前對(duì)于文本框字?jǐn)?shù)限制做了很多方案的解決，但是都不太完美。
2009-11-11
jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
listbox中項(xiàng)的移動(dòng)并排序的jquery實(shí)現(xiàn)代碼，使用jquery與listbox的朋友可以參考下。
2010-09-09
jQuery插件Validation快速完成表單驗(yàn)證的方式
這篇文章主要為大家詳細(xì)介紹了jQuery插件Validation快速完成表單驗(yàn)證的方式，感興趣的小伙伴們可以參考一下
2016-07-07