phongjalvn
28-05-2008, 10:55
Thời gian vừa qua JaL busy, nên bây giờ mới bắt đầu viết tut lại được.
Chúng ta sẽ bắt đầu với 1 bài tut nhỏ
Vấn đề: Khi JaL thiết kế một số trang web, những hình ảnh quảng cáo đòi hỏi có những border phức tạp chỉ làm được bằng images ( Xem ví dụ ). Vì sao phải dùng images ? Vì nếu build bằng CSS sẽ rất khó và cấu trúc HTML khá rườm rà.
Nhưng sau đó lại phát sinh 1 số vấn đề : Nếu khách hàng hoàn toàn không biết PTS hoặc bất cứ trình images editor nào, nhưng họ lại muốn có được những effect như vậy trên hình ảnh quảng cáo của họ.
Sau khi tham khảo 1 số kiến thức, JaL quyết định sử dụng jQuery và CSS để tạo lại vùng border này.
Để bắt đầu, bạn có thể download file resource tại đây (http://www.jt-vn.com/transparent%20box.rar) hoặc xem thử tại đây (http://www.jt-vn.com/transparent%20box/)
Đầu tiên ta bắt tay vào build CSS và HTML để test:
Ta có cấu trúc HTML như sau: (JaL để trực tiếp 1 số width và height, vì width và heigth thực tế sẽ được tính toán lại)
<div class="transbox test" style="width: 1000px; height: 1000px">
<img class="trans" title="Test 1" src="images/test.jpg" />
<div class="transbox-topleft" style="width: 975px"/>
<div class="transbox-topright" style="height: 975px"/>
<div class="transbox-bottomleft" style="height: 975px"/>
<div class="transbox-bottomright" style="width: 975px"/>
</div>
Và CSS như sau :
.transbox{
position:relative;
/*For test*/
background:top left no-repeat;
}
.transbox-topleft{
position:absolute;
top:0;
left:0;
background:url(../images/boxbg.png) top left no-repeat;
height:25px;
}
.transbox-topright{
position:absolute;
top:0;
right:0;
background:url(../images/boxbg.png) top right no-repeat;
width:25px;
}
.transbox-bottomleft{
position:absolute;
bottom:0;
left:0;
background:url(../images/boxbg.png) bottom left no-repeat;
width:25px;
}
.transbox-bottomright{
position:absolute;
bottom:0;
right:0;
background:url(../images/boxbg.png) bottom right no-repeat;
height:25px;
}
Về lý thuyết ta sẽ sử dụng 4 div absolute để đè lên tấm hình, tạo border cho hình.
Ta bắt tay vào viết javascript để tự động thêm 4 div này vào cho hình:
Ta viết luôn thành 1 plugins cho jQuery để tiện sử dụng lần sau
Khai báo các options sẽ sử dụng
jQuery.transBox = function(options){
options = jQuery.extend({
data: null,
title: false,
addclass: null
}, options);
})
Tiếp theo, ta sẽ lấy chiều cao, rộng của hình và tính toán các giá trị cần thiết
if (options.data) { //Check xem người dùng có khai báo dữ liệu cần thiết không
$(options.data).load(function(){ //Khi hình đã load xong thì bắt đầu
$(this).wrap('<div class="transbox"></div>')//Wrap tấm hình bằng cái div lớn có class transbox
var box = $(this).parent('.transbox')//Gán div vừa tạo vào biến box
/*Bắt đầu lấy chiều cao, rộng, và tính toán kích thước của 4 div dùng để tạo khung viền*/
var tHeight = $(this).height()
var taHeight = tHeight - 25
var tWidth = $(this).width()
var taWidth = tWidth - 25
var tTitle = $(this).attr('title')
})
})
Tiếp theo, ta thêm các div dùng để tạo khung viền và gán width, height cần thiết vào:
box.append('<div class="transbox-topleft"/><div class="transbox-topright"/><div class="transbox-bottomleft"/><div class="transbox-bottomright"/>')
var tTLeft = box.children('.transbox-topleft')
var tTRight = box.children('.transbox-topright')
var tBLeft = box.children('.transbox-bottomleft')
var tBRight = box.children('.transbox-bottomright')
box.width(tWidth)
box.height(tHeight)
box.addClass(options.addclass)
tTLeft.width(taWidth)
tTRight.height(taHeight)
tBLeft.height(taHeight)
tBRight.width(taWidth)
Cuối cùng ta thêm title cho tấm hình:
if (tTitle && options.title) {
var tTitles
box.hover(function(e){
box.after('<span class="transbox-title"></span>')
tTitles = box.next('.transbox-title')
tTitles.text(tTitle)
tTitles.css("top", (e.pageY + 10) + "px").css("left", (e.pageX + 10) + "px").fadeTo("fast", 0.7);
}, function(e){
tTitles.remove()
})
box.mousemove(function(e){
tTitles.css("top", (e.pageY + 10) + "px").css("left", (e.pageX + 10) + "px");
})
}
Vậy là ta đã hoàn thành, việc còn lại là gọi ra, ta có HTML như sau:
<!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>Untitled Document</title>
<link href="css/main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js">
</script>
<script type="text/javascript" src="js/jquery.transbox.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.transBox({
data : ‘img.trans’,
bg: false,
title : true,
addclass : ‘test’
})
});
</script>
<style>
.test{
margin:30px;
}
</style>
</head>
<body>
<img src="images/test.jpg" class="trans" title="Test 1" />
<img src="images/1.jpg" class="trans" title="Test 2" />
<img src="images/2.jpg" class="trans" title="Test 3" />
<img src="images/3.jpg" class="trans" title="Test 4" />
<img src="images/4.jpg" class="trans" title="Test 5" />
<img src="images/5.jpg" class="trans" title="Test 6" />
</body>
</html>
Chúc bạn thành công
Bài viết từ http://www.jt-vn.com/blog/
P/S đã fix 1 số bug.
Chúng ta sẽ bắt đầu với 1 bài tut nhỏ
Vấn đề: Khi JaL thiết kế một số trang web, những hình ảnh quảng cáo đòi hỏi có những border phức tạp chỉ làm được bằng images ( Xem ví dụ ). Vì sao phải dùng images ? Vì nếu build bằng CSS sẽ rất khó và cấu trúc HTML khá rườm rà.
Nhưng sau đó lại phát sinh 1 số vấn đề : Nếu khách hàng hoàn toàn không biết PTS hoặc bất cứ trình images editor nào, nhưng họ lại muốn có được những effect như vậy trên hình ảnh quảng cáo của họ.
Sau khi tham khảo 1 số kiến thức, JaL quyết định sử dụng jQuery và CSS để tạo lại vùng border này.
Để bắt đầu, bạn có thể download file resource tại đây (http://www.jt-vn.com/transparent%20box.rar) hoặc xem thử tại đây (http://www.jt-vn.com/transparent%20box/)
Đầu tiên ta bắt tay vào build CSS và HTML để test:
Ta có cấu trúc HTML như sau: (JaL để trực tiếp 1 số width và height, vì width và heigth thực tế sẽ được tính toán lại)
<div class="transbox test" style="width: 1000px; height: 1000px">
<img class="trans" title="Test 1" src="images/test.jpg" />
<div class="transbox-topleft" style="width: 975px"/>
<div class="transbox-topright" style="height: 975px"/>
<div class="transbox-bottomleft" style="height: 975px"/>
<div class="transbox-bottomright" style="width: 975px"/>
</div>
Và CSS như sau :
.transbox{
position:relative;
/*For test*/
background:top left no-repeat;
}
.transbox-topleft{
position:absolute;
top:0;
left:0;
background:url(../images/boxbg.png) top left no-repeat;
height:25px;
}
.transbox-topright{
position:absolute;
top:0;
right:0;
background:url(../images/boxbg.png) top right no-repeat;
width:25px;
}
.transbox-bottomleft{
position:absolute;
bottom:0;
left:0;
background:url(../images/boxbg.png) bottom left no-repeat;
width:25px;
}
.transbox-bottomright{
position:absolute;
bottom:0;
right:0;
background:url(../images/boxbg.png) bottom right no-repeat;
height:25px;
}
Về lý thuyết ta sẽ sử dụng 4 div absolute để đè lên tấm hình, tạo border cho hình.
Ta bắt tay vào viết javascript để tự động thêm 4 div này vào cho hình:
Ta viết luôn thành 1 plugins cho jQuery để tiện sử dụng lần sau
Khai báo các options sẽ sử dụng
jQuery.transBox = function(options){
options = jQuery.extend({
data: null,
title: false,
addclass: null
}, options);
})
Tiếp theo, ta sẽ lấy chiều cao, rộng của hình và tính toán các giá trị cần thiết
if (options.data) { //Check xem người dùng có khai báo dữ liệu cần thiết không
$(options.data).load(function(){ //Khi hình đã load xong thì bắt đầu
$(this).wrap('<div class="transbox"></div>')//Wrap tấm hình bằng cái div lớn có class transbox
var box = $(this).parent('.transbox')//Gán div vừa tạo vào biến box
/*Bắt đầu lấy chiều cao, rộng, và tính toán kích thước của 4 div dùng để tạo khung viền*/
var tHeight = $(this).height()
var taHeight = tHeight - 25
var tWidth = $(this).width()
var taWidth = tWidth - 25
var tTitle = $(this).attr('title')
})
})
Tiếp theo, ta thêm các div dùng để tạo khung viền và gán width, height cần thiết vào:
box.append('<div class="transbox-topleft"/><div class="transbox-topright"/><div class="transbox-bottomleft"/><div class="transbox-bottomright"/>')
var tTLeft = box.children('.transbox-topleft')
var tTRight = box.children('.transbox-topright')
var tBLeft = box.children('.transbox-bottomleft')
var tBRight = box.children('.transbox-bottomright')
box.width(tWidth)
box.height(tHeight)
box.addClass(options.addclass)
tTLeft.width(taWidth)
tTRight.height(taHeight)
tBLeft.height(taHeight)
tBRight.width(taWidth)
Cuối cùng ta thêm title cho tấm hình:
if (tTitle && options.title) {
var tTitles
box.hover(function(e){
box.after('<span class="transbox-title"></span>')
tTitles = box.next('.transbox-title')
tTitles.text(tTitle)
tTitles.css("top", (e.pageY + 10) + "px").css("left", (e.pageX + 10) + "px").fadeTo("fast", 0.7);
}, function(e){
tTitles.remove()
})
box.mousemove(function(e){
tTitles.css("top", (e.pageY + 10) + "px").css("left", (e.pageX + 10) + "px");
})
}
Vậy là ta đã hoàn thành, việc còn lại là gọi ra, ta có HTML như sau:
<!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>Untitled Document</title>
<link href="css/main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js">
</script>
<script type="text/javascript" src="js/jquery.transbox.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.transBox({
data : ‘img.trans’,
bg: false,
title : true,
addclass : ‘test’
})
});
</script>
<style>
.test{
margin:30px;
}
</style>
</head>
<body>
<img src="images/test.jpg" class="trans" title="Test 1" />
<img src="images/1.jpg" class="trans" title="Test 2" />
<img src="images/2.jpg" class="trans" title="Test 3" />
<img src="images/3.jpg" class="trans" title="Test 4" />
<img src="images/4.jpg" class="trans" title="Test 5" />
<img src="images/5.jpg" class="trans" title="Test 6" />
</body>
</html>
Chúc bạn thành công
Bài viết từ http://www.jt-vn.com/blog/
P/S đã fix 1 số bug.