CODE PROGRAMMING: javascript

Hiển thị các bài đăng có nhãn javascript. Hiển thị tất cả bài đăng

Thứ Bảy, 25 tháng 4, 2015

Sử dụng skrollr.js tạo hiệu ứng parallax scrolling

Đây là thư viện rất tuyệt vời để tạo hiệu ứng này vì chúng không yêu cầu phải biết javascript , kinh nhỉ .Đầu tiên là lí thuyết đầy đủ các bạn tham khảo tại đây nha:
https://github.com/Prinzhorn/skrollr

push framgia

Tiếp theo là example:
File index.html:
<html>
<head>
<title>Test Parallax</title>

<link rel="stylesheet" type="text/css" href="css/me.css">

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/skrollr.js"></script>
</head>
<body>

<section id="slide-1" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
>
<div class="hsContainer">
<div class="hsContent"
data-center="bottom: 200px; opacity: 1"
data-top="bottom: 1200px; opacity: 0"
data-anchor-target="#slide-1 h2"
>
<h2>Simple parallax scrolling is...</h2>
</div>
</div>
</div>
</section>
<section id="slide-2" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
>
<div class="hsContainer">
<div class="hsContent"
data-center="opacity: 1"
data-center-top="opacity: 0"
data--100-bottom="opacity: 0;"
data-anchor-target="#slide-2"
>
<h2>great for story telling websites.</h2>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-3"
>
<div class="hsContainer">
<div class="hsContent"
data--50-bottom="opacity: 0;"
data--200-bottom="opacity: 1;"
data-center="opacity: 1"
data-200-top="opacity: 0"
data-anchor-target="#slide-3 h2"
>
<h2>Now go and create your own story</h2>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-4"
>
<div class="hsContainer">
<div class="hsContent"
data-bottom-top="opacity: 0"
data-25p-top="opacity: 0"
data-top="opacity: 1"
data-anchor-target="#slide-4"
>
<h2>and share mine.</h2>
</div>
</div>
</div>
</section>
<div id="skrollr">
<div id="footne" class="gap">
<div class="container">
<div class="inner-container">
<p>Hello word</p>
</div>
</div>
</div>
<div id="foolne1" class="gap">
<div class="container">
<div class="inner-container">
<p>the gioi mo ra nhe</p>
</div>
</div>
</div>
</div>

<script type="text/javascript">
skrollr.init({
smoothScrolling: false,
mobileDeceleration: 0.004
});
</script>
</body>
</html>
File me.css:

Thứ Tư, 15 tháng 1, 2014

Isolate scope trong directive argular js

Cái này lúc đầu rất khó hiểu,có thể giải thích đơn giản như sau:

<!doctype html>
<html ng-app="docsIsolateScopeDirective">
<head>
<script src="http://code.angularjs.org/1.2.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<my-customer info="naomi"></my-customer>
<hr>
<my-customer info="igor"></my-customer>
</div>
</body>
</html>

Bắt đầu tag của directive chúng ta cần khai báo các biến mà ta muốn truyền từ parent scope xuống child scope, info = "naomi" tức là ta muốn biến naomi của parent scope được truyền xuống children scope theo ba cách.

Cách 1:

