web前端
胖虎的沉思录
这个作者很懒,什么都没留下…
展开
-
Position属性四个值
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者z-index 声明)。 2、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。可通过z-index进行层次分级。 3、r转载 2017-08-01 14:16:44 · 871 阅读 · 0 评论 -
拖曳案例
window.onload = function () { //需求:在指定位置按住鼠标左键移动对话框。 //分析:鼠标按下,触动事件,移动在更换对话框的位置。 //鼠标按下onmousedown 鼠标弹起:onmouseup 鼠标移动onmousemove //步骤:原创 2017-09-17 19:40:04 · 296 阅读 · 0 评论 -
手风琴效果
调用jQuery的animate动画函数,能实现动画变形,以此实现动画效果。 window.onload = function () { //需求:鼠标放入到li中该盒子变宽,其他的盒子变窄。移开大盒子,回复原样。 //步骤: //1.给li添加背景 //2.绑定onmouseover事件,鼠标放入原创 2017-09-17 18:47:41 · 358 阅读 · 0 评论 -
jQuery下拉框
用jQuery实现动画效果,简单到令人发指 $(document).ready(function () { //需求:鼠标放入一级li中,让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 jqli.mouseenter(function ()原创 2017-09-17 17:07:01 · 303 阅读 · 0 评论 -
旋转轮播图
animate:function animate(obj,json,fn) { // 第一参数 动的对象 2 attr 动的那个属性 3 属性值少多少 clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定原创 2017-09-17 15:48:34 · 346 阅读 · 0 评论 -
无缝轮播图
超重要动画封装函数: function animate(ele,target){ clearInterval(ele.timer); var speed = target>ele.offsetLeft?10:-10; ele.timer = setInterval(function () {原创 2017-09-17 14:49:36 · 331 阅读 · 0 评论 -
前端JS案例(一):倒计时
倒计时案例解析:1、设置var timeId = setInterval(function(){},时间毫秒); 通常为每隔1000毫秒执行一次。2、在函数中设置if条件,在某种情况下清除timeId,clearInterval(timeId);3、如下所示设置小时、分钟、秒 var totalSec = 3*60*60; var hour = Math.f原创 2017-08-15 16:05:11 · 1469 阅读 · 0 评论 -
css 盒子模型理解
转载自:http://www.cnblogs.com/clearsky/p/5696286.html盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用。一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元转载 2017-08-22 00:23:44 · 236 阅读 · 0 评论 -
web书城开发总结
一、技术点1、使用Base64格式的图片制作ICON,页面可以直接加载,减少请求,加快首屏数据的显示速度。字符串包含了数据信息:url(data:image/png;base 64,图片字符串信息)缺点:不利于维护2、CSS3比Base64体积小,但不易于维护,存在兼容性问题。3、提高h5web性能:1、减少或避免repaint、reflow2、尽量缓存所有可以缓存的数原创 2017-08-19 21:32:21 · 743 阅读 · 0 评论 -
浅析HTML5的10大优势
摘要:你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HTML5是web开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来转载 2017-08-05 14:14:12 · 2258 阅读 · 0 评论 -
less基础知识
@media screen and (min-width: 480px) { body { background-color: lightgreen; } }@media screen and (max-width: 300px) { body { background-color: skyblue;原创 2017-08-16 17:22:15 · 184 阅读 · 0 评论 -
前端JS案例(二):自动轮播+手动拨动
一、自动轮播html代码: JS代码:function banner() { //1 获取变量 // 屏幕的宽度 var width =原创 2017-08-15 19:45:17 · 6667 阅读 · 1 评论 -
居中方式
1、已经知道块元素的宽高,绝对定位.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */}2、Css原创 2017-08-01 14:26:42 · 1033 阅读 · 0 评论 -
《Hello Vue.js之道阻且长》
一、环境安装问题由于nodejs安装错误的历史问题,在系统高级设置里将path改的我完全不认识了,因此导致Vue.js安装困难重重。首先在执行npm install --global vue-cli命令之后,出现如下图的错误,vue根本没有安装上。经过多方检查,最后终于找到问题了。原因在于我之前nodejs配置path时,大概哪个环境变量修改了。导致找不到node_glob原创 2017-10-22 09:51:18 · 302 阅读 · 0 评论