封装jQuery渐隐图片轮换带背景大图插件

做过好多个插件封装了,这个算是公开发布的第一个吧,写法比较拙劣,还请雅正!

这是一个带背景图的整图轮换插件,网上比较多见的是单独的图片轮换,而这个插件不一样哦。

插件预览:封装jQuery渐隐图片轮换带背景大图
插件代码:

$(document).ready(function(e) {
//图片轮换插件
$(“#flash”).fnFlash({
num:3,timer:6000,speed:500,flash:”flash”,flash_img:”flash_img”,img_num:”img_num”
});
});
/*
* fnFlash 0.1
* Copyright (c) 2009 saqqdy http://www.saqqdy.com/
* Date: 2013-07-23
* 使用fnFlash
*/
(function($){
$.fn.extend({
fnFlash:function(opt,callback){
if(!opt)opt = {};
var _flash = $(“#” + opt.flash);
var _flash_img = $(“.” + opt.flash_img);
var _img_num = $(“.” + opt.img_num);
var _num = parseInt(opt.num,10);
var _this = _img_num.find(“li”);
var _speed = opt.speed ? parseInt(opt.speed,10) : 300;
var _timer = opt.timer ? parseInt(opt.timer,10) : 5000;
var changeImg = function(index){
var b = _img_num.find(“li.img_num_cur”).index();
if (index == b){return};
_this.unbind(“mouseover”,changeImgID);
_flash_img.removeClass(“img_cur”).hide();
_flash_img.eq(index).fadeIn(_speed).addClass(“img_cur”);
_this.removeClass(“img_num_cur”).eq(index).addClass(“img_num_cur”);
_this.bind(“mouseover”,changeImgID);
};
var changeImgID = function(){
var show = $(this).index();
changeImg(show);
};
var autoChangeID = function(i){
if(i < _num – 1){
i++;
}else{
i = 0;
};
changeImg(i);
};
var autoChange = function(){
if(_timer)_timerID = window.setInterval(function(){
var i = $(“.img_cur”).index();
autoChangeID(i);
},_timer);
};
var stopChange = function(){
if(_timer)window.clearInterval(_timerID);
};
_img_num.hover(stopChange,autoChange).mouseout();
_this.mouseover(changeImgID);
}
})
})(jQuery)

插件下载地址:[download id=”44″ format=”1″]

使用Javascript解决IE6不支持li伪类li:hover

相信很多网页设计师都在头疼网页对于IE6的兼容性问题,操蛋的不统一的网页标准伤透了网页设计师的心。光是IE各版本之间的兼容性问题就已经非常棘手。昨夜,上岸QQ的鱼花了一整个通宵来对本站进行了升级,相信网友已经发现本站的变化了。

没错!本站新增了炫丽的二级导航,看到没?另外,本站更新了默认字体,换成了很细腻很光滑的Verdana字体。单是二级导航的问题就耗费我整整一个通宵的时间,就是因为IE6不支持li伪类li:hover,太坑爹了。。。目前本站二级导航已经在IE6,IE7,IE8,IE9,Chorme,Safari,Firefox等浏览器上测试过,均能正常显示。

下面就来说说如何用Javascript解决IE6不支持li伪类li:hover

实例:

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”keywords” content=”背景hover”/>
<link href=”#” type=”text/css” rel=”stylesheet” rev=”stylesheet” media=”screen” />
<style type=”text/css”>
li{background:#ddd; margin:5px 0; padding:2px 0;}
#see_list li:hover{background:red;}
</style>
<title>Ie6背景hover效果</title>
<script type=”text/javascript” language=”javascript”>
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++){
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf(“LI:hover”) != -1){
newSelector = cssRule.selectorText.replace(/LI:hover/gi, “LI.iehover”);
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);}}
var getElm = document.getElementsByTagName(“li”);
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=” iehover”;}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” iehover\\b”), “”);}}}
if (window.attachEvent) window.attachEvent(“onload”, stuHover);
</script>

</head>
<body>
<ul id=”see_list”>
<li>ie6 li:hover</li>
</ul>
<ul>
<li>ie6 li</li>
</ul>
</body>
</html>

试试看吧!

使用JavaScript(JS)去除链接虚线框

前面的文章介绍了使用CSS和HTC文件去除链接虚线框的方式,实际上这两种方式都有弊端,CSS方式大量使用的话会严重影响页面载入速度。且不同浏览器之间不能直接兼容,HTC文件方式只能在网页加载完成之后才有效果。这里再给大家推荐一种去除链接虚线框的方式。

JavaScript遍历实现

window.onload=function()
{for(var ii=0; ii<document.links.length; ii++)
document.links[ii].onfocus=function(){this.blur()}}

也可以把JS封装为函数,通过调用来实现

