|
Xin chia sẻ với các bạn hiệu ứng Jquery popup div - Jquery popup div on hover hay, ứng dụng rất nhiều trong thiết kế website.
Các bạn tạo một file index.html sau đó copy toàn bộ đoạn code sau vào rồi mở bằng trình duyệt sẽ thấy hiệu ứng:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery popup div - Jquery popup div on hover</title>
<meta content="Jquery popup div,Jquery popup" name="keywords">
<meta content="Hiệu ứng popup thẻ DIV khi hover. Jquery popup div - Jquery popup div on hover" name="description">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div#container {
border: 1px solid #1A1A1A;
margin: 30px auto 0;
padding: 20px;
width: 700px;
}
/* HOVER STYLES */
div.sieuthiwebsitedep_popup_images {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
.clear{clear:both;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.intro{}
.seowebchuyennghiep_product{}
.seowebchuyennghiep_product1{float: left;width: 330px;}
</style>
<script type="text/javascript" src="http://sieuthiwebsitedep.com/templates/nicewebmarket/js/jquery.js"></script>
<script type="text/javascript">
function sieuthiwebsitedepPopupImages(id){
var moveLeft = 120;
var moveDown = 20;
//$('a#'+id).hover(function(e) {
$('div#sieuthiwebsitedep_popup_'+id).show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
//}, function() {
//$('div#sieuthiwebsitedep_popup_'+id).hide();
//});
$('a#'+id).mousemove(function(e) {
$("div#sieuthiwebsitedep_popup_"+id).css('top', e.pageY + moveDown).css('left', e.pageX - moveLeft);
});
}
function sieuthiwebsitedepHideImages(id){
$('div#sieuthiwebsitedep_popup_'+id).hide();
}
</script>
</head>
<body>
<div id="container">
<h1>Jquery popup div - Jquery popup div on hover</h1>
<p>
Hover vào Images để xem hiệu ứng POPUP thẻ DIV
</p>
<div>
<div>
<h3><a href="http://sieuthiwebsitedep.com" title="Công ty thiết kế web chuẩn SEO">Công ty thiết kế web chuẩn SEO</a></h3>
<div>
<a id="sieuthiwebsitedep_produc1" onmouseover="sieuthiwebsitedepPopupImages(this.id)" onmouseout="sieuthiwebsitedepHideImages(this.id)" href="/" title="Công ty thiết kế web chuẩn SEO"><img alt="Thiết kế web chuẩn SEO" src="http://sieuthiwebsitedep.com/images/seo_images_services/seo.gif" width="200" /></a>
<p>Công ty thiết kế web chuẩn SEO Ngọc Gia Phong chào mừng quý khách đến với dịch vụ Thiết kế website chuyên nghiệp, chất lượng, chuẩn SEO hàng đầu Việt Nam.</p>
</div>
</div>
<div style="border-left:1px dotted #999;padding-left:10px;margin-left:10px;">
<h3><a href="http://www.seowebchuyennghiep.com/Thiet-ke-website/thiet-ke-website-gia-re-tai-ha-noi.html" title="Thiết kế website giá rẻ tại hà nội">Thiết kế website giá rẻ tại hà nội</a></h3>
<p>
<a id="sieuthiwebsitedep_produc2" onmouseover="sieuthiwebsitedepPopupImages(this.id)" onmouseout="sieuthiwebsitedepHideImages(this.id)" href="/" title="Thiết kế website giá rẻ"><img alt="Thiết kế website giá rẻ" src="http://sieuthiwebsitedep.com/images/seo_images_kienthucwebsite/W3C.jpg" width="200" /></a>
</p>
<p>Công ty thiết kế website uy tín NGỌC GIA PHONG chuyên thiết kế website giá rẻ trọn gói chỉ với 2.5 triệu đã bao gồm Domain và Hosting, bạn đã sở hữu một website được thiết kế chuyên nghiệp, thân thiện google, thiết kế chuẩn SEO, hỗ trợ tạo link thân thiện, tạo thẻ Title và Meta Description..</p>
</div>
<div></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div style="display: none; top: 256px; left: 324px;" id="sieuthiwebsitedep_popup_sieuthiwebsitedep_produc1">
<h3><a href="http://sieuthiwebsitedep.com" title="Công ty thiết kế web chuẩn SEO">Công ty thiết kế web chuẩn SEO</a></h3>
<div>
<img alt="Thiết kế web chuẩn SEO" src="http://sieuthiwebsitedep.com/images/seo_images_services/seo.gif" width="200">
<p>Công ty thiết kế web chuẩn SEO Ngọc Gia Phong chào mừng quý khách đến với dịch vụ Thiết kế website chuyên nghiệp, chất lượng, chuẩn SEO hàng đầu Việt Nam.</p>
</div>
</div>
<div style="display: none; top: 359px; left: 568px;" id="sieuthiwebsitedep_popup_sieuthiwebsitedep_produc2">
<h3><a href="http://www.seowebchuyennghiep.com/Thiet-ke-website/thiet-ke-website-gia-re-tai-ha-noi.html" title="Thiết kế website giá rẻ tại hà nội">Thiết kế website giá rẻ tại hà nội</a></h3>
<p>
<img alt="Thiết kế website giá rẻ" src="http://sieuthiwebsitedep.com/images/seo_images_kienthucwebsite/W3C.jpg" width="200">
</p>
<p>Công ty thiết kế website uy tín NGỌC GIA PHONG chuyên thiết kế website giá rẻ trọn gói chỉ với 2.5 triệu đã bao gồm Domain và Hosting, bạn đã sở hữu một website được thiết kế chuyên nghiệp, thân thiện google, thiết kế chuẩn SEO, hỗ trợ tạo link thân thiện, tạo thẻ Title và Meta Description..</p>
</div>
</div>
</body>
</html> |
Học Photoshop
