http://www.javascriptbank.com/rss/image/rotation/ JavaScript mới nhất: Chuyển ảnh vi Copyright (C) JavaScriptBank.com 60 [email protected] RSS <img src="http://www.javascriptbank.com/javascript.images/image/javascript-image-rotation-script-canvas-html5.jpg" width="100" height="100" align="left" style="margin: 5px;" />Xoay ảnh với JavaScript không phải loại hiệu mới trên jsB@nk bởi chúng đã từng được giới thiệu thông qua rất đoạn mã JavaScript như: - <a href="http://www.javascriptbank.com/image-rotation-without-images.html">Quay một đối tượng mà không cần ảnh</a> - <a href="http://www.javascriptbank.com/worldmap-with-rotating-resize-animation.html">Thế giới quay</a> - <a href="http://www.javascriptbank.com/rotating-gifs-and-jpgs.html">Ảnh quay</a> Tuy nhiên để bắt kịp với xu hướng của bạn bè trên khắp thế giới, jsB@nk muốn giới thiệu với bạn thêm một hiệu ứng JavaScript xoay ảnh nữa, nhưng được xây dựng trên nền HTML5 với tập lệnh canvas. Đoạn mã JavaScript xoay ảnh này khá đơn giản để bạn có thể nắm bắt cách thức sử dụng thư viện canvas trong HTML5 với các phương thức như: setAttribute, getContext, drawImage và rotate. http://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html 1303714962 <img src="http://www.javascriptbank.com/javascript.images/image/simple-swap.jpg" width="100" height="100" align="left" style="margin: 5px;" />Một <a href="/javascript/">đoạn mã JavaScript</a> khác dùng để đổi ảnh khi người dùng rê <a href="/javascript/mouse/">con trỏ chuột</a> đến. Trong <a href="/javascript/">hiệu ứng JavaScript</a> này, thay vì dùng cách thông thường, <a href="/javascript/">đoạn mã JavaScript</a> thiết lập thuộc tính mới <code>oversrc</code> chứa đường dẫn ảnh cần đổi. http://www.javascriptbank.com/simple-swap.html 1170117175 <img src="http://www.javascriptbank.com/javascript.images/image/rotating-image-script.jpg" width="100" height="100" align="left" style="margin: 5px;" />Một <a href="/javascript/"><a href="/javascript/">đoạn mã JavaScript</a> JavaScript</a> khác để chúng ta có thể đổi ảnh liên tục trong khoảng <a href="/javascript/time/"><a href="/javascript/time/">thời gian</a></a> nào đó. http://www.javascriptbank.com/rotating-image-script.html 1170117174 <img src="http://www.javascriptbank.com/javascript.images/image/image-using-fade-filter.jpg" width="100" height="100" align="left" style="margin: 5px;" />Đoạn mã này dùng bộ lọc mờ dần của IE để tạo hiệu ứng trình diễn ảnh trên trang web. Bạn cần có IE5.5+ để thấy được hiệu ứng chuyển cảnh, mặc dù chức năng đổi ảnh làm việc trong tất cả trình duyệt. http://www.javascriptbank.com/image-using-fade-filter.html 1170116128 <img src="http://www.javascriptbank.com/javascript.images/image/banner-ad-rotator.jpg" width="100" height="100" align="left" style="margin: 5px;" /><a href="/javascript/">Hiệu ứng JavaScript</a> này sẽ <a href="/javascript/utility/converter/">chuyển đổi</a> ảnh sau một khoảng <a href="/javascript/time/">thời gian</a> xác định. Bạn có thể áp dụng <a href="/javascript/">hiệu ứng JavaScript</a> này với nhiều <a href="/javascript/image/">hình ảnh</a> và <a href="/javascript/link/">liên kết</a> như bạn muốn. http://www.javascriptbank.com/banner-ad-rotator.html 1170116119 <img src="http://www.javascriptbank.com/javascript.images/image/dom-image-rollover-ii.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiệu ứng tạo ra ba trạng thái ảnh trên trang web: ảnh lúc bình thường, khi người dùng rê chuột đến và khi được nhấn. http://www.javascriptbank.com/dom-image-rollover-ii.html 1170116114 <img src="http://www.javascriptbank.com/javascript.images/image/crossbrowser-fade-in-fade-out-for-web-images.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiệu ứng trình bày ảnh theo nguyên tắc hiển thị từng điểm ảnh theo hai chiều từ trái sang phải và ngược lại. http://www.javascriptbank.com/crossbrowser-fade-in-fade-out-for-web-images.html 1170115987 <img src="http://www.javascriptbank.com/javascript.images/image/stunning-3d-animation.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiệu ứng tạo một <a href="/javascript/image/slideshow/">trình diễn ảnh</a> ba chiều qua một hình cầu, hai mặt của quả cầu sẽ lần lượt đổi các ảnh khác nhau. http://www.javascriptbank.com/stunning-3d-animation.html 1170115972 <img src="http://www.javascriptbank.com/javascript.images/image/double-fading-image-scroller-2-03.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiệu ứng tạo một <a href="/javascript/image/slideshow/">trình diễn ảnh</a> theo chiều từ phải sang trái với hai đầu bị làm mờ dần, khi ta rê <a href="/javascript/mouse/">con trỏ chuột</a> đến thì ảnh ngừng <a href="/vi+title=di chuyển">di chuyển</a>. http://www.javascriptbank.com/double-fading-image-scroller-2-03.html 1170115971 <img src="http://www.javascriptbank.com/javascript.images/image/dhtml-fading-animation-image.jpg" width="100" height="100" align="left" style="margin: 5px;" />Đoạn mã JavaScript tạo một <a href="/javascript/image/image-viewer/">trình chuyển ảnh</a> theo nguyên tắc các ảnh xuất hiện và biến mất với hiệu ứng mờ dần. Một hiệu ứng rất tuyệt và được rất nhiều trang web sử dụng hiện nay. http://www.javascriptbank.com/dhtml-fading-animation-image.html 1170115969