1、拖拽对话框
<div class="login-header"><a id="link" href="javascript:void(0)"></a></div>
<div id="login" class="login"></div>
<div id="bg" class="login=bg"></div>
<script src="common.js"></script>
<script>
my$("link").οnclick=function(){ //获取超链接,注册点击事件,显示登录框和遮挡层
my$("login").style.display="block";
my$("bg").style.display="block";
};
my$("closeBtn(关闭按钮)").οnclick=function(){ //获取关闭,注册点击事件,隐藏登录框和遮挡层
my$("login").style.display="none";
my$("bg").style.display="none";
};
my$("title(对话框id)").οnmοusedοwn=function(e){ //鼠标按下事件
var spaceX=e.clientX-my$("login").offsetLeft;
var spaceY=e.clientY-my$("login").offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve="null";
};
</script>
2、放大镜及遮挡层
<div class="box" id="box">
<div class="small">
<img src="">
<div class="mask"><div> //遮挡层
<div>
<div class="big">
<img="">
<div>
<div>
<script src="common.js"></script>
<script>
var box=my$("box");
var small=box.children[0];
var mask=small.children[1];
var bigImg=big.children[0];
box.οnmοuseοver=function(){
mask.style.display="block";
big.style.display="block";
};
box.οnmοuseοut=function(){
mask.style.display="none";
big.style.display="none";
};
small.οnmοusemοve=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 class="box" id="box">
<div class="content" id="content">文字内容</div>
<div id="scroll" class="scroll">装滚动条层
<div id="bar" class="bar">滚动条</div>
</div>
</div>
<script src="common.js"></script>
<script>
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.οnmοusedοwn=function(e){
var spaceY=e.clientY-bar.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){ //鼠标抬起,把移动去掉
document.οnmοusemοve=null;
};
</script>
4、元素隐藏
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
document.getElementById("btn").οnclick=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].οnmοuseοver=mouseoverHandle;
trs[i].οnmοuseοut=mouseoutHandle;
}
//鼠标进入,保存设置后颜色,离开,再回复
var lastColor="";
function mouseoverHandle(){ //鼠标进入
lastColor=this.style.backgroundColor;
this.style.backgroundColor="green";
}
function mouseoutHandle(){ //鼠标离开
his.style.backgroundColor=" lastColor";
}
6、tab切换
<div id="menu">
<ul id="list">
<li class="current"><a href="#"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
</div>
<script src="common.js"></script>
<script>
var liObjs=my$("list").getElementsByTagName("li");
for(var i=0;i<liObjs.length;i++){
var aObj=getFirstElement(liObj[i]);
}
aObj.οnclick=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、大量字符串拼接
<input type="button" value="拼接" id="btn"/>
<input type="text" value="">
<input type="text" value="">
<script src="common.js"></script>
<script>
document.getElementById("btn").οnclick=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").οnclick=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="";
};