弹性菜单-js

<!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" />
<title>弹性菜单</title>
<style>
*{ padding:0; margin:0; list-style:none;}
#ul1{ width:800px; position:relative; margin:10px auto; background:#9C0; height:30px;}
#ul1 li{ width:200px; height:30px; line-height:30px; text-align:center; float:left; z-index:2; position:relative;}
#ul1 li a{ display:block}
#ul1 li.box{ position:absolute; background:#ff0; left:0; top:0; z-index:1;}
</style>
</head>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
var oBox=aLi[aLi.length-1];

for(var i=0;i<aLi.length-1;i++){
aLi[i].onmouseover=function(){
startMove(oBox,this.offsetLeft);
};
}
};
var i=0;
function startMove(obj,iTarget){
obj.speed=obj.speed||0;
obj.left=obj.left||obj.offsetLeft;

clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.speed+=(iTarget-obj.left)/5;
obj.speed*=0.7;
obj.left+=obj.speed;
obj.style.left=Math.round(obj.left)+'px';

if(Math.abs(obj.speed)<1&&obj.offsetLeft==iTarget){
clearInterval(obj.timer);
}
document.title=i++;

},30);
}
</script>
<body>
<ul id="ul1">
<li><a href="http://www.gaigaiming.com">首页</a></li>
<li><a href="javascript:;">作品</a></li>
<li><a href="javascript:;">用户</a></li>
<li><a href="javascript:;">论坛</a></li>
<li class="box"></li>
</ul>
</body>
</html>

 

利用定位,运动展示弹性菜单。

先清再定时器。

DEMO

吸顶菜单

知识点:
$(‘.nav’).offset():获取匹配元素在当前视口的相对偏移 offset().top offset().left
返回对象包含两个属性:top和left。 此方法只对可见元素有效

$(‘.nav’).width():取得匹配元素的当前计算的宽度值
参数:设定css中的width值,可以是字符串或者数字,还可以是一个函数。返回要设置的数值。

$(‘p’).width() 获取第一段的宽度
把所有的段落的宽度设为20
$(‘p’).width(20);

函数接受两个参数,第一个参数是元素在原先集合中的做因为只,第二个参数为原先的宽度。
function(index,width)

以10像素的复读增加p元素的宽度

 
$('button').click(function(){
$('p').width(function(n,w){
return w+10;
})
})

$(window).scroll()|| $(‘.div’).scroll 当页面滚动条变化时,执行的函数
scrollTop() 获取匹配元素相对滚动提条顶部的偏移
demo

js字符串转数字

方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换。

1. 转换函数:

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

一些示例如下:

parseInt(“1234blue”); //returns 1234
parseInt(“0xA”); //returns 10
parseInt(“22.5”); //returns 22
parseInt(“blue”); //returns NaN

parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,示例如下:

parseInt(“AF”, 16); //returns 175
parseInt(“10”, 2); //returns 2
parseInt(“10”, 8); //returns 8
parseInt(“10”, 10); //returns 10
如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:
parseInt(“010”); //returns 8
parseInt(“010”, 8); //returns 8
parseInt(“010”, 10); //returns 10

parseFloat()方法与parseInt()方法的处理方式相似。
使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,parseFloat()没有基模式。

下面是使用parseFloat()方法的示例:
parseFloat(“1234blue”); //returns 1234.0
parseFloat(“0xA”); //returns NaN
parseFloat(“22.5”); //returns 22.5
parseFloat(“22.34.5”); //returns 22.34
parseFloat(“0908”); //returns 908
parseFloat(“blue”); //returns NaN

2. 强制类型转换

还可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)——把给定的值转换成Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String(value)——把给定的值转换成字符串。
用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或对象(下一节将讨论这一点)时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。

可以用下面的代码段测试Boolean型的强制类型转换。

Boolean(“”); //false – empty string
Boolean(“hi”); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false – null
Boolean(0); //false – zero
Boolean(new Object()); //true – object

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是部分值。示例如下:

用  法 结  果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( “5.5 “) 5.5
Number( “56 “) 56
Number( “5.6.7 “) NaN
Number(new Object()) NaN
Number(100) 100

最后一种强制类型转换方法String()是最简单的,示例如下:

var s1 = String(null); //”null”
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error

3. 利用js变量弱类型转换

举个小例子,一看,就会明白了。

等比例缩放图片js

转载自 http://www.qianyunlai.com/blog/397.html





最新javascript自动按比例显示图片,按比例压缩图片显示






原图显示(534 X 800)
onload="AutoResizeImage(0,0,this)
534 X 800

