一、拖拽对话框

   <style>
.of{
width: 500px;
}
#link,#close{
text-decoration: none;
margin: 0 10px;
font-size: 20px;
}
#login{
width: 500px;
height: 500px;
background: gray;
display: none;
position: absolute;
left:;
top: 50px;
}
</style>
   <div class="of">
<a href="#" id="link">点击显示登录框</a>
<a href="#" id="close">点击关闭登录框</a>
</div>
<div id="login" class="login">按下鼠标在这里拖动</div><!-- 登录框 -->
<script>
//获取超链接,注册点击事件,显示登录框
document.getElementById("link").onclick=function(){
document.getElementById("login").style.display="block";
};
//获取关闭链接.注册点击事件,隐藏登录框
document.getElementById("close").onclick=function(){
document.getElementById("login").style.display="none";
};
//按下鼠标,移动鼠标,移动登录框
document.getElementById("login").onmousedown=function(e){
var spaceX=e.clientX-document.getElementById("login").offsetLeft;
var spaceY=e.clientY-document.getElementById("login").offsetTop;
//移动的事件
document.onmousemove=function(e){
var x=e.clientX-spaceX;
var y=e.clientY-spaceY;
document.getElementById("login").style.left=x+"px";
document.getElementById("login").style.top=y+"px";
};
};
//鼠标弹起事件
document.onmouseup = function() {
document.onmousemove = null;
};
</script>

二、高清放大镜

   <style>
#box{
height: 450px;
width: 450px;
position: relative;
}
.small{
width: 450px;
height: 450px;
border: 1px solid red;
position: absolute;
left:;
}
.mask{
width: 150px;
height:150px;
background: gray;
opacity: 0.4;
position: absolute;
cursor: move;
left:;
top:;
display: none;
}
.big{
width: 400px;
height: 400px;
border: 1px solid blue;
float: left;
overflow: hidden;
display: none;
position: absolute;
right: -450px;
}
</style>
    <div id="box">
