Dom轮播图三级联动 Dom常用尺寸

1.Dom轮播图


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>dom轮播图</title><style type="text/css">* {margin: 0;padding: 0;}.wp {width:1000px;height:600px;position: relative;border: 1px #f00 solid;margin: 30px auto 0;overflow: hidden;}.list {height:600px;position: absolute;left: 0;top: 0;display: flex;}.list img {display: block;height:600px;width:1000px;}</style></head><body><div class="wp"><div class="list"></div></div></body>
</html>
<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var list = document.querySelector('.list');var index = 0;var timmer;//定义创建图片函数function createImg(){index++;if(index>4){index=1;}var img = document.createElement('img');img.src = '../images/'+index+'.jpg';list.appendChild(img);}//定义删除图片函数function delImg(){var one = list.firstElementChild;list.removeChild(one);}//创建两个for(var i=0;i<2;i++){createImg();}//设置计时器timmer = setInterval(move,20);var t = 0;var b = 0;var c = -1000;var d = 100;// 移动函数function move(){t++;list.style.left = Tween.bounceOut(t,b,c,d)+'px';if(t==d){t=0; //重置t=0//停止计时器clearInterval(timmer);//创建imgcreateImg();//删除第一个imgdelImg();list.style.left = 0;//设置下一次运动，使用延时计时器setTimeout(function(){timmer = setInterval(move,20);},1500);}}</script>

2.三级联动


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>三级联动</title><style type="text/css">select {width:120px;margin-left:20px;}</style></head><body><select id="sheng"></select>省<select id="shi"></select>市<select id="xian"></select>县</body>
</html>
<script type="text/javascript">var aPro = ['河南省','河北省'];var aCity = [ ['郑州市','开封市'],  ['石家庄','邯郸市']  ];//aCon[0][0]var aCon = [[ ['二七区','金水区','高新区','中原区'],['开封县','兰考县','尉氏县','杞县']],[  ['石家庄1区','石家庄2区','石家庄3区','石家庄4区'],['邯郸1县','邯郸2县','邯郸3县','邯郸4县','邯郸5县']]];var sheng = document.getElementById("sheng");var shi = document.getElementById("shi");var xian = document.getElementById("xian");//设置省的下标var proIndex = 0;//设置市的下标var cityIndex = 0;//给省添加选项for(var i=0;i<aPro.length;i++){var opt = document.createElement('option');opt.innerHTML = aPro[i];sheng.appendChild(opt);}//给市添加可选项function changeCity(){//清空里面的内容，因为之前可能会有其他内容shi.innerHTML = '';//创建对应的城市选项for(var i=0;i<aCity[proIndex].length;i++){var opt = document.createElement('option');opt.innerHTML = aCity[proIndex][i];shi.appendChild(opt);}}changeCity();//给县添加可选项function changeCon(){//清空里面的内容，因为之前可能会有其他内容xian.innerHTML = '';//创建对应的县选项for(var i=0;i<aCon[proIndex][cityIndex].length;i++){var opt = document.createElement('option');opt.innerHTML = aCon[proIndex][cityIndex][i];xian.appendChild(opt);}}changeCon();//给省添加change事件,内容改变的时候触发sheng.onchange = function(){// alert(this.value);var val = this.value;if(val=='河南省'){proIndex = 0;}else{proIndex = 1;}changeCity();changeCon();};//给市添加change事件shi.onchange = function(){var val = this.value;//获取市的下标cityIndex = aCity[proIndex].indexOf(val);changeCon();};
</script>

3.Dom常用尺寸


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>dom常用尺寸</title><style type="text/css">* {margin: 0;padding: 0;}.wp {width:200px;height: 200px;background: #04BE02;border:20px #f00 solid;margin: 50px auto 0;padding:50px 30px;}#wp1 {border:20px #000 solid;width:400px;height:400px;padding:100px;background:#FF6600;margin:50px auto;}#son1 {border:20px #999 solid;width:200px;height:200px;padding:50px;background:#04BE02;margin:50px auto;position: relative;}#son2 {border:20px #f00 solid;width:100px;height:100px;margin:20px auto;background:#ff0;}.far {width:200px;height: 200px;border:20px #f00 solid;overflow: auto;margin: 50px auto;padding: 50px;}.child {width:500px;background: #04BE02;padding: 50px;}</style></head><body><div id="wp1"><div id="son1"><div id="son2"></div></div></div><hr/><div class="wp"></div><hr/><div class="far"><div class="child">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：滕王高阁临江渚，佩玉鸣鸾罢歌舞。画栋朝飞南浦云，珠帘暮卷西山雨。闲云潭影日悠悠，物换星移几度秋。阁中帝子今何在？槛外长江空自流。</div></div><button type="button" id="btn">点击回到顶部</button></body>
</html>
<script type="text/javascript">
/*
1. 内尺寸clientWidth，clientHeight，clientLeft，clientTopclientWidth(元素宽度) = 左右padding + width(不包括滚动条15px)clientHeight(元素高度) = 上下padding + height(不包括滚动条15px)clientLeft 元素左边框的大小clientTop 元素上边框的大小以上属性均输出数字
*/
var wp = document.querySelector('.wp');
console.log('clientWidth', wp.clientWidth);
console.log('clientHeight', wp.clientHeight);
console.log('clientLeft', wp.clientLeft);
console.log('clientTop', wp.clientTop);/*
2.外尺寸
offsetParent
offsetWidth offsetHeight offsetLeft offsetTop
offsetWidth = 左右padding + width(包括滚动条15px)+左右boder的宽
offsetHeight = 上下padding+height(包括滚动条15px)+上下boder的宽
offsetParent 元素的定位父级，也就是具有定位属性的父级。如果元素的所有父级都不是定位父级，在标准浏览器下，offsetParent是body，在ie下是html，因此需要保证html和body统一。html和body的offsetParent是null
offsetLeft 当前元素的左外边框，到它的offsetParent的左内边框的距离
offsetTop 当前元素的上外边框，到它的offsetParent的上内边框的距离
*/
var son2 = document.getElementById("son2");
console.log('offsetWidth', son2.offsetWidth);
console.log('offsetHeight', son2.offsetHeight);
console.log('offsetParent', son2.offsetParent);
console.log('offsetLeft', son2.offsetLeft);
console.log('offsetTop', son2.offsetTop);var body = document.body;
var html = document.documentElement;
console.log(body.offsetParent,html.offsetParent);// 计算#son2 到页面顶部的距离
console.log(son2.offsetTop + son2.offsetParent.offsetTop + son2.offsetParent.clientTop);
// 定义一个函数，计算元素到顶部距离
function getTop(obj){// 判断obj是不是body或者htmlif(obj.offsetParent==null){return 0;}return obj.offsetTop + obj.offsetParent.clientTop + getTop(obj.offsetParent);
}
console.log(getTop(son2));
/*
3.滚动尺寸
scrollWidth scrollHeight scrollTop scrollLeft
scrollWidth 当子元素的盒模型的宽度大于当前元素盒模型的宽的时候，scrollWidth = 子元素的盒模型总宽度小于 + 当前元素的左padding；如果子元素的盒模型总宽度小于当前元素的宽度，那么 scrollWidth = 当前元素的width + 当前元素的左右padding
scrollHeight 它与上面的类似
scrollTop 元素内部卷上去的高度
scrollLeft 元素内部卷到左侧的距离scrollTop 和 scrollLeft 支持赋值*/
var far = document.querySelector('.far');
console.log(far.scrollWidth);
console.log(far.scrollHeight);console.log(html.scrollTop);
var btn = document.getElementById("btn");
var timmer;btn.onclick = function(){var top = html.scrollTop;timmer = setInterval(function(){top--;if(top<=0){html.scrollTop = 0;clearInterval(timmer);}html.scrollTop = top;},5);
};// 滚动事件
window.onscroll = function(){console.log(html.scrollTop);
};
</script>

Dom轮播图三级联动 Dom常用尺寸相关推荐

js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件常见触屏事件: 触屏touch事件说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
在微信小程序中，swiper组件（轮播图4）的常用属性
swiper组件的常用属性属性类型默认值说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...
解决bootstrap轮播图因为图片尺寸造成的问题
发现问题在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差解决方案我们先找到轮播图的相关代码,如下: <div id="carousel ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
Web APIs：移动端网页特效--移动端常用开发框架（Bootstrap）及阿里百秀轮播图案例
框架概述框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案.框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发. 前端常用的框架有 Bootstrap.V ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）
PC端轮播图 1. 第一种轮播图(自动慢慢滑动,多用于展示) HTML部分: <div id="box"> <ul id="banner"&g ...
Swiper实现两种常用轮播图
效果图: 市面上实现的网页中的轮播图大多都是用Swiper实现的,主要就是这两种,其实没必要写这篇的,写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我. ...

Dom轮播图三级联动 Dom常用尺寸

1.Dom轮播图

2.三级联动

3.Dom常用尺寸

Dom轮播图三级联动 Dom常用尺寸相关推荐

最新文章

热门文章

Dom轮播图 三级联动 Dom常用尺寸

1.Dom轮播图

2.三级联动

3.Dom常用尺寸

Dom轮播图 三级联动 Dom常用尺寸相关推荐

最新文章

热门文章

Dom轮播图三级联动 Dom常用尺寸

Dom轮播图三级联动 Dom常用尺寸相关推荐