{

scope:{

hear:"@info"

}

Ta muốn biến naomi mà thuộc tính info tham chiêu tới sẽ được truyền từ biến naomi của scope parent xuống scope child thông qua biến hear, như vậy trong template của directive ta chỉ cần ghi {{hear}} thì biến hear trong children scope sẽ cập nhật giá trị của biến naomi của scope parent

Cách 2:

{

scope:{

hear:"=info"

}

Cách này cũng giống như trên nhưng chúng ta muốn biến hear và naomi phải cùng tham chiếu tới nhau(2 two way binding) tức là cái này thay đổi thì cái kia cũng thay đổi.

Cách 3:

<my-component attribute-foo="{{foo}}" binding-foo="foo"

isolated-expression-foo="updateFoo(newFoo)" >

<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>

.directive('myComponent', function () {
return {
scope:{
isolatedExpressionFoo:'&'
}
};
}).controller('MyCtrl', ['$scope', function ($scope) {
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);

Cách này được áp dụng khi chúng ta muốn từ child scope ,chúng ta có thể sử dụng một biểu thức hoặc một hàm của scope parent.

Như trên chúng ta cần khai báo :

isolated-expression-foo="updateFoo(newFoo)",
isolated-expression-foo là một định danh để chúng ta khai báo rằng biến isolatedFoo sẽ được truyền tới newFoo nằm trong hàm updateFoo(newFoo) như khai báo ban đầu,để từ đây chúng ta có thể thực thi hàm updateFoo từ scope parent trong controller ,qua đó cập nhật tất cả các biến foo trong parent scope.

Thứ Hai, 11 tháng 3, 2013

Hàm apply() ,call() ,bind() và thuộc tính arguments,length,caller trong javascript

Đây là những hàm cũng ít người quan tâm tới ,tuy nhiên nếu nghiên cứu sâu nó sẽ giúp ích rất nhiều cho bạn đó:
Hàm call() dùng để gọi một method trong một object và các object thay thế cho object hiện hành ,với các tham số thông qua .
Cú pháp :
call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj: Object được dùng như object hiện hành.Nếu để trống nó sẽ lấy Object global thay thế.
arg các tham số thông qua.

Một ví dụ dễ hiều :

Kết quả là đầu tiên nó sẽ đưa alert(10) bởi vì đối tượng thí trong function f() sẽ trỏ đối tượng global,lúc này x=10 sẽ được gọi ,sau đó sẽ alert(15) vì ta đã khởi động hàm f() với object o lúc này this sẽ trỏ tới o nên this.x=15.

_ Hàm apply()chức năng giống như hàm call() ,khác biệt là apply() yêu cầu tham số thứ hai phải là một mảng .
Một ví dụ dễ hiểu nhất:

Như bạn thấy đầu tiên nó sẽ gọi hàm g và thông qua các giá trị object,func,args.func lúc này sẽ là f1,giá trị thông qua sẽ là một mảng có 1 phần tử ["the value of x = "].Lúc này hàm f1 sẽ đựơc gọi thông qua apply() .Vì ta có thông qua o={x:15} là object nên tới function f1 ,this.x đươc hiểu như là object của o ,kết quả là :the value of x =15
Cũng tương tự vậy,chỉ khác là cách gọi thứ 2 thông qua mảng 2 phần tử,vậy f2 cần có 2 biến.Giá trị trả lại sẽ là: the value of x squared = 255 Wow!.
Hàm apply() trông có vẻ hiêu quả hơn trong nhiều trường hợp.

_Thuộc tính arguments dùng lấy tham số của object function thực thi nó :
Ví dụ:

Nó chỉ alert(H) vì hàm chỉ thông qua 1 tham số,nên nó sẽ lấy arguments[0]lúc này là H.
Tiếp theo:

Lúc này nó sẽ in ra Hello ,vì lúc đó mình nạo vét hết toàn bộ tham số đầu vào để nối chúng lại.

Thuộc tính length để xác định sô lương tham số thông qua một hàm :
Ví dụ:

Nó sẽ ra : Expected Arguments: 2
Passed Arguments: 2

Hàm bind() dùng để tạo hàm ràng buộc ,sao chép lại thân của hàm được gán.
Cú pháp:

function: là hàm cần sao chép.
thisArg là object sẽ gán tới this cho hàm sao chép .
arg : các tham số thông qua.
Ví dụ:

Kết quả là true.

Thuộc tính caller dùng để lấy tên hàm nào đã khởi động hàm này.
Ví dụ:

Nó sẽ in ra function writesub() { write(); } tức là sẽ in ra toàn bộ function đã khởi động nó.
Nếu caller đựơc đặt trong function hoạt động độc lập ,ko có hàm nào goi nó,thì nó đang ở top level of a JavaScript program ,caller lúc này sẽ trả lại null.
Ví dụ:

Nó sẽ in ra:CallLevel was called from the top level.