javascript基础08
发现今天居然没有要写，那我就写写之前做的笔记吧。
这是事件的深入：
拖拽逻辑：
第一个： onmousedown : 选择元素
第二个： onmousemove : 移动元素
第三个：onmouseup : 释放元素
各浏览器在拖拽上都有问题；就是选中文字，就会产生问题
原因：当鼠标按下的时候选中文字就可以拖拽文字，这是浏览器的默认行为；
解决：阻止默认行为 -》在onmousedown时return false；
ie8以下无效；
ie8以下 ：
obj.setCapture(); 设置全局捕获，当我们给一个元素设置全局捕获以后，
那么这个意思就会监听后续触发生的所有事件，当有事件发生时候，就会被当前设置
了全局捕获的元素所触发
ie: 有，且效果
ff:有，但没有效果
非标准下ie ：
obj.setCapture(); 可以是只执行目标函数，实现到不自动选中文字
//只执行一次，要不在函数里被调用会出现不断执行的怪事。
执行当前对象的所有的事件函数的一次，无论事件在哪被执行。
对应的释放全局捕获
obj.releaseCapture();
可以使用其来在ie里阻止默认行为
碰撞检测
在web里是没有真正的碰撞的；只是边界的重合检测
九宫格的思路方式，检测边界重合
排除不能重合的情况 使用或 ||
每日一推：
作业题：
在做时想到看到一个事情，就是都是运动，那能不能把运动都封装起来了，所以就做了个运动的封装。
运动代码：
/*使用调用，obj对象，attr属性，speed速度，想达到的值，回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
function doMove(obj,attr,speed,iTarget,fn){
if(attr=="opacity"){
obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
}else{
obj.len=iTarget-parseFloat(getStyle(obj,attr));
}
/*这里判断方向，在初始点后的为负数，在初始点前为正数*/
speed=obj.len>0?speed:-speed; clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(!obj.num){
obj.num=0;
}
if(attr=="opacity"){
obj.num=parseFloat(getStyle(obj,attr))*100+speed;
}else{
obj.num=parseInt(getStyle(obj,attr))+speed;
}
/*这里是判断到了目标点没有，到了就停止定时器*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
obj.num=iTarget;
clearInterval(obj.timer);
fn && fn();
}
if(attr=="opacity"){
obj.style[attr]=obj.num/100;
}else{
obj.style[attr]=obj.num+"px";
}
},30); }
/*获取css属性值的，会获取表现出现的值*/
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
后面题目的运动都是套用这个运动代码的。
第一题：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#imgBox{
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
#imgBox li{
position: relative;
float: left;
width: 400px;
height: 285px;
margin-left: 10px;
margin-top: 10px;
overflow: hidden;
opacity: 1;
}
#imgBox li img {
width: 400px;
height: 285px;
}
#imgBox li p{
position: absolute;
top: 45%;
left: -125px;
font-size: 20px;
width: 120px;
text-align: center;
line-height: 40px;
border:2px solid #ff7600;
background: rgba(0,0,0,0.6);
color: #fff;
font-weight: bold;
border-radius: 15px;
z-index: 5;
}
#imgBox li .mask,#imgBox li .Bubble{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#imgBox li .Bubble{
z-index: 10;
}
#imgBox li .mask{
background: #000;
opacity: 0;
filter: alpha(opacity:40);
}
</style>
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript"> window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
start(i);
}
} /*写成页面小组件，然后循环套用即可，index就是下标，只要获取li的下标
传参进出，就可以了
*/ function start(index){
var aLi=document.getElementsByTagName("li");
var oMask=aLi[index].querySelector(".mask");
var oP=aLi[index].querySelector(".text");
var oBubble=aLi[index].querySelector(".Bubble");
var w=aLi[index].offsetWidth;
var w1=w-oP.offsetWidth;
oBubble.onmouseover=function(){
oP.style.display="block";
oP.style.left=-oP.offsetWidth+'px';
doMove(oMask,"opacity",4,40);
doMove(oP,"left",10,w1);
}
oBubble.onmouseout=function(){
doMove(oMask,"opacity",4,0);
if(parseInt(oP.style.left)<w1){
oP.style.left=-oP.offsetWidth+'px';
oP.style.display="none";
}else{
doMove(oP,"left",10,w);
}
}
} </script>
</head>
<body>
<ul id="imgBox">
<li><img src="./img/1.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
<li><img src="./img/2.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
<li><img src="./img/3.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
<li><img src="./img/4.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
<li><img src="./img/5.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
<li><img src="./img/6.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
</ul>
</body>
</html>
第二题：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海贼王</title>
<!-- 这是基于html5做的，使用了HTML5里的disabled这个属性 -->
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript">
window.onload=function(){
/*获取最外层的盒子，指的是包着这些内容，自己定义的盒子*/
var oImgBox=document.querySelector(".imgBox");
/*调用函数*/
pull(oImgBox); } function pull(obj){
/*默认速度,慢*/
var speed=1;
/*获取元素*/
var oBtn=obj.querySelectorAll(".btnG input[type='button']"),
oImg=obj.querySelector("img"),
oMask=obj.querySelector(".mask"),
aBtn=obj.querySelectorAll(".speed-btnG input[type='button']"),
aCount=obj.querySelectorAll(".count span"),
/*获取遮罩层初始高度*/
dh=oMask.offsetHeight,
/*获取图片高度*/
h=oImg.offsetHeight;
/*设置空变量预备装定时器(每个定时器都有一个id，而定时器返回的值就是这个id)*/
obj.timer=null;
/*获取图片高度，返回到页面的显示出来*/
aCount[1].innerHTML=h;
/*开档，快中慢*/
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
speed=1;
for(var j=0;j<this.index;j++){
speed+=5;
}
}
}
/*开定时器是为了监听高度的变化，然后把高度返回到页面*/
clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.h1=parseInt(getStyle(oMask,"height"));
if(obj.h){
if(obj.h==obj.h1){
aCount[0].innerHTML=obj.h;
}else{
obj.h=obj.h1;
}
}else{
obj.h=obj.h1;
}
},10);
/*点击打开的点击事件*/
oBtn[0].onclick=function(){
this.disabled=true;
oBtn[1].disabled="";
doMove(oMask,"height",speed,h);
}
/*点击关闭的点击事件*/
oBtn[1].onclick=function(){
this.disabled=true;
oBtn[0].disabled="";
doMove(oMask,"height",speed,dh);
}
}
</script>
<style>
#container{
margin: 0 auto;
border:1px solid #888;
padding: 10px;
width: 300px;
}
#container .imgBox{
position: relative;
}
#container .count{
position: absolute;
top: 0;
left: 125px;
margin: 0;
z-index: 10;
color: #778899;
}
#container img{
width: 300px;
height: 500px;
display: block;
}
#container .mask{
position: absolute;
bottom: 0;
left: 0;
background: #fff;
width: 100%;
height: 35px;
}
#container .btnG{
position: absolute;
top: 20px;
left: 105px;
}
.speed-btnG{
position: absolute;
bottom: -45px;
left: 35%;
}
</style>
</head>
<body>
<div id="container">
<div class="imgBox">
<p class="count"><span>100</span>/<span>500</span></p>
<img src="./img/hzw.jpg" alt="">
<div class="mask">
<div class="btnG">
<input type="button" value="打开">
<input type="button" value="关闭" disabled>
</div>
</div>
<div class="speed-btnG">
<input type="button" value="慢">
<input type="button" value="中">
<input type="button" value="快">
</div>
</div>
</div>
</body>
</html>
第三题：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色表</title>
<script type="text/javascript">
window.onload=function(){
/*create(第一个参数,第二个参数)
*第一个参数:表格的宽度
*第二个参数:颜色的数量(这个数量是(255/参数)向上取整后得到的数字num
，然后这个数字三次方得到的值就是颜色数量了)
不过由于最后一行如果不能形成一行的宽度，就会删除掉这行，所以表现出来的
颜色数量很可能会少一些
*/ // 调用函数，传入参数,实现一步到位颜色表喔~~
// 妈妈再也不担心重复操作出错了
create(40,40); }
/*创建表格，和别的元素*/
function create(len,amount){
var table=document.createElement("table");
var p1=document.createElement("p");
var p2=document.createElement("p");
var num=0;
var count=Math.floor(colorBox(amount).length/len);
table.id="color-table";
p1.className="color-code";
p2.className="color-code";
p1.innerHTML="颜色代码：RGB(0,0,0)";
p2.innerHTML="颜色代码：#000000";
for(var i=0;i<count;i++){
var tr=document.createElement("tr");
for(var j=0;j<len;j++){
var td=document.createElement("td");
td.index=++num;
td.style.background="rgb("+colorBox(amount)[num]+")";
td.onclick=function(){
document.body.style.background="rgb("+colorBox(amount)[this.index]+")";
var arr=colorBox(amount)[this.index].split(",");
for(var i=0;i<arr.length;i++){
arr[i]=Number(arr[i]).toString(16);
if(arr[i].length<2){
arr[i]="0"+arr[i];
}
} p1.innerHTML="颜色代码：RGB("+colorBox(amount)[this.index]+")";
p2.innerHTML="颜色代码：#"+arr.join("");
}
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
document.body.appendChild(p1);
document.body.appendChild(p2);
} /*颜色代码数据的存储*/
function colorBox(num){
var box=[];
for(var i=0;i<=255;i+=num){
for(var j=0;j<=255;j+=num){
for(var z=0;z<=255;z+=num){
box.push(i+","+j+","+z);
}
}
}
return box;
} </script>
<style>
h1{
width: 100px;
margin: 0 auto;
}
#color-table{
margin: 0 auto;
}
td{
display: inline-block;
margin: 2px;
cursor: pointer;
border:1px solid #000;
width: 10px;
height: 10px;
padding: 5px;
}
.color-code{
width: 330px;
margin: 20px auto 0;
font-weight: bold;
background: #fff;
height: 30px;
color: #00BFFF;
text-align: center;
font-size: 20px;
line-height: 30px;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>颜色表</h1>
</body>
</html>
javascript基础08的更多相关文章
- JavaScript基础08——DOM
DOM的概念 DOM是document Object Model的缩写,简称文档对象模型.他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式 所谓的DOM是以家族的形式描述HTML.父子 ...
- JavaScript基础入门08
目录 JavaScript 基础入门08 DOM 介绍 绑定事件 给一组元素绑定事件 节点 节点树 节点类型 选取文档内容 通过id选取元素 通过指定的标签名选取元素 用指定的css类来选取元素 通过 ...
- JavaScript基础系列目录（2014.06.01~2014.06.08）
下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...
- JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
- javaScript基础之闭包
不管是Jquery还是EXTJS,现代的js框架中大量应用了js的一些特性,比如:匿名函数,闭包等等,导致源代码非常难以阅读. 不过要想真正的使用好前台的UI技术,还是需要去深入的理解这些概念. ...
- JavaScript基础知识（一）
一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...
- 回归JavaScript基础（六）
主题:引用类型Date.RegExp的介绍. 上节主要主要介绍了Object.Array引用类型.这节将继续为大家介绍引用类型,并对书中的一些知识点进行总结与归纳,也借此巩固自己对JavaScript ...
- JavaScript学习(1)之JavaScript基础
JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...
- javascript基础入门知识点整理
学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...
随机推荐
- VS2010安装异常中断后无法安装的解决方法（安装时发生严重错误）
最近,因为公司开发的需要,对开发环境进行全面的升级,在这其中也遇到了不少问题,在之后将陆续整理出来,以便以后查看. 之前开发环境:ArcGIS9.3,ArcEngine9.3,Oracle10g,Ar ...
- poj 3264 Balanced Lineup (RMQ)
/******************************************************* 题目: Balanced Lineup(poj 3264) 链接: http://po ...
- 学习Linux所需软件
一: VMware虚拟机 二:VMware_Install_Cleaner 虚拟机卸载 三:XShall
- 6本Android开发必备图书
学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好书往往可以让你少走很多弯路,事半功倍.今天与大家分享一些Android开发值得一读的书籍,希望对新手安卓开发者们有所帮助. 1. ...
- freeCodeCamp:Factorialize a Number
计算一个整数的阶乘 如果用字母n来代表一个整数,阶乘代表着所有小于或等于n的整数的乘积. 阶乘通常简写成 n! 例如: 5! = 1 * 2 * 3 * 4 * 5 = 120 /*思路 阶乘等于fo ...
- Linux内核实现中断和中断处理（二）
第一部分移步传送门召唤!!:http://www.cnblogs.com/lenomirei/p/5562086.html 上回说了Linux内核实现中断会把中断分为两部分进行处理,上回讲了上部分,这 ...
- Win7 64位 VS2013环境编译boost1_58_0
备忘,发现好多不常用的东西不记笔记再想用要重新花时间找,所以试着开始记笔记,写入博客吧. 首先去官网下最新的版本 http://www.boost.org/ 写本文时boost最新版本为1_58_0, ...
- 【树上莫队】【带修莫队】【权值分块】bzoj4129 Haruna’s Breakfast
#include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...
- LLVM 初探<一>
一.安装LLVM LLVM是一个低级虚拟机,全称为Low Level Virtual Machine.LLVM也是一个新型的编译器框架,相关的介绍Wikipedia. 现在LLVM的版本已经有很多,根 ...
- 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
js代码: function isMouseLeaveOrEnter(e, handler) { var reltg=e.relatedTarget?e.relatedTarget:e.type==' ...