Webpage Effects
关注
分享
扫一扫
文章平均质量分 72
Wang's Blog
Keep learning for the innovation era.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
用window.scrollTo实现有滚动条的全屏滚动
有滚动条的全屏滚动 /* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ *{margin:0;padding:0;list-style:none;} html,body,#x1,.section{ height:100%; width:100%; }原创 2016-01-10 14:04:01 · 1433 阅读 · 0 评论 -
网页视频播放的常见兼容方式总结
在做一些项目时，项目需求竟然要兼容IE6, 一开始并没有合适的解决方案，后来查看了优酷的处理方式，这是一种好的方式，根据不同的浏览器来使用video或object, 我们都知道object的兼容性很好，但是很老，下面我们来进行总结一下：方式一：根据浏览器判断使用不同的标签处理html部分：<div id="videoContainer"></div>javascript: var flag原创 2017-11-06 14:13:22 · 2850 阅读 · 0 评论 -
ionic中滑动缩放的焦点图特效实现
在之前项目整理中，实现过这样一个特效：当用手指滑动时，焦点图随着滑动的距离而成比例的缩放的效果，常见于一些App上，主要是用于展示信息的卡片，相关技术栈版本，ionic1, angular1, 这里再来说一下：技术栈不同，但实现的思路是想通的，仅供开发参考。效果预览这里由于gif生成工具生成的图片很大，没有展示全部的功能，demo上可以切换不同类型的杂志以及一些切换的特效，并且如果是在线的图片，代码原创 2017-09-11 20:40:35 · 2252 阅读 · 4 评论 -
ionic中的分类侧边栏ABC字母滑动特效
在对之前项目进行回顾整理的过程中，发现自己做过挺有意思的特效，今天重新来梳理一下。首先要说明一下的是，一些特效都要依赖合理的布局和规范的数据和数据格式的支撑，今天整理的这个，不是很完美，还有很大提升的空间，不过作为开发参考，确实有一定的帮助。技术栈范围：ionic version 1，不管用的什么技术，实现思路都是想通的。效果预览github演示地址https://github.com/johnn原创 2017-08-27 19:38:24 · 2742 阅读 · 3 评论 -
ionic中的在线视频播放功能
<think>我们只需要根据内容生成摘要，≤150字。内容是关于ionic中在线视频播放的实现，包括问题、方案、代码示例、插件等。摘要要简洁概括核心：在ionic中处理在线视频播放，使用video标签和指令，处理横竖屏和进度条，通过第三方插件和广播控制隐藏，并给出演示地址。注意字数限制。</think>本文总结了Ionic中实现在线视频播放的方案，使用HTML5 video标签结合自定义指令，处理播放控制、进度条及缓冲，并通过cordova插件强制横竖屏，同时利用广播控制界面元素隐藏，提供了演示地址和关键代原创 2017-06-11 16:19:50 · 4883 阅读 · 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 · 2976 阅读 · 0 评论 -
动画封装四：用json实现多条样式的缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:46:42 · 1551 阅读 · 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 · 2745 阅读 · 0 评论 -
普通的tab栏的切换与函数封装
栏目1 栏目2 栏目3 栏目4 这是栏目1区域内容 这是栏目2区域内容 这是栏目3区域内容 这是栏目4区域内容原创 2015-12-30 00:23:15 · 2221 阅读 · 0 评论 -
动画封装三：单条样式的缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:38:11 · 729 阅读 · 0 评论 -
动画封装二：实现水平缓动运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:31:58 · 723 阅读 · 0 评论 -
动画封装一：实现水平匀速运动
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-02 23:28:40 · 853 阅读 · 0 评论 -
无缝滚动实现方式二：用父盒子的scrollLeft 实现
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; } .inner{ width原创 2016-01-01 20:21:33 · 1309 阅读 · 0 评论 -
无缝滚动实现方式一：用自身的offsetLeft 实现
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-01 20:17:28 · 1162 阅读 · 0 评论 -
文档滚动对 scrollTop scrollLeft的兼容性封装
Document /* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; } htm原创 2016-01-01 16:08:53 · 1760 阅读 · 0 评论 -
用闭包实现含有定时器的tab栏的切换与函数封装
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2016-01-01 15:40:50 · 851 阅读 · 0 评论 -
含有定时器的tab栏的切换与函数封装
/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式 */ * { margin: 0; padding: 0; list-style: none; outline: none; }原创 2015-12-30 00:30:21 · 1109 阅读 · 0 评论