您现在的位置是:门户> 编程语言> HTML/CSS

VML应用实例大全
2020-04-10 51人围观 0条评论
简介VML应用实例大全






    蓝丽网 - Vml图像画板.2003

    v\:*{behavior:url(#default#VML);} /*声明V为VML变量*/
    a{text-Decoration:none;color:white}
    a:hover{text-Decoration:underline;color:yellow;}
    td{font-size:12px;color:white}
    .bon1{border-bottom:1 solid eeeeee;border-right:1 solid eeeeee;border-left:1 solid gray;border-top:1 solid gray;background-color:#619CE7;color:yellow;width:54}
    .bon2{border-bottom:1 solid gray;border-right:1 solid gray;border-left:1 solid eeeeee;border-top:1 solid eeeeee;background-color:#619CE7;color:white;width:54}


























    修改原代码
    保存为文件最大化视图操作帮助  原作:风云舞,蓝丽程序员网络:http://www.lshdic.com






    画笔选择

    选移调大小扔出钢笔记忆点圆型长方型圆矩型文字图片填充立体边框高级
    画笔基本参数

    笔边粗度 1for(i=2;i<101;i++)document.write(""+i)

    画笔颜色

    画笔背景

    X Y 坐标









    var bi=4 //定义当前使用的画笔工具,3为铅笔
    var color1='#000000',color2='#000000',size1=0 //定义缺剩的画笔颜色及画笔填充颜色和笔边粗度
    var xx=0,yy=0,zz=1000 //定义缺剩的X及Y坐标
    var isok=false //区分画笔起点是否在DIV内,超出范围则无效
    var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移动物件、调整大小物件的引用
    var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成记忆点,创建一个可折式线段
    var gaojiobj=null //为了完成“高级”功能,绑定被修改对象
    var thisobj=null //为了完成各种基本编辑功能,如“置前”“复制”“删除”等
    var zz2=1000 //为完成“置后”功能,zz2为负数
    function div1.onmousedown(){
    div1.setCapture();color1=huabiyanse.value;color2=huabibeijing.value;isok=true;size1=bibiancudu.options[bibiancudu.selectedIndex].text
    xx=event.x;yy=event.y;zz+=1
    for(i=0;iline1.strokecolor=color1;line1.strokeweight=size1;oval1.strokeweight=size1;oval1.strokecolor=color1
    oval1.fillcolor=color2;rect1.strokeweight=size1;rect1.strokecolor=color1
    rect1.fillcolor=color2;roundrect1.strokeweight=size1;roundrect1.strokecolor=color1
    roundrect1.fillcolor=color2;
    if(event.button==1){
    switch(bi){
    case 1: //选移
    if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;ckleft=xx-parseInt(moveobj.style.left);cktop=yy-parseInt(moveobj.style.top)}
    break;
    case 2: //调大小
    if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;
    ckleft=parseInt(moveobj.style.left);cktop=parseInt(moveobj.style.top);ckwid=moveobj.offsetWidth;ckhei=moveobj.offsetHeight}
    break;
    case 3: //扔出
    break;
    case 4: //钢笔
    line1.style.left=event.x;line1.style.top=event.y;line1.to="0,0";line1.style.display=""
    break;
    case 5: //记忆点
    if(poly1==null){
    oldx=xx;oldy=yy
    poly1=div1.appendChild(document.createElement(""))
    }
    if(oldx-tempx<1&&oldy-tempy<1)oldvalue=poly1.points.value.replace(/,/g,' ')
    break;
    case 6: //圆形
    oval1.style.left=event.x;oval1.style.top=event.y;oval1.style.width=0;oval1.style.height=0;oval1.style.display=""
    break;
    case 7: //长方形
    rect1.style.left=event.x;rect1.style.top=event.y;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
    break;
    case 8: //圆矩形
    roundrect1.style.left=event.x;roundrect1.style.top=event.y;roundrect1.style.width=0;roundrect1.style.height=0;roundrect1.style.display=""
    break;
    case 9: //文字
    wenzi1.style.left=event.x;wenzi1.style.top=event.y;wenzi1.style.display=""
    break;
    case 10: //图片
    tupian1.style.left=event.x;tupian1.style.top=event.y;tupian1.style.display=""
    break;
    }
    }}
    function div1.onmousemove(){
    tempx=event.x;tempy=event.y;temp1=0;temp2=0
    zuobiao.value=tempx-allform1.offsetLeft-8+","+parseInt(tempy-toptd1.offsetHeight-7)
    if(bi==5&&poly1!=null){ //记忆点
    if(oldx-tempx<0&&oldy-tempy<0)poly1.points.value=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy)
    }
    if(event.button==1){
    switch(bi){
    case 1: //选移
    if(moveobj!=null){moveobj.style.left=tempx-ckleft;moveobj.style.top=tempy-cktop}
    break;
    case 2: //调大小
    if(moveobj!=null){
    if(moveobj.tagName!="line"){
    if(tempx>ckleft){moveobj.style.width=tempx-ckleft}else{moveobj.style.left=tempx;moveobj.style.width=ckleft-tempx}
    if(tempy>cktop){moveobj.style.height=tempy-cktop}else{moveobj.style.top=tempy;moveobj.style.height=cktop-tempy}
    }else{moveobj.to=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);if(ckto=="")ckto=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);}
    }
    break;
    case 4: //钢笔
    line1.to=(tempx-xx)+","+(tempy-yy)
    break;
    case 6: //圆形
    if(tempx-xx<0){oval1.style.left=event.x;oval1.style.width=(xx-tempx)}else{oval1.style.width=(tempx-xx)}
    if(tempy-yy<0){oval1.style.top=event.y;oval1.style.height=(yy-tempy)}else{oval1.style.height=(tempy-yy)}
    break;
    case 7: //长方形
    if(tempx-xx<0){rect1.style.left=event.x;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)}
    if(tempy-yy<0){rect1.style.top=event.y;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)}
    break;
    case 8: //圆矩形
    if(tempx-xx<0){roundrect1.style.left=event.x;roundrect1.style.width=(xx-tempx)}else{roundrect1.style.width=(tempx-xx)}
    if(tempy-yy<0){roundrect1.style.top=event.y;roundrect1.style.height=(yy-tempy)}else{roundrect1.style.height=(tempy-yy)}
    break;
    }}}
    function div1.onmouseup(){
    document.releaseCapture();if(isok==false){forerr();return false};isok=false;menu1.style.display='none'
    tempx=event.x;tempy=event.y;divwid=div1.offsetWidth;divhei=div1.offsetHeight
    if(tempx>allform1.offsetLeft+divwid+5||tempxif(tempy>allform1.offsetTop+toptd1.offsetHeight+divhei+5||tempyif(event.button==2&&bi==5&&poly1!=null){
    poly1.points.value=oldvalue;oldvalue="";poly1=null;
    }else if(event.srcElement.parentElement.id=="div1"&&event.button==2){menu1.style.left=tempx;menu1.style.top=tempy;menu1.style.display='';thisobj=event.srcElement}
    if(event.button==1){
    switch(bi){
    case 1: //选移
    if(moveobj!=null&&parseInt(moveobj.style.left)if(moveobj!=null&&parseInt(moveobj.style.left)+moveobj.offsetWidth-2>allform1.offsetLeft+divwid+5){forerr();return alert("被移动物体X2超出界限")}
    if(moveobj!=null&&parseInt(moveobj.style.top)if(moveobj!=null&&parseInt(moveobj.style.top)+moveobj.offsetHeight-2>allform1.offsetTop+toptd1.offsetHeight+divhei+3){forerr();return alert("被移动物体Y2超出界限")}
    moveobj=null
    break;
    case 2: //调大小
    moveobj=null;ckto=""
    break;
    case 3: //仍出
    if(event.srcElement.parentElement.id=="div1")event.srcElement.outerHTML=""
    break;
    case 4: //钢笔
    div1.appendChild(document.createElement(""))
    line1.style.display="none"
    break;
    case 6: //圆形
    div1.appendChild(document.createElement(""))
    oval1.style.display="none"
    break;
    case 7: //长方形
    div1.appendChild(document.createElement(""))
    rect1.style.display="none"
    break;
    case 8: //圆矩形
    div1.appendChild(document.createElement(""))
    roundrect1.style.display="none"
    break;
    case 11: //渐变
    if(event.srcElement.parentElement.id=="div1"){
    if(!usejianbian.checked){event.srcElement.fillcolor=tianchongbeijing.value}else{
    temp1=jianbianyangshi[0].checked?'gradient':'gradientradial'
    temp2=event.srcElement.innerHTML.replace(/event.srcElement.innerHTML=temp2+""
    }}
    break;
    case 12: //立体
    if(event.srcElement.parentElement.id=="div1"){
    temp2=event.srcElement.innerHTML.replace(/event.srcElement.innerHTML=temp2+""
    }
    break;
    case 13: //边框
    if(event.srcElement.parentElement.id=="div1"){
    temp2=event.srcElement.innerHTML.replace(/event.srcElement.innerHTML=temp2+""
    event.srcElement.strokecolor=biankuangyanse.value
    biankuangcudu.options[biankuangcudu.selectedIndex].text=='0'?event.srcElement.stroked=false:event.srcElement.strokeweight=biankuangcudu.options[biankuangcudu.selectedIndex].text
    }
    break;
    case 14: //高级
    if(event.srcElement.parentElement.id=="div1"){
    gaojiobj=event.srcElement
    txt2.value=event.srcElement.outerHTML.replace(/>/g,">\n").replace(/ = /g,"=").replace(/\: /g,":").replace(/\; /g,";");gaoji1.style.left=event.x;gaoji1.style.top=event.y;gaoji1.style.display=''
    }
    }}}
    function rndcolor(theobjis){
    colortab.style.display="";colorid.innerHTML="";str1="";
    for(r=0;r<10;r++){str1+=""
    for(i=0;i<10;i++){
    tempcolor1=Math.round(Math.random()*255).toString(16)+Math.round(Math.random()*255).toString(16)+Math.round(Math.random()*255).toString(16);while(tempcolor1.length<6){tempcolor1+=Math.round(Math.random()*9)}
    str1+=""
    }str1+=""}
    colorid.innerHTML=str1+"
    "
    }
    function document.onmouseup(){
    if(event.srcElement.tagName=="BUTTON"){
    event.srcElement.blur();div1.focus();if(event.srcElement.className=="bon1"||event.button!=1)return true;
    for(i=0;ievent.srcElement.className="bon1";
    if(huabi[10].className=="bon1"){tianchong1.style.display='';tianchongbeijing.value=tianchongbeijing.value==''?huabibeijing.value:tianchongbeijing.value}else{tianchong1.style.display='none';}
    if(huabi[11].className=="bon1"){liti1.style.display='';litiyanse.value=litiyanse.value==''?huabibeijing.value:litiyanse.value}else{liti1.style.display='none';}
    if(huabi[12].className=="bon1"){biankuang1.style.display='';biankuangyanse.value=biankuangyanse.value==''?huabiyanse.value:biankuangyanse.value}else{biankuang1.style.display='none';}
    if(poly1!=null){ //清除记忆点
    poly1.points.value=oldvalue;oldvalue="";poly1=null;
    };wenzi1.style.display='none';tupian1.style.display='none';gaoji1.style.display='none';menu1.style.display='none'
    }}
    function forerr(){
    if(moveobj!=null&&bi==1){moveobj.style.left=xx-ckleft;moveobj.style.top=yy-cktop;ckleft=0;cktop=0;moveobj=null}
    if(moveobj!=null&&bi==2){
    if(moveobj.tagName!="line"){moveobj.style.left=ckleft;moveobj.style.top=cktop;moveobj.style.width=ckwid;moveobj.style.height=ckhei;}else{moveobj.to=ckto;}
    ckleft=0;cktop=0;ckwid=0;ckhei=0;ckto="";moveobj=null
    }
    line1.style.display='none';oval1.style.display='none';rect1.style.display='none';roundrect1.style.display='none'
    }
    function charuwenzi(){ //插入文字
    if(txt1.value=="")return alert('请先输入文字,在点击插入')
    var newtxt=document.createElement("");newtxt.innerText=txt1.value
    div1.appendChild(newtxt);wenzi1.style.display='none'
    }
    function charutupian(){ //插入图片
    if(file1.value=="")return alert('请先输入图片路径(HTTP://或FILE:///)格式,在点击插入')
    if(file1.value.indexOf("'")>-1)return alert("图片地址不可以含有违禁字符 ' 单引号")
    var newtxt=document.createElement("");
    div1.appendChild(newtxt);tupian1.style.display='none'
    }
分享:

文章评论