function fHideFocus(tName){
aTag=document.getElementsByTagName(tName);
for(i=0;i<aTag.length;i++)aTag[i].hideFocus=true;
//for(i=0;i<aTag.length;i++)aTag[i].onfocus=function(){this.blur();};}

当前是添加一个hidefocus的属性,注释掉的句子是添加onfucus=this.blur();
然后调用fHideFocus(“A”),即可把a的虚线框去掉
通过传递不同的参数,可以去掉更多的虚线框,比如”BUTTON”可以去掉button的
但要记住参数要用大写字母

CSS去除链接虚线框请阅读:《使用CSS去除链接虚线框
HTC去除链接虚线框请阅读:《使用HTC文件去除链接虚线框

实现IE6浏览器支持PNG透明绝佳方案:DD_belatedPNG

上岸QQ的鱼在前面文章中已经介绍了5种实现IE6浏览器支持png透明的方法,这里再给大家介绍一下DD_belatedPNGDD_belatedPNG可谓是解决png透明问题的绝佳解决方案。

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.

而今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>标签.

原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜。

使用方法
1.在这里下载DD_belatedPNG.js文件.

本地下载0.0.8a版:
DD_belatedPNG_0.0.8a:[download id=”35″ format=”1″]
DD_belatedPNG_0.0.8a-min:[download id=”36″ format=”1″]

官方下载地址:DD_belatedPNG官方下载

2.在网页中引用,如下:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js” mce_src=”DD_belatedPNG.js”></script>
<script type=”text/javascript”>
/* EXAMPLE */
DD_belatedPNG.fix(‘.png_bg’);
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的’.trans’*/
</script>
<![endif]–>

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出CSS选择器名.
使用a:hover:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!–[if IE 6]>
<script type=”text/javascript” src=”js/DD_belatedPNG.js” ></script>
<script type=”text/javascript”>DD_belatedPNG.fix(‘.trans,.box a:hover’);</script>
<![endif]–>

JavaScript和CSS滤镜实现IE6浏览器整站png背景透明

前面已经介绍了几种实现IE6浏览器下png图片透明的问题,这里再介绍一种方法给各位网友:

以下是JS内容:

<script type=”text/javascript” language=”javascript”>
function enablePngImages()
{ var imgArr = document.getElementsByTagName(“IMG”);
for(i=0; i<imgArr.length; i++){
if(imgArr[i].src.toLowerCase().lastIndexOf(“.png”) != -1)
{
imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader( src='” + imgArr[i].src + “‘, sizingMethod=’auto’ )”;
imgArr[i].src = “spacer.gif”;
}
if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)
{
var img = imgArr[i].currentStyle.backgroundImage.substring( 5, imgArr[i].currentStyle.backgroundImage.length-2);
imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+img+”‘, sizingMethod=’crop’)”;
imgArr[i].style.backgroundImage = “url(spacer.gif)”;
}
}
}
function enableBgPngImages(bgElements)
{
for(i=0; i<bgElements.length; i++)
{
if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)
{ //alert(bgElements[i]);
var img = bgElements[i].currentStyle.backgroundImage.substring( 5, bgElements[i].currentStyle.backgroundImage.length-2);
bgElements[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+img+”‘, sizingMethod=’crop’)”;
bgElements[i].style.backgroundImage = “url(spacer.gif)”;
}
}
}
</script>
<!–[if lt IE 7]>
<script type=’text/javascript’>
var bgElements; enablePngImages(); if(bgElements){ enableBgPngImages(bgElements); }
</script>
<![endif]–>

以下是<body>中的内容:

<img src=”pngpic.png” alt=”” border=”0″ />

PS:这种方法可以实现全站PNG图片透明。

JavaScript(JS)以调用的方式实现IE6浏览器PNG图片透明

上文说到《JavaScript(JS)实现IE6浏览器PNG图片透明》,这里提供另一种调用形式。(注意,这方法只对直接插入的图片有效,对背景图无效)。该方法针对个别需要实现透明效果的png图做单独设置。

以下代码插入网页头部:

<script language=”javascript”>
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split(“MSIE”);
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? “id='” + myImage.id + “‘ ” : “”;
var imgClass = (myImage.className) ? “class='” + myImage.className + “‘ ” : “”;
var imgTitle = (myImage.title) ? “title='” + myImage.title?? + “‘ ” : “title='” + myImage.alt + “‘ “;
var imgStyle = “display:inline-block;” + myImage.style.cssText;
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + myImage.width
+ “px; height:” + myImage.height
+ “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\'” + myImage.src + “\’, sizingMethod=’scale’);\”></span>”;
myImage.outerHTML = strNewHTML;
} }
window.onload=function(){
document.getElementById(“top”).style.height=screen.height/5+”px”;

}//
</script>

以下是<body>中的内容:

<img src=”logo.png” width=”328″ height=”325″ border=”0″ onload=”fixPNG(this)” />

推荐阅读:《DIV+CSS解决IE6浏览器PNG背景图不透明

JavaScript(JS)实现IE6浏览器PNG图片透明

下面这个主要是解决IE6下直接插入的透明PNG图片有灰底的问题。上文说到《DIV+CSS解决IE6浏览器PNG背景图不透明》,该方法只能解决背景图透明的问题,结合两种方法一起,就能实现网页所有的PNG图片透明了。

用JS实现,加上一段js代码后,所有插入的透明png自动透明了.(注意,这方法只对直接插入的图片有效,对背景图无效

以下代码插入网页头部:

<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\'” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>

以下是<body>中的内容:

<img src=”img/03.png” width=”30″ height=”30″ /><!–把图片换成你自己的图片 –>
<img src=”img/05.png” width=”30″ height=”30″ />

建议配合使用《DIV+CSS解决IE6浏览器PNG背景图不透明

【入门篇】Javascript的数据类型 数值型 布尔型数据介绍

Javascript的数值型数据比较简单,例如:
var a=123;
var b=12.33;
var c=-23;
var d=3e6;(科学计数法)
另外,Javascript数值型数据还有一个函数toExponential()方法,该方法将数据转换成科学计数法,该方法接受一个参数,表示要输出的小数位数。
例如:var a=567.87;
alert(a.toExponential(2));

Javascript的布尔型数据也比较简单,只有true和false两种取值,需注意的是,其值不能加引号,否则就变成字符型数据了。可以用typeof()方法输出数据的数据类型。