随笔分类 - 网页特效
幻灯 切换 轮播 选项卡 导航菜单特效
摘要：百度地图 按关键词显示 http://lbsyun.baidu.com/jsdemo.htm#i1_1 引用方式 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> <sc
阅读全文
摘要：全屏等视差插件 资料 github stellar.js 视差滚动插件Stellar.js
阅读全文
摘要：HTML CSS 这里有个小圆点图片 左箭头 右箭头 JS 引入JQUERY JS插件引入 jquery.touchSlider.js
阅读全文
摘要：head内写上meta标签，解决使用低版本IE内核渲染页面 Edge：始终以最新的文档模式来渲染页面。 参考： meta标签控制ie渲染标准模式和兼容模式 文档模式（document mode）是IE8引入的一个新概念。页面的文档模式决定了你可以使用哪个级别的CSS，可以使用JavaScript的哪
阅读全文
摘要：可能出现的情况 1）一列都有，按顺序弹出对应的弹出层 2）只有单个一个弹出层 3）不按顺序不按规律随机弹出层 jquery 弹出层 解决 第一种情况 参考资料 移动端之“CSS3多动画弹框” 引入jquery JS代码 这里关闭用的css3效果实现 HTML css
阅读全文
摘要：HTML 这里.left 固定了圆的宽度和高度，还有canvas也设置了固定宽高 绘制圆心的坐标也就出来了 (203,203) 抽奖转盘是由一个大圆和一个内圆完成 ；大圆负责绘制上奖品 ，内圆负责确定指针的位置，指针直接使用图片，决定位置确定 <div class="left"> <div clas
阅读全文
摘要：PJAX 解决 多页面切换 背景音乐不断的问题 使用zepto.min.js zepto中文API 背景音乐可以一直播放，这里index局部刷新 解决思路： window.history.pushState()无刷新改变url，配合ajax获取需要的页面和数据 关键点： 1)window.histo
阅读全文
摘要：这个是最简单的表单提交 延伸：后面有很多需要提交的信息 如何快速部署接口 此例子是移动端H5页面，使用的是zepto.min.js HTML 前端页面JS 不跨域的情况下 后端PHP页面 注意不要跨域 1.这里接收前端数据 $_POST[name],$_POST[tel],post传送过来，这里需要
阅读全文
摘要：1.ajax和history.pushState无刷新改变页面URL 音乐解决部分：参考网易云音乐 参考资料 使用ajax和history.pushState无刷新改变页面URL 透过history.pushState无刷新改变url
阅读全文
摘要：1.定义动画效果 @keyframes 参考资料：http://www.w3school.com.cn/css3/css3_animation.asp 推荐是 10% 到100%状态兼容最好；@keyframes 后面跟动画名称 @keyframes scrollrightToLeft{ 10% {
阅读全文
摘要：设置select默认值 例子如下 $("#cpu_list option").eq(0).attr("selected","selected");获取select选中值 var s =$('#cpu_list').find("option:selected").text(); 参考资料： http:
阅读全文
摘要：使用方法 nameAccount: 营销企业QQ号码, selector:鼠标点击元素的ID 引用JS 参考资料： http://blog.masoft.cn/develop/20.html
阅读全文
摘要：图片翻转效果主要由CSS3 动画效果执行，JS 只是控制类名变换 先来看看HTML： 这里两个都是块元素所以要注意正面和背面在一块 肯定是固定在一块的，position:absolute; CSS3动画 CSS代码 JS代码参考 实例文件 链接: http://pan.baidu.com/s/1kV
阅读全文
摘要：JQUERY 点击滚动到指定元素上 jquery 点击滚动到指定元素上， 1.获取指定元素的offset() 得到偏移位置，返回结果是top 和left 获取offset().top , offset().left 单位是像素 只对可见元素有效 2.body 和html 使用animate方法的sc
阅读全文
摘要：实现效果: 左右箭头点击切换，HTML结构：UL是宽度是固定的几个LI的总和（一排），UL的上一级元素居中固定宽度比如1200px,设置超出隐藏 1.向右点击，每次左移动（marginLeft）都是 **************************************************
阅读全文
摘要：重要CSS属性 最外层块元素text-align:center; 分页， 随着页数不断增加，宽度不断增加，一直保持水平居中 HTML结构 CSS属性 对于a标签使用padding margin， a元素不是块级元素 可以直接排列一行 ，其他使用场景暂时没有想到
阅读全文
摘要：实现效果： 1.二级菜单下拉展示的全屏展示，下拉内容块居中 2.一级菜单 并不是所有都有二级下拉菜单 ，不能使用,通过比较标签内的属性来确认具体是哪个一级导航有下拉菜单,比如 <div index="product"></div>对比一级菜单和二级菜单的index属性来显示对应的内容； <ul> <
阅读全文
