以下是 可以全部展开的新闻滑动条控件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accessible News Slider: A jQuery Plugin</title>
<meta name="description" content="Accessible News Slider - a news slider that meets the accessibility requirements as outlined by WCAG 1.0." />
<meta name="keywords" content="accessibility, accessible news slider, news slider, jquery, javascript, css, xhtml, web development, web design, programming" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$(".computers_technology").accessNews({
newsHeadline: "Computers & Technology",
newsSpeed: "normal"
});
$(".world_affairs").accessNews({
newsHeadline: "World Affairs",
newsSpeed: "normal"
});
/*
newsHeadline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.
newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.
*/
});
</script>
</head>
<body>
<div id="wrapper">
<h1>
Accessible News Slider
</h1>
<h2>
A <a href="http://www.jquery.com">jQuery</a> Plugin by <a href="http://blog.reindel.com">Brian Reindel</a>
</h2>
<p class="description">
Accessible News Slider is a JavaScript plugin built for the jQuery library.<br />
It meets the accessibility requirements as outlined by <a href="http://www.w3.org/TR/WAI-WEBCONTENT/" title="Web Content Accessibility Guidelines 1.0">WCAG 1.0</a>.
</p>
<p class="version">
[ v.1.3 ] released August 30, 2007
</p>
<p class="contents">
<a href="#overview">Overview</a> | <a href="#notes">Release Notes</a> | <a href="#examples">Examples</a> | <a href="#download">Download</a>
</p>
<h3>
<a name="overview"></a>Overview
</h3>
<ul>
<li>
The JavaScript is only 2KB compressed.
</li>
<li>
The XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. It is suggested that if you modify the XHTML, you do so keeping this in mind.
</li>
<li>
<strong>Users with color vision deficiency, or color blindness</strong><br />
The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the "previous" and "next" arrows are either visible or hidden, depending on the location of the news slider. There is also an indicator that communicates the total number of news stories in the slider.
</li>
<li>
<strong>Users with limited or poor vision, but who do not use a screen reader</strong><br />
If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. This is primarily a function of the CSS, and it is suggested you maintain a variable font size on your site in order to take advantage of this capability.
</li>
<li>
<strong>Users that are legally blind, and who browse Web pages with a screen reader</strong><br />
Since screen readers actually read through the code, it is important that the XHTML be formatted free of confusion. The appropriate skip links and title tags have been included for navigation and messaging. The important thing to remember is that screen readers like JAWS ignore elements with the display property set to "none", or with the visibility property set to "hidden". This helps significantly in managing the presentation to several categories of disabled users.
</li>
<li>
<strong>Users that browse with the keyboard and an adaptive device such as a mouth stick</strong><br />
When developing a Web component to be accessible, this is the most difficult group of disabled users to accommodate. If you have ever tried to browse by tabbing through a Web page, it can be frustrating. Although the core functionality of the news slider is partially accessible with a keyboard, the "View All" link was added as a catch-all mechanism.
</li>
<li>
<strong>Users who have turned off JavaScript or CSS</strong><br />
The key was to make sure that not only were all the news stories readable with JavaScript or CSS turned off, but that the appropriate messaging was displayed to the user to inform them of the implications. Although not a category that I think fits explicitly under accessibility, it is a component of the WCAG 1.0 checkpoints, and strides were taken to make sure the plugin met these requirements.
</li>
</ul>
<h3>
<a name="notes"></a>Release Notes
</h3>
<p class="release">
<strong>August 30, 2007, v1.3 (FINAL) Release</strong>
<p>
<ul>
<li>
Supported jQuery Version: [ 1.1.3.1 ]
</li>
<li>
Supported Browsers: [ Windows IE 6+, FF 1.5+, Opera 9+ ] [ Mac Safari 2+, FF 1.5+, Opera 9+ ]
</li>
<li>
The <em>newsWidth</em> option was eliminated. The news slider now calculates the width of each news item automatically. It made sense that a developer should only have to adjust the CSS, instead of needing to specify any dimensions through the plugin options.
</li>
<li>
Next Release:<br />
This is the final release of the Accessible News Slider.
</li>
</ul>
<p class="release">
<strong>July 15, 2007, v1.2 Release</strong>
<p>
<ul>
<li>
Supported jQuery Version: [ 1.1.3.1 ]
</li>
<li>
Supported Browsers: [ Windows IE 6+, FF 1.5+, Opera 9+ ] [ Mac Safari 2+, FF 1.5+, Opera 9+ ]
</li>
<li>
The JavaScript, CSS, and XHTML were completely revamped for efficiency. The additional features did not increase the weight of the script as a result.
</li>
<li>
The skip link functionality was removed from the JavaScript. It makes sense that this would be printed out through server-side logic or statically in the XHTML.
</li>
<li>
The news headline now has View All/View Less functionality, and remains visible on the page.
</li>
<li>
Next Release:<br />
The next release will be focused primarily on improving the <em>newsWidth</em> option. The goal is that you will not need to make a change to the CSS when editing this option.
</li>
</ul>
<h3>
<a name="examples"></a>Examples
</h3>
<!-- Example 1 [ Begin ] -->
<div class="news_slider computers_technology">
<div class="messaging">
Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</div>
<a href="#skip_to_news_1" class="skip">Skip to news content.</a>
<a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
<a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
</div>
</div>
</div>
<!-- Example 1 [ End ] -->
<!-- Example 2 [ Begin ] -->
<div class="news_slider world_affairs">
<div class="messaging">
Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
</div>
<a href="#skip_to_news_1" class="skip">Skip to news content.</a>
<a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
<a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
<div class="news_items">
<a name="skip_to_news_1"></a>
<div class="container fl">
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Etiam Porttitor Adipiscing</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
<div class="item fl">
<a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
<div class="fl">
<a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
</div>
</div>
</div>
</div>
</div>
<!-- Example 2 [ End ] -->
<h3>
<a name="download"></a>Download
</h3>
<p class="download">
The compressed version of the jQuery library is bundled in both the compressed and uncompressed version of the downloads. If you would like an uncompressed version of the jQuery library, please visit <a href="http://www.jquery.com">jQuery.com</a>
</p>
<p class="download">
<a href="http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.3.zip">Download Accessible News Slider</a> (Uncompressed)<br />
<a href="http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.3-pack.zip">Download Accessible News Slider</a> (Compressed)
</p>
<p class="download">
For questions or suggestions, please send an email to <a href="mailto:blog@reindel.com">blog@reindel.com</a>. </p>
<p><br />
</p>
<p><br />
</p>
<p>13141618.taobao.com</p>
<p class="download"> </p>
<p class="download">
</p>
</div>
</body>
</html>JS代码(jquery.accessible-news-slider.js):
jQuery.fn.accessNews = function(settings){
settings = jQuery.extend({
newsHeadline:"Top Stories",newsSpeed:"normal"}
,settings);
return this.each(function(i){
aNewsSlider.itemWidth = parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("width")) + parseInt(jQuery(".item:eq(" + i + ")",".news_slider").css("margin-right"));
aNewsSlider.init(settings,this);
jQuery(".view_all > a",this).click(function(){
aNewsSlider.vAll(settings,this);
return false;
}
);
}
);
}
;
var aNewsSlider ={
itemWidth:0,init:function(s,p){
jQuery(".messaging",p).css("display","none");
itemLength = jQuery(".item",p).length;
if (jQuery(".view_all",p).width() == null){
jQuery(".news_items",p).prepend("<p class='view_all'>" + s.newsHeadline + " [ " + itemLength + " total ]
-
<a href='#'>View All</a></p>");
}
newsContainerWidth = itemLength * aNewsSlider.itemWidth;
jQuery(".container",p).css("width",newsContainerWidth + "px");
jQuery(".next",p).css("display","block");
animating = false;
jQuery(".next",p).click(function(){
if (animating == false){
animating = true;
animateLeft = parseInt(jQuery(".container",p).css("left")) - (aNewsSlider.itemWidth * 2);
if (animateLeft + parseInt(jQuery(".container",p).css("width")) > 0){
jQuery(".prev",p).css("display","block");
jQuery(".container",p).animate({
left:animateLeft}
,s.newsSpeed,function(){
jQuery(this).css("left",animateLeft);
if (parseInt(jQuery(".container",p).css("left")) + parseInt(jQuery(".container",p).css("width")) <= aNewsSlider.itemWidth * 2){
jQuery(".next",p).css("display","none");
}
animating = false;
}
);
}
else{
animating = false;
}
}
return false;
}
);
jQuery(".prev",p).click(function(){
if (animating == false){
animating = true;
animateLeft = parseInt(jQuery(".container",p).css("left")) + (aNewsSlider.itemWidth * 2);
if ((animateLeft + parseInt(jQuery(".container",p).css("width"))) <= parseInt(jQuery(".container",p).css("width"))){
jQuery(".next",p).css("display","block");
jQuery(".container",p).animate({
left:animateLeft}
,s.newsSpeed,function(){
jQuery(this).css("left",animateLeft);
if (parseInt(jQuery(".container",p).css("left")) == 0){
jQuery(".prev",p).css("display","none");
}
animating = false;
}
);
}
else{
animating = false;
}
}
return false;
}
);
}
,vAll:function(s,p){
var o = p;
while (p){
p = p.parentNode;
if (jQuery(p).attr("class") != undefined && jQuery(p).attr("class").indexOf("news_slider") != -1){
break;
}
}
if (jQuery(o).text().indexOf("View All") != -1){
jQuery(".next",p).css("display","none");
jQuery(".prev",p).css("display","none");
jQuery(o).text("View Less");
jQuery(".container",p).css("left","0px").css("width",aNewsSlider.itemWidth * 2 + "px");
}
else{
jQuery(o).text("View All");
aNewsSlider.init(s,p);
}
}
}
;
CSS代码(jquery.accessible-news-slider.css):
.fl{float:left;display:inline;}
img{border:0;display:block;}
.news_slider{position:relative;width:600px;margin:0 auto 20px auto;text-align:left;}
.news_slider .messaging{display:block;padding:5px;margin:0 20px 5px 20px;background:#ffffcc;}
.news_slider .prev,.news_slider .next{position:absolute;top:42%;display:none;}
.news_slider .next{right:0;}
.news_slider .container{position:relative;top:0;left:0;width:100%;background:#eeeeed;}
.news_slider .news_items{/* The width must be equal to .item ((width + margin-right) * 2). */
position:relative;width:560px;top:0;left:20px;overflow:hidden;}
.news_slider .view_all{font-size:.8em;padding:5px;margin:0 0 2px 0;border-top:#eeeeed 1px solid;border-bottom:#eeeeed 1px solid;text-align:center;}
.news_slider .item{/* Must contain a width and a margin-right. */
width:270px;margin-right:10px;}
.news_slider .item div{font-size:.8em;width:175px;padding:10px 0 10px 0;}
.news_slider .item img{padding:10px;}
CSS代码(styles.css):
body{margin:0 auto;font:normal 100% "Georgia","Times New Roman","Times",serif;color:#333;text-align:center;}
a{color:#daa520;}
.ads{padding:12px 0 12px 0;font-family:"Arial","Verdana","Helvetica",sans-serif;text-align:center;}
.skip{position:absolute;left:-5000px;}
.photos{text-align:center;padding:24px 0 0 0;}
#wrapper{width:750px;margin:0 auto;text-align:center;}
p{margin:0;line-height:1.4;}
p.description{font-size:1.2em;padding:12px 0 12px 0;border-top:#ccc 1px dashed;}
p.version{font-size:.8em;background:#f5f5f5;padding:4px 0;}
p.contents{font-size:.8em;padding:12px 0;}
p.release{font-size:.8em;padding:0 0 12px 0;}
p.download{font-size:.8em;padding:0 0 12px 0;text-align:left;}
h1{font-weight:normal;padding:16px 0 8px 0;margin:0;}
h2{font-size:.8em;font-weight:normal;padding:0 0 16px 0;margin:0;}
h3{font-size:1em;font-weight:normal;padding:0 0 16px 0;margin:0;text-align:left;}
ul{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:12px;}
ul li{font-size:.8em;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:6px;text-align:left;}
分享到QQ
分享到微博
微信扫一扫