1.按宽度250压缩,不限制高度 按比例压缩
onload="AutoResizeImage(250,0,this)"
250 X 374

2.按高度250压缩,不限制宽度 按比例压缩
onload="AutoResizeImage(0,250,this)"
166 X 250

3.按高度250宽度250 按比例压缩
onload="AutoResizeImage(250,250,this)"
200 X 300

4.高宽不等比例压缩 (400 X 512),此时高度不变,会自动按高度的比例压缩。
onload="AutoResizeImage(400,512,this)"
341 X 512

5.高宽不等比例压缩 (300 X 600),此时宽度不变,会自动按宽度的比例压缩。
onload="AutoResizeImage(300,600,this)"
300 X 449

6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)
原图444 x 207,压缩为 500 x 600,将保持原图显示
onload="AutoResizeImage(500,600,this)"
444 X 207

效果图:

不同浏览器不同屏幕分辨率自动调用不同CSS的JavaScript代码

不同浏览器不同屏幕分辨率自动调用不同CSS的代码。既判断浏览器,也判断分辨率。

【转】http://www.smalluv.com/use_javascript_to_automatically_deployment_css.html

<SCRIPT LANGUAGE="JavaScript">
 <!–
 if (window.navigator.userAgent.indexOf("MSIE")>=1)
 {
 var IE1024="";
 var IE800="";
 var IE1152="";
 var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
 }else{
 if (window.navigator.userAgent.indexOf("Firefox")>=1)
 {
 //如果浏览器为Firefox
 var Firefox1024="";
 var Firefox800="";
 var Firefox1152="";
 var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
 }else{
 //如果浏览器为其他
 var Other1024="";
 var Other800="";
 var Other1152="";
 var Otherother="";
 ScreenWidth(Other1024,Other800,Other1152,Otherother)
 }
 }

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
 if ((screen.width == 1024) && (screen.height == 768)){
 setActiveStyleSheet(CSS1);
 }else{
 if ((screen.width == 800) && (screen.height == 600)){
 setActiveStyleSheet(CSS2);
 }else{
 if ((screen.width == 1152) && (screen.height == 864)){
 setActiveStyleSheet(CSS3);
 }else{
 setActiveStyleSheet(CSS4);
 }}}
 }

function setActiveStyleSheet(title){
 document.getElementsByTagName("link")[0].href="style/"+title;
 }
 //–>
 </SCRIPT>

解释:
 var IE1024="";
 var IE800="";
 var IE1152="";
 var IEother="";

引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Firefox1024="";
 var Firefox800="";
 var Firefox1152="";
 var Firefoxother="";

引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
 var Other800="";
 var Other1152="";
 var Otherother="";

 

引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

 

不判断分辨率,只判断浏览器
 程序代码

<SCRIPT LANGUAGE="JavaScript">
 <!–
 if (window.navigator.userAgent.indexOf("MSIE")>=1)
 {
 //如果浏览器为IE
 setActiveStyleSheet("default.css");
 }else{
 if (window.navigator.userAgent.indexOf("Firefox")>=1)
 {
 //如果浏览器为Firefox
 setActiveStyleSheet("default2.css");
 }else{
 //如果浏览器为其他
 setActiveStyleSheet("newsky.css");
 }
 }

function setActiveStyleSheet(title){
 document.getElementsByTagName("link")[0].href="style/"+title;
 }
 //–>
 </SCRIPT>

解释:
 如果浏览器为IE,则调用default.css
 如果浏览器为Firefox,则调用default2.css
 如果浏览器为其他,则调用newsky.css

用法:
 放在
 </head>前面即可。

Jquery插件–easyUI属性汇总(转)

找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大部分功能属性做了一下汇总。

此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里

属性分为CSS片段和JS片段。

CSS类定义:
1、div easyui-window        生成一个window窗口样式。
      属性如下:
                   1)modal:是否生成模态窗口。true[是] false[否]
                   2)shadow:是否显示窗口阴影。true[显示] false[不显示]
            
