DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> jQuery點擊圖片彈出大圖層可以放大到原圖
jQuery點擊圖片彈出大圖層可以放大到原圖
編輯:網頁特效代碼     
效果:http://hovertree.com/texiao/jqimg/2/

效果圖:


下載:http://hovertree.com/h/bjaf/jdaqepet.htm

HTML代碼:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery實現點擊小圖彈出大圖 - 何問起 </title><base target="_blank"/>
<link href="http://hovertree.com/texiao/jqimg/2/css/style.css" rel="stylesheet" type="text/css" />
<style>
body {
margin: 0;
padding: 0;

}
body img {
width: 300px;
height: 200px;
}#hovertreephoto a{color:cadetblue}
</style>
</head>
<body>
<div style="width:960px; margin:0 auto" id="hovertreephoto">
<h1>jQuery點擊彈出大圖,可以放大為原圖,可以放大縮寫和關閉。</h1>
<a href="http://hovertree.com/h/bjaf/i3ptrtqm.htm">原文</a> <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效庫</a><br />
<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/1.jpg" alt="">
<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/2.jpg" alt="">
<img class="test" src="http://hovertree.com/texiao/jqimg/2/photo/3.jpg" alt="">
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jqimg/2/js/jquey-bigic.js"></script>
<script type="text/javascript">
$(function(){
$('#hovertreephoto img').bigic();
});
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved