WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

pageAnimate Web-Page Slider

— Add-On để WorldWideScripts.net

Đăng ký vào nguồn cấp dữ liệu của chúng tôi để ở lại đến ngày!

Mới! Theo chúng tôi như bạn muốn nó!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



JQuery plugin này là một thanh trượt trang đầy đủ để điều hướng giữa các trang web. Ví dụ, bạn có thể có trang chủ của bạn trên một slide, trang liên hệ ngày khác, và như vậy. Nó được đáp ứng và làm việc trong tất cả các trình duyệt chính, bao gồm Internet Explorer 6 ( : o ) Và các trình duyệt di động.

Như tên cho thấy, bạn có thể đặt bất cứ điều gì bên trong một slide (nội dung jQuery khác, video, và những gì-không), và mỗi slide sẽ di chuyển để xem tràn giống như bất kỳ trang bình thường. Không có gì tôi biết đó sẽ phá vỡ các thanh trượt là, và bạn có thể thêm một số lượng vô hạn của các slide. Điều này là chính xác những gì bạn cần để thêm gia vị cho trang web của bạn!

Mặc dù điều này được thiết kế cho toàn bộ nội dung cửa sổ, bạn có thể chỉ là một cách dễ dàng sử dụng như là một thanh trượt nội dung jQuery truyền thống. Trong thực tế, các pageAnimate có lẽ là tốt hơn so với thanh trượt khác vì nó hoạt động tuyệt đẹp trong Internet Explorer 6!

Lưu ý: Nếu bạn xem preview CodeCanyon trong một trình duyệt di động, vẽ CodeCanyon sẽ không làm việc ở tất cả. Bạn cần phải truy cập http://creativewebsites.me/pageAnimate/preview để xem nó trong hành động.

Version 1.1 CẬP NHẬT

Phiên bản 1.1 đi kèm với hai tính năng mới: khả năng để cung cấp cho mỗi slide một URL duy nhất (với việc sử dụng các hash) và một chức năng tự tiến để các thanh trượt tự động chu kỳ thông qua tất cả các slide liên tục. Cả hai không thể được kích hoạt cùng một lúc (tôi không thể nghĩ ra bất cứ ai mà muốn rằng anyway).

Nếu bạn có phiên bản trước đó được cài đặt và bạn cập nhật lên phiên bản này, hãy chắc chắn rằng bạn hardcode 'dữ liệu slide = "0" "thuộc tính vào các div đó có một lớp.pageAnimate. Như vậy:

 <div class = "pageAnimate" dữ liệu slide = "0"> </ div> 

Ngoài ra, bạn sẽ cần phải thêm các lớp học sau đây cho tất cả các slide gây nên:.pageAnimate_trigger

Điều gì nếu JavaScript bị vô hiệu hóa?

Plugin này chạy chủ yếu trên JavaScript - nhưng những gì nếu JavaScript bị vô hiệu hóa? Là thanh trượt vô dụng (và đó có nghĩa là mọi người chỉ có thể nhìn thấy trang chủ của bạn!). Tất nhiên là không rồi. Bạn có thể thêm một liên kết 'href' dự phòng để gây nên mà đi đến một slide. Vì vậy, khi JavaScript bị vô hiệu hóa, kích hoạt này sẽ không đi đến một slide trong pageAnimate, nhưng chỉ sẽ tiến hành theo cách thông thường đến một trang khác (mà bạn định nghĩa trong 'href').

Liệu các thanh trượt pageAnimate kéo nội dung từ Web khác-trang?

Không, các plugin tự nó không kéo nội dung từ web-trang khác. Mặc dù bạn có thể làm điều đó chỉ với một vài dòng của Ajax hoặc mã PHP, kịch bản chính nó không có chức năng đó và nội dung của từng slide / trang phải được thêm vào bằng tay. Để kéo nội dung từ web server của bạn với Ajax, chỉ cần sử dụng mã này:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Chỉ cần thay đổi #slide_id_or_class "tới CSS id hoặc class của slide pageAnimate mà bạn muốn thêm vào)

