webapi day7

1、拖拽对话框

my$("link").onclick=function(){ //获取超链接，注册点击事件，显示登录框和遮挡层

my$("login").style.display="block";

my$("bg").style.display="block";

};

my$("closeBtn(关闭按钮)").onclick=function(){ //获取关闭，注册点击事件，隐藏登录框和遮挡层

my$("login").style.display="none";

my$("bg").style.display="none";

};

my$("title(对话框id)").onmousedown=function(e){ //鼠标按下事件

var spaceX=e.clientX-my$("login").offsetLeft;

var spaceY=e.clientY-my$("login").offsetTop;

document.onmousemove=function(e){

var x=e.clientX-spaceX+250; //根据对话框margin加减

var y=e.clientY-spaceY-140;

my$("login").style.left=x+"px";

my$("login").style.top=y+"px";

};

document.onmouseup=function(){

document.onmousemove="null";

};

</script>

2、放大镜及遮挡层

<div class="mask"><div> //遮挡层

<div>

<img="">

<div>

var box=my$("box");

var small=box.children[0];

var mask=small.children[1];

var bigImg=big.children[0];

box.onmouseover=function(){

mask.style.display="block";

big.style.display="block";

};

box.onmouseout=function(){

mask.style.display="none";

big.style.display="none";

};

small.onmousemove=function(e){

var x=e.clientX-mask.offsetWidth/2;

var y=e.clientY-mask.offsetHeight/2;

x=x<0?0:x;

y=y<0?0:y;

x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;

y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;

mask.style.top=y-100+"px";

遮挡层移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离

var maxX=bigImg.offsetWidth-big.offsetWidth; //大图横向最大移动距离

var bigImgMoveX=x*maxX/(small.offsetWidth-mask.offsetWidth); //大图横向移动距离

var bigImgMoveY=y*maxX/(small.offsetWidth-mask.offsetWidth); //大图纵向移动距离

bigImg.style.marginLeft=-bigImgMoveX+"px"; //设置图片移动

bigImg.style.marginTop=-bigImgMoveY+"px";

};

</script>

3、滚动条

<div id="scroll" class="scroll">装滚动条层

</div>

var box=my$("box");

var content=my$("content");

var scroll=my$("scroll");

var bar=my$("bar");

滚动条高/装滚动条高=box的高/文字div高

var height=scroll.offsetHeight*box.offsetHeight/content.offsetHeight;

bar.style.height=height+"px";

bar.onmousedown=function(e){

var spaceY=e.clientY-bar.offsetTop;

document.onmousemove=function(e){ //移动事件

var y=e.clientY-spaceY;

y=y<0?0:y;

y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;

bar.style.top=y+"px";

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty(); //鼠标移动文字不被选中

//滚动条移动距离/文字div移动距离=滚动条最大移动距离/文字div最大移动距离

var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);

content.style.marginTop=-moveY+"px";

};

document.onmouseup=function(){ //鼠标抬起，把移动去掉

document.onmousemove=null;

};

</script>

4、元素隐藏

document.getElementById("btn").onclick=function(){

my$("dv").style.display="none"; //隐藏不占位

my$("dv").style.visibility="hidden"; // 隐藏占位

my$("dv").style.opacity=0px; // 隐藏占位

my$("dv").style.border="0px solid red "; // 隐藏占位

};

</script>

5、表格隔行变色

var trs=my$("j_tb").getElementsByTagName("tr")

for(var i=0;i<trs.length;i++){

trs[i].style.backgroundColor=i%2==0?"red":"yellow";

trs[i].onmouseover=mouseoverHandle;

trs[i].onmouseout=mouseoutHandle;

}

//鼠标进入，保存设置后颜色，离开，再回复

var lastColor="";

function mouseoverHandle(){ //鼠标进入

lastColor=this.style.backgroundColor;

this.style.backgroundColor="green";

}

function mouseoutHandle(){ //鼠标离开

his.style.backgroundColor=" lastColor";

}

6、tab切换

</ul>

</div>

var liObjs=my$("list").getElementsByTagName("li");

for(var i=0;i<liObjs.length;i++){

var aObj=getFirstElement(liObj[i]);

}

aObj.onclick=function(){

//把a所在li所有兄弟样式移除

for(var j=0;j<liObjs.length;j++){

liObjs[j].removeAAttribute("class");

}

this.parentNode.className="current"; 点击a父级元素li

return false; //组织超链接跳转

};

}

</script>

7、大量字符串拼接

document.getElementById("btn").onclick=function(){

var str=[];

var inputs=document.getElementsByTagName("input");

for(var i=0;i<inputs.length;i++){

if(inputs[i].type!="button"){

str.push(inputs[i].value);

}

console.log(str.join("|"));

};

</script>

8、无刷新评论

document.getElementById("btn").onclick=function(){

var userName=my$("userName"); //获取昵称

var tt=my$("tt"); //获取评论

var tr=document.creatElement("tr"); //创建行

my$("tbd").appendChild("tr");

var td1=document.creatElement("td"); //创建列

tr.appendChild(td1);

td1.innerHTML=userName.value;

var td2=document.creatElement("td");

tr.appendChild(td2);

td1.innerHTML=tt.value;

//清空

userName.value="";

tt.value="";

};

猜你喜欢