{"id":3533,"date":"2014-05-13T00:54:24","date_gmt":"2014-05-13T00:54:24","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=3533"},"modified":"2017-03-17T14:34:19","modified_gmt":"2017-03-17T14:34:19","slug":"simplyscroll-jquery-plugin-tao-content-scroller-da-dang","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/simplyscroll-jquery-plugin-tao-content-scroller-da-dang\/","title":{"rendered":"[SimplyScroll] jQuery Plugin t\u1ea1o content scroller \u0111a d\u1ea1ng"},"content":{"rendered":"

SimplyScroll l\u00e0 m\u1ed9t plugin r\u1ea5t linh ho\u1ea1t trong vi\u1ec7c t\u1ea1o hi\u1ec7u \u1ee9ng cu\u1ed9n (scroll) n\u1ed9i dung. V\u1edbi plugin n\u00e0y, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 cu\u1ed9n n\u1ed9i dung theo chi\u1ec1u ngang, chi\u1ec1u d\u1ecdc, cu\u1ed9n v\u1ec1 b\u00ean tr\u00e1i hay b\u00ean ph\u1ea3i, c\u00f3 th\u1ec3 cho n\u00f3 t\u1ef1 \u0111\u1ed9ng ch\u1ea1y ho\u1eb7c \u0111i\u1ec1u khi\u1ec3n b\u1eb1ng c\u00e1c n\u00fat b\u1ea5m…
\n
\nV\u1edbi plugin n\u00e0y c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng \u0111\u1ec3 t\u1ea1o c\u00e1c ch\u1ee9c n\u0103ng cho web nh\u01b0 li\u1ec7t k\u00ea danh s\u00e1ch c\u00e1c kh\u00e1ch h\u00e0ng ti\u00eau bi\u1ec3u (d\u1ef1a v\u00e0o logo c\u1ee7a h\u1ecd), ho\u1eb7c li\u1ec7t k\u00ea s\u1ea3n ph\u1ea9m b\u00e1n ch\u1ea1y…<\/p>\n

HTML<\/h2>\n

\u0110\u1ec3 t\u1ea1o n\u1ed9i dung cu\u1ed9n, tr\u01b0\u1edbc h\u1ebft ch\u00fang ta c\u1ea7n c\u00f3 n\u1ed9i dung c\u1ea7n \u0111\u1ecbnh d\u1ea1ng nh\u01b0 sau:<\/p>\n

\r\n\r\n\r\n<ul>\r\n<ul>\r\n    <li><img alt="" src="image1.jpg" width="290" height="200" \/><\/li>\r\n    <li><img alt="" src="image2.jpg" width="290" height="200" \/><\/li>\r\n    <li><img alt="" src="image3.jpg" width="290" height="200" \/><\/li>\r\n<\/ul>\r\n<\/ul>\r\n\r\n<ul id="scroller">...<\/ul>\r\n\r\n<\/pre>\n
JAVASCRIPT<\/h2>\n
K\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd ch\u00e8n th\u01b0 vi\u1ec7n jQuery v\u00e0 plugin simplyScroll v\u00e0o, \u0111\u1ed3ng th\u1eddi k\u00edch ho\u1ea1t hi\u1ec7u \u1ee9ng.<\/p>\n
\r\n\r\n<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6\/jquery.min.js">\/\/ <![CDATA[\r\n \/\/ ]]><\/script>\r\n\r\n<script type="text\/javascript" src="jquery.simplyscroll.js"><\/script><script type="text\/javascript">\r\n\r\n\/\/ <![CDATA[\r\n(function($) {\r\n    $(function() { \/\/on DOM ready\r\n            $("#scroller").simplyScroll();\r\n    });\r\n })(jQuery);\r\n\/\/ ]]>\r\n\r\n<\/script>\r\n\r\n<\/pre>\n
CSS<\/h2>\n
Ch\u00fang ta s\u1ebd c\u1ea7n \u0111\u1ecbnh d\u1ea1ng c\u01a1 b\u1ea3n cho hi\u1ec7u \u1ee9ng, t\u1ea1i \u0111\u00e2y c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 \u1ea5n \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc chi\u1ec1u ngang hay chi\u1ec1u d\u1ecdc c\u0169ng nh\u01b0 \u0111\u1ed9 cao c\u1ee7a n\u1ed9i dung c\u1ea7n cu\u1ed9n (scroll).<\/p>\n
\r\n\r\n\/* Container DIV - automatically generated *\/\r\n.simply-scroll-container {\r\n    position: relative;\r\n}\r\n \r\n\/* Clip DIV - automatically generated *\/\r\n.simply-scroll-clip {\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n \r\n\/* UL\/OL\/DIV - the element that simplyScroll is inited on\r\nClass name automatically added to element *\/\r\n.simply-scroll-list {\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n}\r\n \r\n.simply-scroll-list li {\r\n    padding: 0;\r\n    margin: 0;\r\n    list-style: none;\r\n}\r\n \r\n.simply-scroll-list li img {\r\n    border: none;\r\n    display: block;\r\n}\r\n \r\n\/* Custom class modifications - adds to \/ overrides above\r\n \r\n.simply-scroll is default base class *\/\r\n \r\n\/* Container DIV *\/\r\n.simply-scroll {\r\n    width: 576px;\r\n    height: 200px;\r\n    margin-bottom: 1em;\r\n}\r\n \r\n\/* Clip DIV *\/\r\n.simply-scroll .simply-scroll-clip {\r\n    width: 576px;\r\n    height: 200px;\r\n}\r\n \r\n\/* Explicitly set height\/width of each list item *\/\r\n.simply-scroll .simply-scroll-list li {\r\n    float: left; \/* Horizontal scroll only *\/\r\n    width: 290px;\r\n    height: 200px;\r\n}\r\n\r\n<\/pre>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDefault<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
customClass<\/td>\n\u2018simply-scroll\u2019<\/td>\nT\u00ean class c\u1ea7n \u0111\u1ecbnh d\u1ea1ng<\/td>\n<\/tr>\n
frameRate<\/td>\n24<\/td>\nS\u1ed1 frame tr\u00ean gi\u00e2y<\/td>\n<\/tr>\n
speed<\/td>\n1<\/td>\nS\u1ed1 l\u01b0\u1ee3ng pixel di chuy\u1ec3n tr\u00ean 1 frame<\/td>\n<\/tr>\n
orientation<\/td>\n\u2018horizontal\u2019<\/td>\nN\u1ebfu mu\u1ed1n cu\u1ed9n chi\u1ec1u ngang th\u00ec \u0111\u1eb7t \u2018horizontal\u2019 c\u00f2n chi\u1ec1u d\u1ecdc th\u00ec \u0111\u1eb7t \u2018vertical\u2019<\/td>\n<\/tr>\n
direction<\/td>\n\u2018forwards\u2019<\/td>\n\u2018forwards\u2019 ho\u1eb7c \u2018backwards\u2019<\/td>\n<\/tr>\n
auto<\/td>\ntrue<\/td>\nT\u1ef1 \u0111\u1ed9ng cu\u1ed9n, n\u1ebfu mu\u1ed1n t\u1eaft th\u00ec \u0111\u1eb7t gi\u00e1 tr\u1ecb l\u00e0 false<\/td>\n<\/tr>\n
autoMode<\/td>\n\u2018loop\u2019<\/td>\nauto = false, \u2018loop\u2019 or \u2018end\u2019 (end-to-end)<\/td>\n<\/tr>\n
manualMode<\/td>\n\u2018end\u2019<\/td>\nauto = false, \u2018loop\u2019 or \u2018end\u2019 (end-to-end)<\/td>\n<\/tr>\n
pauseOnHover<\/td>\ntrue<\/td>\nD\u1eebng l\u1ea1i khi r\u00ea chu\u1ed9t v\u00e0o , thay \u0111\u1ed5i gi\u00e1 tr\u1ecb false th\u00ec ng\u01b0\u1ee3c l\u1ea1i<\/td>\n<\/tr>\n
pauseOnTouch<\/td>\ntrue<\/td>\nH\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng Touch<\/td>\n<\/tr>\n
pauseButton<\/td>\nfalse<\/td>\nT\u1ea1o n\u00fat d\u1eebng (pause)<\/td>\n<\/tr>\n
startOnLoad<\/td>\nfalse<\/td>\nKh\u1edfi t\u1ea1o plugin khi window load<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ngu\u1ed3n: http:\/\/logicbox.net\/jquery\/simplyscroll\/<\/p>\n","protected":false},"excerpt":{"rendered":"
SimplyScroll l\u00e0 m\u1ed9t plugin r\u1ea5t linh ho\u1ea1t trong vi\u1ec7c t\u1ea1o hi\u1ec7u \u1ee9ng cu\u1ed9n (scroll) n\u1ed9i dung. V\u1edbi plugin n\u00e0y, c\u00e1c […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[],"class_list":["post-3533","post","type-post","status-publish","format-standard","hentry","category-thu-thuat-jquery"],"views":424,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=3533"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3533\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=3533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=3533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=3533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}