2018年06月_TinaAsura

原创放大镜实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;border: none

2018-06-28 17:46:38 69

offset系列一、offsetWidth和offsetHeight获取对象的宽度和高度，包括内容，边框和内边距。即offsetWidth = width+border+padding注：与div.style.width区别，它只是获取到行内的数值，返回的是字符串，如：100px二、offsetLeft和offsetTop距离第一个有定位的父级盒子左边和上边的距离。注：父级如果都没有定位，就以bo...

2018-06-26 16:55:51 311

原创小程序生成二维码分享朋友圈的功能

1、如何小程序分享页面的二维码？通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html可以选择你所需要的小程序码，给到后台相应的参数生成即可。这里说一下B接口的参数scene，关于scene参数，小程序的解释如下：注意：通过该接口生成的小程序码，永久有效，数量暂无限制。...

2018-06-21 15:43:04 43279 1

原创 js延时加载实现

实现原理：将img标签里的src属性设为同一张空白图片（封面图片），再自定义一个属性，属性值为图片的真实路径，通过js监听图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。其中用了淡入淡出增加了效果。下面是一个简单的样式布局 *{padding: 0;margin: 0;} ul{width:828px;margin: 50px auto;} li{list-style: ...

2018-06-20 16:37:33 2104

转载前端浏览器兼容问题

兼容页面的方法：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。问题一：不同浏览器的标签默认的外补丁和内...

2018-06-19 16:33:34 299

原创文字溢出换行（单行或多行）

单行文本换行css需设置属性：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本换行css需设置属性：（-webkit内核才有效）overflow : hidden;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;-...

2018-06-19 13:51:45 13244 2

原创关于前端页面优化的方法

前端页面优化方法1、减少http请求，减少DNS查询次数，减少dom操作2、CSS写在顶部，JavaScript写在尾部或异步3、压缩HTML、CSS、JavaScript4、js不滥用闭包，会加深作用于链5、css选择器要合理应用6、使用雪碧图或者css Sprites整合图片7、避免CSS表达式，<link>代替@important8、延时加载图片9、使用图标，列如阿里巴巴图标库1...

2018-06-15 16:53:08 2757

原创瀑布流特效演示

2018-06-14 15:26:42 584

原创 jquery实现点击左右按钮的切换单个元素

html部分代码<div class="box"> <div class="box_wheel"> <ul class="box_ul"> <li style="background: pink;">AAA</li> <li style=&am

2018-06-14 14:25:53 5271 2

原创 jquery实现点击左右箭头切换

html部分<div class="contain"> <div class="box"> <ul class="box_wheel"> <li>111</li> <li>222</li> <li&

2018-06-13 16:54:51 11067 2

Tina的博客