demmo
Bước 1: Chèn đoạn code dưới đây trong phần <head> của trang của bạn:
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
Đoạn mã trên tài liệu tham khảo js bên ngoài, mà bạn có thể tải về tại đây (nhấp chuột phải / chọn "Save As"). crawler.js
Bước 2: Chèn các mẫu sau đây HTML vào trang của bạn, trong đó cho thấy hai trường hợp của vùng xích trên trang. Không sử dụng bất kỳ thẻ - hoặc ngăn chặn các yếu tố mức độ bên trong vùng chọn của bạn:
<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>
<div class="marquee" id="mycrawler2">
<img src="http://img42.imageshack.us/img42/6331/beachgl.jpg" /> <img src="http://img222.imageshack.us/img222/8854/waterox.jpg" /> <img src="http://img405.imageshack.us/img405/7314/cocovv.jpg" /> <img src="http://img853.imageshack.us/img853/5038/bonsaiy.jpg" />
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>
nhập vào marqueeInit ( ). Trong khi có một vô số các tùy chọn cấu hình, các tham số duy nhất đó là yêu cầu các tham số " id " . Dưới đây liệt kê tất cả trong số họ :
| Thông số | Mô tả |
UNIQUEID: 'some_unique_id, | Bắt buộc - id cho thẻ chứa bộ phận của vùng chọn. |
phong cách: {
width ': '100%',
'chiều cao': '1 0,6 em ',
'màu': # fff ',
'background-color: # 32F,
font-family: "sans- serif ',
'lợi nhuận': "0 tự động '
} | Phong cách đối tượng này chứa vùng lựa chọn (sử dụng dấu ngoặc kép trên cả hai mặt của : như được hiển thị) (mặc định là {lề ":" 0 tự động '}, trong đó trung tâm một vùng lựa chọn) Nếu không có chiều rộng được xác định, nó sẽ mặc định 100%, nếu chiều cao không được quy định cụ thể, nó sẽ mặc định offsetHeight của nội dung vùng chọn . Marquee có quy định hoặc mặc định chiều rộng lớn hơn nội dung của họ sẽ được tự động thu nhỏ để tránh các điểm trống. |
Inc: 8, | Tốc độ / tốc độ tối đa tăng điểm ảnh cho mỗi lần lặp của phong trào này của vùng - Nếu vùng chọn chuột: tài sản là "con trỏ điều khiển này là tốc độ hàng đầu. Nếu không, nó là tốc độ của vùng chọn. (Mặc định là 2) |
addDelay: 20, | Các chậm trễ giữa chuyển động lặp đi lặp lại (sự chậm trễ mặc định là 30 phần nghìn giây, số lượng ở đây sẽ được thêm vào mà) |
chuột: "con trỏ điều khiển, | Rê chuột lên các hành vi ('tạm dừng' 'điều khiển con trỏ chuột' hoặc sai). (Mặc định là 'tạm dừng') Sử dụng sai lầm ở đây sẽ làm cho chuột không có hiệu lực trên vùng chọn. |
hướng: 'đúng', | ('Đúng' hoặc 'left') Hướng marquee. (Mặc định là 'left' - dễ nhất để đọc rạp văn bản) |
ngẫu nhiên: sự thật,Mới trong v1.5 | Giá trị Boolean (đúng / sai). Kịch bản nên ngẫu nhiên các yếu tố trong vùng chọn? Nếu thiết lập là true, kịch bản sẽ trộn tất cả trẻ em trước mắt của việc phân chia với UNIQUEID của vùng này . (Mặc định là false). Xem " Lưu ý về tính năng ngẫu nhiên "dưới đây để biết thêm . |
noAddedSpace: true, | Giá trị Boolean (đúng hoặc sai) nên vùng không có thêm một không gian đầu để đảm bảo rằng các yếu tố đầu tiên và cuối cùng hoặc câu không mông lên chống lại nhau? (Mặc định là false (một không gian sẽ được thêm vào) - tối ưu cho vùng chọn văn bản và cho vùng chọn hình ảnh với không gian giữa các hình ảnh) |
noAddedAlt: sự thật,Mới trong v1.5 | Giá trị Boolean (đúng / sai). Nếu vùng chọn không thêm các thuộc tính alt hình ảnh thiếu chúng? (Mặc định là false hình ảnh với các thuộc tính alt trống hoặc mất tích sẽ có họ thêm) Khi điều này được thực hiện, nếu hình ảnh cũng có một tiêu đề trống hoặc mất tích, tiêu đề sẽ được thiết lập để trống để tránh một tooltip như hiệu lực trong một số trình duyệt IE . Nó rất hữu ích để lại điều này như là mặc định (sai) để chẩn đoán hình ảnh bị mất / hỏng. Các kịch bản sẽ cố gắng sử dụng tên tập tin 'Image # x' hình ảnh hoặc nếu tên tập tin là không có. |
dừng lại: true, | (Đúng hoặc sai) vùng lựa chọn có nên bắt đầu trong chế độ dừng lại? Hữu ích cho một số vùng chọn "con trỏ điều khiển '. (Mặc định là false).
|
| | 3 thông số dưới đây chỉ áp dụng trong chuột: con trỏ điều khiển "vùng chọn |
moveatleast: 4, | Tốc độ tối thiểu cho "con trỏ điều khiển" vùng lựa chọn khi chuột của nó. Nếu không quy định và điều này là một 'con trỏ điều khiển "vùng chọn, vùng chọn sẽ dừng lại khi moused. (Mặc định là không có onmouseout chuyển động) |
trung tính: 150, | Kích thước của khu vực trung lập cho con trỏ điều khiển "vùng. Đây là kích thước của khu vực trong trung tâm của vùng, nơi lơ lửng nó sẽ ngăn chặn nó. (Mặc định 16) |
savedirection: true, | (Đúng, sai, hay "đảo ngược") định hướng hành vi của "con trỏ điều khiển" vùng chọn có một tài sản moveatleast khi moused ra. Nhớ hướng ban đầu của nó (đúng), tiếp tục hướng hiện tại (sai), hoặc nó sẽ đảo ngược ('đảo ngược') hướng hiện tại của nó? (Mặc định là false) |
Bất kỳ kiểu dáng vùng chọn của bạn nên được thực hiện thông qua các " tham số phong cách "ở trên. Trong khi tham số này có các cặp giá trị thường xuyên CSS, lưu ý báo giá những gì cần thiết ở cả hai giá trị tài sản CSS và CSS, ví dụ :
phong cách: {
width ': '100%',
'chiều cao': '200px ',
'màu': # fff ',
'background-color: # 32F' //<-- Không có dấu phẩy sau cuối cùng dòng!
}
Như đã đề cập, tất cả các phong cách tùy chọn, mặc dù nếu một vùng chọn của bạn bao gồm một loạt các hình ảnh, nó là tốt nhất mà bạn chỉ định một sở hữu chiều cao rõ ràng cho thấy thoải mái chứa hình ảnh cao nhất trong series của bạn. Đối với vùng chọn văn bản thuần túy chỉ, kịch bản có thể ngay lập tức điều chỉnh chiều cao của vùng lựa chọn tự động dựa trên nội dung văn bản bên trong nó nếu không sở hữu chiều cao quy định rõ ràng.
Đối với HTML mà bạn chèn vào trang của bạn, nó chỉ đơn giản bao gồm một yếu tố Bảo hiểm tiền gửi Việt Nam có chứa các nội dung HTML mà bạn muốn hiển thị bên trong nó, với Bảo hiểm tiền gửi Việt Nam thực hiện một CSS class "vùng" và một thuộc tính duy nhất nhưng tùy ý ID:
<div class="marquee" id="mycrawler">
Crawler nội dung ở đây ...
</ div>
Cho CSS class và ID chỉ được sử dụng bởi kịch bản tạm thời để khởi tạo vùng chọn, và được bỏ đi sau đó (giá trị của họ được) . Điều này có nghĩa rằng trong khi có thể sử dụng chúng trong CSS của bạn với phong cách của vùng chọn cho phép người sử dụng JavaScript không, nó không có mang phong cách của vùng chọn cho người sử dụng thường xuyên. Tất cả các kiểu dáng cho vùng nói chung cần được thực hiện bằng cách sử dụng " phong cách "tham số được đề cập ở trên.
<div class="marquee" id="mycrawler">
<span> Một antidisestablishmentarian jarring inconsolably kéo mà ace bất mãn. </ Span>
<span> Đó là phân biệt đối xử quý tộc hospitably vượt qua những aspersions begrudging. </ Span>
<span> Một bánh mì ngu si đần độn nghĩa đen lắc lư trên các nghệ sĩ khủng khiếp của mình. </ Span>
<span> động vật lấy cảm hứng của chúng tôi kín đáo đuổi măng tây thất vọng. </ Span>
<span> aardvarks đói ably muốn cho mẫu xấu hổ của họ. </ Span>
<span> Những người ủng hộ phấn khởi của cơ thể thì thầm với một cử nhân đáng yêu. </ Span>
<span> Những bongo nóng bất tiện nghiền nát một khối Cappella của họ. </ Span>
<span> Banshee chán ghét incorrigibly cảm ơn một beagle khô. </ Span>
<span> ranh giới ghê tởm cô blurrily tránh con trai mờ của bạn. </ Span>
<span> vay becalming cô brokenly chuyến đi của họ cải bắp appeasing. </ Span>
</ div>
Vì vậy, nếu bạn có một số thẻ img bên trong của một thẻ, và những người khác không, thẻ một sẽ được sử dụng cho những người và các thẻ img cho những hình ảnh mà không cần liên kết. Thẻ Span cũng có thể được sử dụng. Chỉ có các thẻ cấp cao nhất có được xáo trộn, bất cứ điều gì chúng chứa với họ.
Advanced Configuration
Trong khi thể chất mỗi vùng được gán lớp CSS "
vùng ", trong thực tế, sau khi khởi tạo kịch bản tự động thay đổi để"
vùng # ", nơi mà
# là một con số từ 0 đến bất cứ điều gì dựa trên thứ tự trong đó vùng chọn sẽ xuất hiện trên trang. Một số ghi đè lên phong cách hữu ích có thể được thực hiện để mỗi bánh xích trên trang của bạn, vì, như đã nói, mỗi vùng có một tên lớp
của vùng lựa chọn #, biết cấu trúc của vùng chọn một lần khởi tạo cho chúng ta thêm kiểm soát :
<div class="marquee#">
<div>
<div> nội dung </ div>
<div> nội dung </ div>
</ div>
</ div>
Vì vậy, ví dụ, người ta có thể ghi đè lên vị trí theo chiều dọc của nội dung vùng chọn bởi một phong cách như:
Marquee0 div div {
top: 3px quan trọng;
}
Marquee Mỗi khi khởi tạo có một mục mảng trong đó thuộc tính của nó được lưu trữ. Đây có thể được truy cập như:
marqueeInit.ar [#]. prop_name
mà # là số trường hợp của vùng chọn trên trang và prop_name là tên của tài sản. Một số trong số này là chỉ đọc. Bạn có thể thay đổi:
- hướng
- addDelay
- inc (sử dụng sinc thay vì một con trỏ hướng "vùng chọn)
- trung lập (chỉ có sẵn cho một "con trỏ điều khiển" vùng chọn)
- moveatleast (chỉ có sẵn cho một "con trỏ điều khiển" vùng chọn, và chỉ có thể được thay đổi nếu nó đã được thiết lập như là một số nguyên dương tính với vùng lựa chọn trong quá trình khởi tạo của nó )
Mỗi vùng chọn có hai thuộc tính bổ sung mà bạn có thể muốn sử dụng:
| Bất động sản | Mô tả |
stopMarquee: true, | Tương tự như tài sản trên dừng lại, nhưng không thường được sử dụng trong phần khởi tạo (mặc dù nó có thể được) hoặc các hoạt động của vùng chọn, như vậy là một sự lựa chọn tốt nếu bạn muốn phát triển off / chuyển đổi cho một vùng lựa chọn. (Mặc định là false). |
thiết lập: điều này (ví dụ), | Một đại diện của các ví dụ nguyên mẫu của vùng chọn. Có duy nhất một giá trị, và được sử dụng cho các sự kiện thay đổi kích thước cửa sổ và một lá cờ để ngăn chặn khởi tạo nội bộ của cùng một vùng. Với một sự hiểu biết thấu đáo về các tập tin crawler.js chính, điều này có thể được sử dụng để truy cập và thay đổi bất cứ điều gì về một vùng hiện có. Hãy rất cẩn thận ở đây, bạn có hiệu quả có thể hủy hoại sự xuất hiện của một vùng lựa chọn hoặc hiệu suất này nếu áp dụng kém. |
Ví dụ (để làm cho một on / off nút cho vùng đầu tiên trên một trang):
<Loại đầu vào = "nút"
onclick = "marqueeInit.ar [0] stopMarquee = marqueeInit.ar [0] stopMarquee,"
giá trị = "Tạm dừng / Tiếp tục">
(Nhấp chuột phải và chọn "Save As").
