HTML+CSS+JS
_acme_
这个作者很懒,什么都没留下…
展开
-
HTML元素的宽度计算
1.HTML块级元素的宽度/高度是不包括margin,border,padding的. 如图所示: 2.JS中的offsetWidth是包括border在内的. var oDiv=document.getElementById('div1'); alert("offsetWidth="+oDiv.offsetWidth); alert("width原创 2016-06-09 20:21:11 · 5863 阅读 · 0 评论 -
JS多物体运动
一个网页上肯定不只一个地方在运动,所以肯定要使用多物体运动这种技巧。其原理是每个物体都有自己的定时器ID。例子: 20个div一起运动.用鼠标移入移出来控制div的运动,类似于音乐背景的那种节奏跳动. 如图: 需要注意的地方: 1.必须给每个div都设置一个定时器,否则会混乱,设置定时器也有技巧,就是直接给div添加一个timerId属性,这可以保证唯一性和易区分性.2.多个div运动的时候原创 2016-06-12 22:45:43 · 816 阅读 · 0 评论 -
input file美化
input file太丑了,所以美化那是势在必行的。方法很多种。我就介绍两种方法.1.利用一个按钮去触发input file。 如图: html代码:<input type="text" id="show-path" style="height: 30px"/><button style="height: 36px" id="btn">选择文件</button><input type="原创 2016-07-11 22:56:58 · 3640 阅读 · 0 评论 -
JS任意元素的任意值运动
函数原型startMove(obj,name,iTag); 例如: startMove(obj,’width’,400);//width运动到width:400px startMove(obj,’height’,400);//height运动到height:400px startMove(obj,’opacity’,100);//透明度变到100(不透明)原创 2016-06-14 22:02:43 · 1116 阅读 · 0 评论 -
JS链式运动
链式运动说白了就是连锁反应,一个运动做完了到下一个运动。相对于任意值运动多了个函数参数。 函数如下:function startMove(obj,name,iTag,funEnd) { clearInterval(obj.timerId); obj.timerId = setInterval(function () {原创 2016-06-17 22:49:49 · 1023 阅读 · 0 评论 -
JS完美运动框架
通过把JSON作为参数传进函数可以做到多个元素同时运动。 例如:var jSon = {width:100px,height:100px}; for(var i in jSon) alert(i+’,’+jSon[i]); 结果是width,100px和height,100px函数如下:function startMove(obj,json,funEnd){ clearInt原创 2016-06-17 23:22:01 · 723 阅读 · 1 评论 -
幻灯片播放效果
和无缝滑动不一样,幻灯片播放是缓冲运动,而前者是呆板的匀速运动.效果如图: 简单思路如下(只说JS部分,CSS较为简单):图片的运动:通过ul的top值来让图片运动。比如开始的时候整个ul的top值是-1500px(这里每一张图片的高度都是300px),然后每隔2秒让top值变化300,用startMove函数(前面说过的运动框架)来让它运动。小方块的透明度变化:用一个变量记录当前播放到的位置,接原创 2016-06-18 18:52:37 · 869 阅读 · 0 评论 -
拖拽任意元素
其原理如下: 1.点击某个元素后,计算出当前鼠标位置和元素top和left的距离disX,disY.如图: 2.然后拖拽到某个地方后,再计算出元素左上角的坐标,如图: 3.之后直接给元素的left,top赋值就可以了.JS代码如下: window.onload = function () { var aDiv = document.getElements原创 2016-06-19 13:24:02 · 611 阅读 · 0 评论 -
自定义滚动条
这个和拖拽元素的原理一样,只是把拖拽范围限制在一个制定的父级内,就变成了滚动条。然后再获取出滑动系数,就可以通过滚动条控制其它元素的变化了.例子: HTML代码:<label for="">横滚动条:<input type="text" id="text1" /></label><label for="">竖滚动条:<input type="text" id="text2" /></label>原创 2016-06-19 14:50:52 · 566 阅读 · 0 评论 -
JS缓冲运动
还是用匀速运动的布局来说,这里只是改变了速度而已.缓存运动的特点: 1.距离越远速度越大 2.逐渐变慢,最后停止 速度=(目标值-当前值)/缩放系数需要注意的地方和匀速运动的一样,只是多了个向上和向下取整的问题,因为当速度降到1以下的时候,物体已经不在运动了,因为根本没有0.5个像素的说法.所以需要取整.还有因为速度是慢慢的减小,所以不存在到不了的位置,直接iTag == oDiv.offse原创 2016-06-11 22:53:04 · 559 阅读 · 0 评论 -
JS匀速运动
所谓的匀速运动就是速度不变的,比如无缝滑动展示图片就是匀速运动.这种运动的特点就是简单,呆板,不炫丽.例子: div匀速运动.效果如图: 要注意的地方: 1.有些时候不能精确的停在某个位置,所以当距离目标位置很近的时候直接强行把它移到到目标位置就可以了.2.开启定时器的时候一定要先清除原来的定时器,不然速度会累加,因为多个定时器一起在做一件事情,速度当然会加快.3.定时器里面要加if-else原创 2016-06-11 22:27:53 · 1411 阅读 · 0 评论 -
元素淡入淡出效果
HTML代码:<div id="div1"></div>CSS代码:*{margin:0;padding:0;} #div1{width:200px;height:200px;background: black;filter:alpha(opacity:30);opacity: 0.3;}JS代码: window.onload = function () {原创 2016-06-10 22:59:07 · 1065 阅读 · 0 评论 -
元素水平垂直居中
1.利用margin属性 margin是外边距属性,可以通过它来调整元素的位置margin:25% auto;如图: 好处:简单,而且随着浏览器的大小变化,位置也会跟着变,但看起来总是居中的 坏处:因为设置了margin属性,所以其它元素跟它的距离就会很大。 2.利用left,top加上margin来居住position: absolute; left: 50%; top: 50%;原创 2016-06-09 20:51:44 · 480 阅读 · 0 评论 -
CSS Sprite(css精灵)
大白话的说就是把需要用的图片都整合到一张图片上,然后利用css进行精确的切割出想要的图片.这里的“切割”不是真的把它切成另一个图片,而是按需要只“显示”这个图片的某一部分.例子: 如图是需要切割的图片. 里面是四种按钮的图片,现在需要把它们分别切割出来 代码如下: css样式: <style> *{margin:0;padding:0;} ul,li{li原创 2016-06-09 21:43:02 · 895 阅读 · 0 评论 -
JS知识点总结(一)
1.script标签是HTML标签,不是JS代码,这个标签里面可以放置HTML标签和脚本语言,如果要使用JS脚本语言的话最好加上一句type = “text/javascript” 虽然不加也没问题,但是这是一个好习惯2.parseInt和parseFloat不保证一定成功把字符串转换为数字 所以尽可能的保证传进去的字符串 只包含数字和小数点,不包含其它字符。 例如:12abcd – > 12原创 2016-06-09 21:52:55 · 751 阅读 · 0 评论 -
在页面上改变Div任意属性值
效果如图: HTML代码:<div id = "div"> <form action=""> <div id="text"> <label>属性名:<input type="text" name="name" id="name" /></label> <label>属性值:<input type原创 2016-06-09 22:31:21 · 3832 阅读 · 0 评论 -
简易弹出登录框
效果如图: 登陆按钮图: 思路如下: 先创建一个登陆按钮–>点击登陆按钮后显示登录框–>除了登录框其它的背景变成透明的灰色.HTML代码:<!--登陆按钮--> <div id="login"><a href="javascript:;">登录</a></div> <!--登陆按钮结束--> <!--登陆框 --> <div id="login-box">原创 2016-06-09 23:42:42 · 2534 阅读 · 1 评论 -
无缝滑动展示图片
效果如图: 用到的素材: 原理如下: 假设一开始向左移动 初始位置如图: 移动一圈后如图: 最重要的来了,因为左边已经没有照片了,所以接着滑动的话就会出现空白.这时候的条件是offsetLeft == -offsetWidth/2,所以当出现offsetLeft < -offsetWidth/2的时候就把整个ul给还原到(0,0)位置,如图: 因为这个‘拉回去’的过原创 2016-06-10 16:01:25 · 1477 阅读 · 0 评论 -
简易数码时钟
通过这个小例子复习一下Date对象的基本使用. 还可以用Date对象做定时器,计时器等等.效果如图: 可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字,则定时切换图片即可.HTML代码:<div id="clock"> <p></p> <p></p> <p></p></div>CSS代码: *{margin:0;paddi原创 2016-06-10 20:23:35 · 970 阅读 · 0 评论 -
JS实现"分享到"侧边栏
其原理是鼠标移入分享到,侧边栏就会慢慢出现,移除则慢慢消失效果如图: HTML代码:<div id="div1"> <p><a href="">QQ空间</a></p> <p><a href="">新浪微博</a></p> <p><a href="">......</a></p> <span id="sp">分享到</span></div>CSS代码:*{marg原创 2016-06-10 22:04:25 · 1832 阅读 · 0 评论 -
带虚框的拖拽
其实这个原理也很简单.就是当鼠标按下的时候元素周围出现一个虚框,然后当鼠标移动的时候,只移动虚框,元素不移动,然后当鼠标抬起的时候,直接把元素移动到虚框位置,并且虚框消失.例子: CSS代码: *{margin:0;padding:0;} #div1{width:100px;height: 100px;background: red;position: absolute;left:原创 2016-06-19 15:21:23 · 1649 阅读 · 0 评论