<div id="small" class="small">
<img src="small.jpg" alt="">
<div class="mask" id="mask"></div>
</div>
<div id="big" class="big"><img src="big.jpg" alt="" id="bim"></div>
</div>
<script>
//获取元素
var box=document.getElementById("box");
var small=document.getElementById("small");
var mask=document.getElementById("mask");
var big=document.getElementById("big");
var bigImg=document.getElementById("bim");
//鼠标进入显示遮挡层和大图div
box.onmouseover=function(){
mask.style.display="block";
big.style.display="block";
};
box.onmouseout=function(){
mask.style.display="none";
big.style.display="none";
};
//鼠标的移动事件---鼠标在小图div上移动
small.onmousemove=function(e){
//鼠标此时的可视区域的横坐标e.clientX和纵坐标e.clientY
//主要是设置鼠标在遮挡层的之间显示
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;
//为遮挡层的left和top赋值
mask.style.left=x+"px";
mask.style.top=y+"px";
//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
//大图的横向最大移动距离
var maxX=bigImg.offsetWidth-big.offsetWidth;
//大图的纵向最大移动距离(比例取一个即可)
var maxY=bigImg.offsetHeight-big.offsetHeight;
//大图的横向移动的坐标(比例取一个即可)
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>

三、自制滚动条

   <style>
.box{
width: 604px;
height: 702px;
border: 1px solid #000;
overflow: hidden;
}
.content{
width: 550px;
border: 1px solid red;
float: left;
}
.scroll{
width: 50px;
height: 700px;
border: 1px solid blue;
float: right;
position: relative;
}
.bar{
width: 40px;
height: 80px;
background: red;
border-radius: 20px;
position: absolute;
top: 0;
left: 5px;
}
</style>
 <div class="box" id="box">
<div class="content" id="content">
开始文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字结束
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script>
//获取需要的元素
var box=document.getElementById("box");
var content=document.getElementById("content");
var scroll=document.getElementById("scroll");
var bar=document.getElementById("bar");
//设置滚动条(bar)的高度:通过比例来确定
//滚动条的高/装滚动条的div的高=box的高/文字div的高
//滚动条(bar)的高=装滚动条(scroll)div的高*box的高/文字div(content)的高
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的最大移动距离
//文字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>

四、元素的隐藏方式

    <input type="button" value="显示效果" id="btn">
<div id="dv" style="width: 200px;height: 200px;background:red;"></div>哈哈
<script>
document.getElementById("btn").onclick=function(){
//第一种方法:display="none",不占位置
document.getElementById("dv").style.display="none";
//第二种方法:visibility="hidden",占位置
document.getElementById("dv").style.visibility="hidden",占位置;
//第三种方法:透明度设置为0,占位置
document.getElementById("dv").style.opacity=0;
//第四种方法:高度设置为0,并且边框设置为0,占位置
document.getElementById("dv").style.height="0px";
document.getElementById("dv").style.border="0px solid red";
}
</script>

五、表格隔行变色

   <table border="1" id="tb">
<tr>
<th>关羽</th>
<td>青龙偃月刀青龙偃月刀青龙偃月刀</td>
</tr>
<tr>
<th>张飞</th>
<td>丈八蛇矛丈八蛇矛丈八蛇矛丈八蛇矛</td>
</tr>
<tr>
<th>赵云</th>
<td>青釭剑青釭剑青釭剑青釭剑青釭剑</td>
</tr>
<tr>
<th>马超</th>
<td>龙骑枪龙骑枪龙骑枪龙骑枪龙骑枪</td>
</tr>
</table>
<script>
//获取所有的行
trs=document.getElementById("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="blue";
}
function mouseoutHandle(){
this.style.backgroundColor=lastColor;
}
</script>

六、tab切换效果

   <style>
*{
margin:;
padding:;
font-size: 20px;
}
ul{
width: 500px;
margin: 50px auto;
}
li{
list-style: none;
float: left;
margin: 0 10px;
}
a{
text-decoration: none;
}
.current{
background: red;
}
</style>
   <ul id="uu">
<li class="current"><a href="http://www.baidu.com">首页</a></li>
<li><a href="javascript:void(0)">点击一下</a></li>
<li><a href="javascript:void(0)">点击两下</a></li>
<li><a href="javascript:void(0)">点击三下</a></li>
<li><a href="javascript:void(0)">点击四下</a></li>
</ul>
<script>
var ul=document.getElementById("uu");
var liObjs=ul.children;
for(var i=0;i<liObjs.length;i++){
//每个li中的i
var aObj=getFirstElementChild(liObjs[i]);
//注册点击事件
aObj.onclick=function(){
//第一件事:把这a所在的li的所有的兄弟元素的类样式移除
for(var j=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事:当前点击的a元素的父级元素li,设置背景颜色
this.parentNode.className="current";
return false;//阻止超链接跳转
}
}
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element){
if(element.firstElementChild){//支持
return element.firstElementChild;
}else{
var node=element.firstChild;//第一个子节点
while(node&&node.nodeType!=1){//存在,并且不是标签
node=node.nextSibling;//循环下一个节点,直到是标签,跳出循环
}
return node;//返回一个是标签的节点(即是元素了)
}
}
</script>

七、字符串拼接

    <input type="button" value="拼接" id="btn"><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<script>
//方法一:使用字符串进行拼接
// document.getElementById("btn").onclick=function(){
// var str="";
// //获取所以的文本框,返回一个对象
// var inputs=document.getElementsByTagName("input");
// //循环遍历到倒数第二个input
// for(var i=0;i<inputs.length-1;i++){
// if(inputs[i].type!="button"){//排除掉button按钮
// str+=inputs[i].value+"|";
// }
// }
// console.log(str+inputs[inputs.length-1].value);
// };
//方法二:使用数组进行拼接
document.getElementById("btn").onclick=function(){
var str=[];
//获取所有的文本框
var inputs=document.getElementsByTagName("input");
//循环遍历input,排除button按钮
for(var i=0;i<inputs.length;i++){
if(inputs[i].type!="button"){
//使用push方法追加
str.push(inputs[i].value);
}
}
//使用join方法改变字符串中间的符号
console.log(str.join("|"));
};
</script>

八、刷新评论

   <table border="1">
<tbody id="tbd">
<tr>
<td>李白</td>
<td>大河之酒天上来</td>
</tr>
</tbody>
</table>
昵称:<input type="text" id="username"><br>
<textarea cols="30" rows="10" id="tt"></textarea>
<input type="button" value="评论一下" id="btn">
<script>
document.getElementById("btn").onclick=function(){
//创建行
var tr=document.createElement("tr");
document.getElementById("tbd").appendChild(tr);
//创建第一列
var td1=document.createElement("td");
tr.appendChild(td1);
td1.innerHTML=document.getElementById("username").value;
//创建第二列
var td2=document.createElement("td");
tr.appendChild(td2);
td2.innerHTML=document.getElementById("tt").value;
//读取完数据删除内容
document.getElementById("tt").value="";
document.getElementById("username").value="";
};
</script>

案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)的更多相关文章

  1. JS---案例:高清放大镜

    案例:高清放大镜 分3步 1. 鼠标进入和离开,显示和隐藏遮挡层和大图div 2. 鼠标在小层上移动,鼠标横纵坐标,为可视区域坐标-遮挡层的宽高,鼠标移动的时候,在一个区域内移动,需要判断和定义下移动 ...

  2. element-ui dialog组件添加可拖拽位置 可拖拽宽高

    edge浏览器下作的gifhttp://www.lanourteam.com/%E6... 有几个点需要注意一下 每个弹窗都要有唯一dom可操作 指令可以做到 拖拽时要添加可拖拽区块 header 由 ...

  3. js 拖拽 鼠标事件,放大镜效果

    设置网站播放视频 只有一个是播放的 //需要引入jquery var v = $("video") v.bind("play",function(){ for( ...

  4. day52—JavaScript拖拽事件的应用(自定义滚动条)

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  5. JS Web API 拖拽对话框案例

    <style> .login-header { width: 100%; text-align: right; height: 30px; font-size: 24px; line-he ...

  6. 用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的

    简单实现 没有做兼容<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  8. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  9. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

随机推荐

  1. 初始NLTK

    NLTK官网:链接 Natural Language Toolkit NLTK corpora and lexical resources such as WordNet, along with a ...

  2. 【自学系列一】HTML5大前端学习路线+视频教程(完整版)

    今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了…… 我 ...

  3. oracle update left join 写法

    oracle update left join 写法 (修改某列,条件字段在关联表中) 案例: E:考核表 X,:用户表 USERNAME 关联 需求:修改营业部最高分 分析:通过登录账号的营业部OR ...

  4. Fiddler抓取https原理

    首先fiddler截获客户端浏览器发送给服务器的https请求, 此时还未建立握手.第一步, fiddler向服务器发送请求进行握手, 获取到服务器的CA证书, 用根证书公钥进行解密, 验证服务器数据 ...

  5. JDK8源码解析 -- HashMap(一)

    最近一直在忙于项目开发的事情,没有时间去学习一些新知识,但用忙里偷闲的时间把jdk8的hashMap源码看完了,也做了详细的笔记,我会把一些重要知识点分享给大家.大家都知道,HashMap类型也是面试 ...

  6. 一种电平转换的方法,使用CPLD

    参考应用笔记 http://www.doc88.com/p-0197252336968.html 前言 在原理图设计初期,可能涉及到引脚电平的转换操作,比如主FPGA的某BANK电平为1.5V,但外围 ...

  7. iOS CGContextRef/UIBezierPath(绘图)

    绘图的底层实现方法 注意:在drawRect方法中系统会默认创建一个上下文(C语言类型)在其他方法中不会有这样一个上下文(可以自己测试) @implementation DrawView //注意,在 ...

  8. layui切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Linux 之 软件安装

    单纯一个操作系统是没有办法满足我们的需求的,所以需要各种安装各种软件来满足我们日常工作.生活需求.一般情况下,Linux常用的安装方式有两种,以CentOS为例: 1.从源代码安装软件 将软件源代码编 ...

  10. 异常-No suppression parameter found for notification

    1 详细异常 Command Start is not currently available for execution. 关闭 kafka gateway 无法启动 java.lang.NullP ...