2、div easyui-panel           生成一个面板。
       属性如下:
                 1)title:该标题文本显示在面板头部。
                 2)iconCls:在面板上通过一个CSS类显示16×16图标。
                 3)width:设置面板宽度。默认auto。
                 4)height:设置面板高度。默认auto。
                 5)left:设置面板左边距。
                 6)top:设置面板顶部位置。
                 7)cls:在面板中增加一个Class类。
                 8)headerCls:在面板头部中增加一个Class类。
                 9)bodyCls:在面板内容中增加一个Class类。
                10)style:在面板中增加一个指定样式。
                11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。
                12)border:当定义时显示面板边界。默认true。
                13)doSize:如果设置为True,该面板将重绘大小,并重建布局。默认true。
                14)collapsible:当定义时显示可折叠面板的按钮。默认false。
                15)minimizable:当定义时显示最小化面板的按钮。默认false。
                16)maximizable:当定义时显示最大化面板的按钮。默认false。
                17)closable:当定义时显示关闭面板的按钮。默认false。
                18)tools:自定义工具栏,每个工具都包含两个属性:iconCls、handler。
                19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。
                20)minimized:当定义时该面板初始化时处于最小化状态。默认false。
                21)maximized:当定义时该面板初始化时处于最大化状态。默认false。
                22)closed:当定义时该面板初始化时处于关闭状态。默认false。
                23)href:一个url,加载远程数据并显示在面板中。
                24)loadingMessage:当加载远程数据时,在面板中显示一个消息。默认Loading…
             事件如下:
                 1)onLoad:当远程数据加载完毕后激活。
                 2)onBeforeOpen:当面板打开前激活。
                 3)onOpen:当面板打开后激活。
                 4)onBeforeClose:当面板关闭前激活。
                 5)onClose:当面板关闭后激活。
                 6)onBeforeDestroy:当面板销毁前激活。
                 7)onDestroy:当面板销毁后激活。
                 8)onBeforeCollpase:当面板收缩前激活。
                 9)onCollapse:当面板收缩后激活。
                10)onBeforeExpand:当面板扩展前激活。
                11)onExpand:当面板扩展后激活。
                12)onResize:当面板重绘后激活。
                      width:新建的外部宽度
                      height:新建的外部高度
                13)onMove:当面板移动后激活。
                     left:左侧新位置。
                     top:顶部新位置。
                14)onMaximize:当窗口最大化

来自某群的99的分享

盛大创新院面试页面重构的js题目。。。

★列出display的值
可用值 值的说明
block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table-header-group 显示在任何表格行和行组合之前,在头部标题之后。
table-footer-group 显示在任何表格行和行组合之后,在底部标题前。

★清除浮动与闭合浮动的不同点 (http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html)

★如何为元素绑定事件(就是addEvent)

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on’ + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}

★window.onbeforeunload 的用法
(http://www.cnblogs.com/snandy/archive/2012/05/03/2481019.html)

★说一下window.onerror的参数
(http://blog.csdn.net/zzxll5566/article/details/6187943)

★列出IE与FF的事件对象的不同点
(http://www.ok12.net/js/125.html)

★如何用CSS画三角形
(利用border属性)

★你平时是如何调试JS代码的
(firebug,IE开发人员工具,opera是当中最好的)

★如何判定一个脚本是否加载成功

var script = document.createElement(‘script’) ;
var head = document.getElementsByTagName(“head”)[0];
head.insertBefore(script, head.firstChild);//规避IE6下自闭合base标签BUG
script.onload = script.onreadystatechange = function(){//先绑定事件再指定src发出请求
if(/loaded|complete|undefined/.test(this.readyState) && !this.once ){
this.once = 1;
this.parentNode.removeChild(this);
}
}
script.src = ’http://files.cnblogs.com/rubylouvre/html5.js’

(IE onreadystatechange事件,判定节点的readyState值是否为loaded或complete, 其他浏览器则使用onload)

★如何判定iframe里面的资源都加载完毕
(http://www.cnblogs.com/lhgstudio/archive/2010/10/24/1859946.html)

★怎么判定一个节点是在DOM树中
(http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583523.html)

★指出JS拖动的原理
(将元素绝对定位,一点点地改变其top,left样式来实现移动的效果,top,left可以通过鼠标获取)

★说一下css transform2D与transform3D的区别(一个是2*3矩阵,一个是4*4矩阵,transform3D支持GPU硬件加速,更加流畅,建议用transform3D模拟transform2D)

★指出{}+[]与[]+{}的值,为什么 (第一个为0,因为{}放在语句在前面,JS引擎认为它只是一个块,不是空对象,相当于+[] ===> +”" ==> 0, 第二个是”[object Object]“,两者取toString(),然后相加)

★说一下浏览器资源加载的情况,IE与其他浏览器各版本的不同之外
(http://www.otakustay.com/browser-strategy-loading-external-resource/)

★说一下最近非常流行模块加载,大概是怎么实现的,有什么好处(http://www.cnblogs.com/muguaworld/archive/2011/11/27/2265356.html)