邢栋博客

邢栋博客,Action博客,记录工作和生活中的点点滴滴

js获取图片的宽度和高度
1.onload
// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
    // 打印
    alert('width:'+img.width+',height:'+img.height);
};

2.通过complete与onload一起混合使用
// 图片地址
var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg';
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url; 
// 判断是否有缓存
if(img.complete){
    // 打印
    alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
    // 加载完成执行
    img.onload = function(){
        // 打印
        alert('from:onload : width:'+img.width+',height:'+img.height);
    };
}

3.通过定时循环检测获取
// 图片地址
var img_url = 'http://www.xingdong365.com/content/uploadfile/201308/3b3e1376105614.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 定时执行获取宽高
var check = function(){
    document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+'</div>';
};
var set = setInterval(check,40);
// 加载完成获取宽高
img.onload = function(){
    document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+'</div>';
 
    // 取消定时获取宽高
    clearInterval(set);
};

select标签样式美化

js部分

<script type="text/javascript">
    var childCreate=false;
    function Offset(e)
    //取标签的绝对位置
    {
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var w = e.offsetWidth;
        var h = e.offsetHeight-2;
    
        while(e=e.offsetParent)
        {
            t+=e.offsetTop;
            l+=e.offsetLeft;
        }
        return {
            top : t,
            left : l,
            width : w,
            height : h
        }
    }
    
    function loadSelect(obj){
    
        //第一步:取得Select所在的位置
        var offset=Offset(obj);
        //第二步:将真的select隐藏
        obj.style.display="none";
    
        //第三步:虚拟一个div出来代替select
        var iDiv = document.createElement("div");
            iDiv.id="selectof" + obj.name;
            iDiv.style.position = "absolute";
            iDiv.style.width=offset.width + "px";
            iDiv.style.height=offset.height + "px";
            iDiv.style.top=offset.top + "px";
            iDiv.style.left=offset.left + "px";
            iDiv.style.background="url(icon_select.png) no-repeat right";
            iDiv.style.border="1px solid #cccccc";
            iDiv.style.fontSize="12px";
            iDiv.style.lineHeight=offset.height + "px";
            iDiv.style.textIndent="4px";
        document.body.appendChild(iDiv);
    
        //第四步:将select中默认的选项显示出来
        var tValue=obj.options[obj.selectedIndex].innerHTML;
        iDiv.innerHTML=tValue;
    
        //第五步:模拟鼠标点击
        iDiv.onmouseover=function(){//鼠标移到
            iDiv.style.background="url(icon_select.png) no-repeat right";
        }
        iDiv.onmouseout=function(){//鼠标移走
            iDiv.style.background="url(icon_select.png) no-repeat right";
        }
        iDiv.onclick=function(){//鼠标点击
            if (document.getElementById("selectchild" + obj.name)){
            //判断是否创建过div
                if (childCreate){
                    //判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
                    document.getElementById("selectchild" + obj.name).style.display="none";
                    childCreate=false;
                }else{
                    document.getElementById("selectchild" + obj.name).style.display="";
                    childCreate=true;
                }
            }else{
                //初始一个div放在上一个div下边,当options的替身。
                var cDiv = document.createElement("div");
                cDiv.id="selectchild" + obj.name;
                cDiv.style.position = "absolute";
                cDiv.style.width=offset.width + "px";
                cDiv.style.height=obj.options.length *20 + "px";
                cDiv.style.top=(offset.top+offset.height+2) + "px";
                cDiv.style.left=offset.left + "px";
                cDiv.style.background="#f7f7f7";
                cDiv.style.border="1px solid silver";
    
                var uUl = document.createElement("ul");
                uUl.id="uUlchild" + obj.name;
                uUl.style.listStyle="none";
                uUl.style.margin="0";
                uUl.style.padding="0";
                uUl.style.fontSize="12px";
                cDiv.appendChild(uUl);
                document.body.appendChild(cDiv);        
                childCreate=true;
                for (var i=0;i<obj.options.length;i++){
                    //将原始的select标签中的options添加到li中
                    var lLi=document.createElement("li");
                    lLi.id=obj.options[i].value;
                    lLi.style.textIndent="4px";
                    lLi.style.height="20px";
                    lLi.style.lineHeight="20px";
                    lLi.innerHTML=obj.options[i].innerHTML;
                    uUl.appendChild(lLi);
                }
                var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
                for (var j=0;j<obj.options.length;j++){
                    //为li标签添加鼠标事件
                    liObj[j].onmouseover=function(){
                        this.style.background="gray";
                        this.style.color="white";
                    }
                    liObj[j].onmouseout=function(){
                        this.style.background="white";
                        this.style.color="black";
                    }
                    liObj[j].onclick=function(){
                        //做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。
                        obj.options.length=0;
                        obj.options[0]=new Option(this.innerHTML,this.id);
                        //同时我们把下拉的关闭掉。
                        document.getElementById("selectchild" + obj.name).style.display="none";
                        childCreate=false;
                        iDiv.innerHTML=this.innerHTML;
                    }
                }
            }
        }
    }

    
</script>


css部分

<style type="text/css">
    select{width:200px;height:30px;}
</style>


body部分

<form name="form1" >
    <select id="problem" name="problem">
        <option value="0">你最喜欢的运动是什么</option>
        <option value="1">你的高中班主任姓名</option>
        <option value="2">你的出生地是哪</option>
    </select>
</form>
<script type="text/javascript">
   loadSelect(document.form1.problem);
</script>

css实现背景透明,文字不透明
background:rgba(255, 255, 255, 0.5) none repeat scroll 0 0 !important;

filter:Alpha(opacity=50); background:#fff;/

给区域内的字div标签加上position:relative 才能实现文字不透明

textarea 在浏览器中固定大小和禁止拖动

给textarea 加个样式 (这个方法直接)

resize: none; 

禁止网页复制的代码

禁止网页复制的代码

 <script type="text/javascript">
<!--
document.oncontextmenu=new Function('event.returnValue=false;');
document.onselectstart=new Function('event.returnValue=false;');
-->
 </script>

div布局,如何使左侧div高度与右侧的div高度自适应相同

方法1:

<!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=gb2312" />
<title>div布局,如何使左侧div高度与右侧的div高度自适应相同</title>
<style type="text/css">
.center{ width:900px; margin:0px auto;overflow:hidden;}
.left{ width:250px;background:#CCCCCC; float:left;height:100px; margin-bottom:-10000px;  padding-bottom:10000px; overflow:hidden; }
.right{width:650px; background:#dedede; float:left;  margin-bottom:-10000px;   padding-bottom:10000px;overflow:hidden; }
</style>
</head>
<body>
<div class="center">
  <div class="left">left </div>
  <div class="right">right<p>right<p>right<p>right<p>right<p></div>
</div>
</body>
</html>

 方法2:
<!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=gb2312" />
<title>div布局,如何使左侧div高度与右侧的div高度自适应相同</title>
<style type="text/css">
#center{ width:900px; margin:0px auto;}
#left{width:250px;height:200px;background:#CCCCCC;float:left;  }
#right{width:650px;background:#dedede;float:left;}
</style>
</head>
<body>
 <div id="center">
   <div id="left">left </div>
   <div id="right">right<p>right<p>right<p>right<p>right<p> right<p>right<p>
   </div>
 </div>
 <script language="javascript">
  document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px";
 </script>
</body>
</html>


优惠券
最新微语