Vì vậy, làm thế nào để làm cho trượt đi đến một Slide?

Nó không thể được dễ dàng - chỉ cần thêm đoạn mã này:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> văn bản này sẽ đi trượt 2 </a> 
Thông báo số lượng thêm vào cuối của tên lớp? Đó là số ít định nghĩa những gì slide sẽ được hoạt hình để. Nhưng kể từ khi tất cả mọi thứ trong JavaScript là không dựa trên (chịu với tôi ở đây), chúng ta cần phải trừ đi 1 off số slide. Vì vậy, ví dụ, nếu chúng ta muốn các thanh trượt để đi trượt # 4 khi văn bản được nhấn vào, chúng ta sẽ thêm class này: "pageAnimate_trigger 3". Nếu chúng ta muốn các thanh trượt để đi trượt # 6, chúng ta sẽ thêm class này: "pageAnimate_trigger 5". Như đã đề cập ở trên, bạn có thể thêm một liên kết đến các tag anchor, mà chỉ có thể được theo sau khi JavaScript bị vô hiệu hóa. Vậy có nghĩa là du khách vẫn sẽ có thể xem một trang nhân bản vô tính ở những nơi khác trên trang web của bạn nếu họ đã bị vô hiệu hóa JavaScript.

Tôi có phải thủ thêm một liên kết đến Mỗi slide?

Không phải ở tất cả - các kịch bản hiện tất cả các công việc cho bạn.

Làm thế nào để thực hiện điều này vào một Content Slider bình thường và không phải là một Web-Page trượt?

Easy - tất cả các bạn làm là thay đổi một dòng trong 'Cài đặt' của kịch bản jQuery. Bạn sẽ cần phải có một div (hoặc một thẻ tương tự) như là một container cho thanh trượt pageAnimate. Đơn giản chỉ cần xác định rằng div trong kịch bản.

Có bất kỳ vấn đề hoặc Bugs?

  1. Khi cửa sổ trình duyệt được phóng to hoặc trong IE 8, các slide không tự động thay đổi kích thước để trở thành toàn màn hình. Tôi đã cố gắng cho lứa tuổi để tìm một giải pháp, nhưng không thể. Tuy nhiên, họ DO thay đổi kích thước khi cửa sổ được kéo thực tế nhỏ hơn hoặc lớn hơn. Điều này là duy nhất cho IE 8. Đây không phải là một vấn đề lớn vì sẽ không có quá nhiều người phóng to trong và ngoài trên IE8.
  2. Khi sử dụng jQuery 1.8.1, Firefox bị đóng băng khi nhiều gây được nhấp vào liên tiếp. Hoạt động tốt với jQuery 1.7.2.
  3. Chuyển hướng của thanh trượt hoàn toàn bị phá vỡ khi bạn phóng to trên một điện thoại thông minh. Điều này có thể được cố định bằng cách thêm đoạn mã sau vào phần <head> của tài liệu HTML của bạn:
     <meta name = "viewport" content = "width = device-width; ban đầu quy mô = 1; tối đa-scale = 1"> 
  4. Hình ảnh động của thanh trượt có thể là một chút thay đổi thất thường trên điện thoại thông minh cũ - mặc dù nó không phải là quá xấu.

Tải về
Các thành phần khác trong thể loại nàyTất cả các thành phần của tác giả này
Ý kiếnCâu hỏi thường gặp và câu trả lời

Tài sản

Tạo:
13 Tháng mười một 12

Cập nhật cuối cùng:
18 Tháng năm 13

Độ phân giải cao:
Vâng

Các trình duyệt tương thích:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Bao gồm các tập tin:
JavaScript JS, HTML, CSS

Phiên bản phần mềm:
jQuery

Từ khóa

Thương mại điện tử, Thương mại điện tử, Tất cả mó, n đồ, css, html, javascript, jquery, jquery slider, Trang trượt, pageAnimate, sự đá, nh số trang, trượt hoà, ng gia, thanh trượt