Webpage Effects
关注
分享
扫一扫
Wang's Blog
Keep learning for the innovation era.
展开
-
普通的tab栏的切换与函数封装
栏目1 栏目2 栏目3 栏目4 这是栏目1区域内容 这是栏目2区域内容 这是栏目3区域内容 这是栏目4区域内容原创 2015-12-30 00:23:15 · 2105 阅读 · 0 评论 -
ionic中滑动缩放的焦点图特效实现
在之前项目整理中，实现过这样一个特效：当用手指滑动时，焦点图随着滑动的距离而成比例的缩放的效果，常见于一些App上，主要是用于展示信息的卡片，相关技术栈版本，ionic1, angular1, 这里再来说一下：技术栈不同，但实现的思路是想通的，仅供开发参考。效果预览这里由于gif生成工具生成的图片很大，没有展示全部的功能，demo上可以切换不同类型的杂志以及一些切换的特效，并且如果是在线的图片，代码原创 2017-09-11 20:40:35 · 2081 阅读 · 4 评论 -
ionic中的分类侧边栏ABC字母滑动特效
在对之前项目进行回顾整理的过程中，发现自己做过挺有意思的特效，今天重新来梳理一下。首先要说明一下的是，一些特效都要依赖合理的布局和规范的数据和数据格式的支撑，今天整理的这个，不是很完美，还有很大提升的空间，不过作为开发参考，确实有一定的帮助。技术栈范围：ionic version 1，不管用的什么技术，实现思路都是想通的。效果预览github演示地址https://github.com/johnn原创 2017-08-27 19:38:24 · 2569 阅读 · 3 评论 -
ionic中的在线视频播放功能
前言在ionic中处理视频播放的功能在stackoverflow, ionic-forum以及ionic的github issue中都有提及，有很多相关讨论， 我们只针对在线视频播放功能进行下总结，之前用过videogular这款插件,但在实际播放中的效果并不是很好。在实际开发中可以使用新浪微博网页版中的视频链接做测试(备注：新浪视频优化的比较好，播放很流畅) ，本文作为ionic中h5播放在线视频原创 2017-06-11 16:19:50 · 4613 阅读 · 0 评论 -
ionic中的在线mp3播放功能
前言需要相关说明的，请参考前文效果预览github演示地址https://github.com/johnnynode/ionic-sample/blob/ionic-v1/mds/audio.mdAudio模块中的html关键代码：<ion-view class="audio" cache-view="false"> <ion-header-bar class="bar-stable">原创 2017-06-11 16:56:29 · 2809 阅读 · 0 评论 -
ionic中第三方网页,pdf等的载入处理和loading动画的实现
前言在ionic中，有一款cordova插件inAppBrowser可以实现外部网页的载入，然而现在我们不用这款插件，使用iframe的方式来实现。效果预览必要说明：在pdf.js的预览文件访问需要翻墙才能看到效果，关于存在的跨域问题，我们在代码中做了真机模式下的访问，并且隐藏了pdf.js控件中的下载，打印等不常用功能。关于pdf的网页化处理在github上的一款插件 pdf.js , 可以将pd原创 2017-06-11 18:14:45 · 3704 阅读 · 2 评论 -
动画封装四：用json实现多条样式的缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:46:42 · 1443 阅读 · 0 评论 -
用绝对定位实现无滚动条的全屏滚动
基础样式：/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/*{margin:0;padding:0;list-style:none;}html,body,#content,.section{height:100%;width:100%;}html,body{position: relative;overflow: hidden;}#content{p...原创 2016-01-10 14:06:12 · 2632 阅读 · 0 评论 -
用window.scrollTo实现有滚动条的全屏滚动
有滚动条的全屏滚动 /* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ *{margin:0;padding:0;list-style:none;} html,body,#x1,.section{ height:100%; width:100%; }原创 2016-01-10 14:04:01 · 1344 阅读 · 0 评论 -
动画封装三：单条样式的缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:38:11 · 632 阅读 · 0 评论 -
动画封装二：实现水平缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:31:58 · 610 阅读 · 0 评论 -
动画封装一：实现水平匀速运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:28:40 · 763 阅读 · 0 评论 -
无缝滚动实现方式二：用父盒子的scrollLeft 实现
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; } .inner{ width原创 2016-01-01 20:21:33 · 1179 阅读 · 0 评论 -
无缝滚动实现方式一：用自身的offsetLeft 实现
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-01 20:17:28 · 1027 阅读 · 0 评论 -
文档滚动对 scrollTop scrollLeft的兼容性封装
Document /* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; } htm原创 2016-01-01 16:08:53 · 1665 阅读 · 0 评论 -
用闭包实现含有定时器的tab栏的切换与函数封装
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-01 15:40:50 · 755 阅读 · 0 评论 -
含有定时器的tab栏的切换与函数封装
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2015-12-30 00:30:21 · 1011 阅读 · 0 评论 -
网页视频播放的常见兼容方式总结
在做一些项目时，项目需求竟然要兼容IE6, 一开始并没有合适的解决方案，后来查看了优酷的处理方式，这是一种好的方式，根据不同的浏览器来使用video或object, 我们都知道object的兼容性很好，但是很老，下面我们来进行总结一下：方式一：根据浏览器判断使用不同的标签处理html部分：<div id="videoContainer"></div>javascript: var flag原创 2017-11-06 14:13:22 · 2693 阅读 · 0 评论