关闭
当前搜索:

根据当前页码、总页数,设置页码并实现页码切换功能

根据当前页码、总页数,设置页码并实现页码切换功能 AJAX获取列表数据时,前端根据当前页码、总页数设置页码选择元素,前后各显示5个页码,并实现页码切换功能 demo代码: 设置页码 .page_show{ padding: 40px 0; text-align: center;} .page_show span{ display: inline-block; hei...
阅读(276) 评论(0)

一屏展示多个li轮播设置demo

一屏展示多个li轮播设置demo,一般要从数据库中调出数据,按之前写过的轮播方法(一个li是一屏),需要判断分页,要嵌套循环输出数据,此次写的方法不用再判断分页了,JS根据一屏显示多少个li设置分页效果 只需对head中设置元素的CSS样式进行修改,即可改变显示效果 一屏放5个 一屏放6个 demo代码(一屏5个或6个在CSS及JS部分有注释): 一屏展...
阅读(249) 评论(0)

移动端H5页面,上下滑动翻页

移动端H5页面,上下滑动翻页 向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口 向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ,下一页(加CSS样式inDown)向下移动进入窗口 同时设置1秒以后(setTimeout(function(){......},1000);)才可(根据c...
阅读(632) 评论(0)

移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面

移动端页面上下滑动,大小、透明度的变化视觉差异效果切换页面 上滑动进入下一页 , 当前页从 scale=1 放大至 比1的大倍数 ,并且透明度降低至0 ,下一页从 scale=0.1 放大至 scale=1 , 透明度无变化 下滑动进入前一页 , 当前页从 scale=1 缩小至 scale=0.1 ,透明度无变化     ,下一页从 比1的大倍数 缩小至 scale=1 , 透明度从0至1的...
阅读(737) 评论(0)

原生JS判断页面中图片加载完成

自己写的判断页面中图片加载完成的方法,用原生JS完成,不用jq主要考虑在不加载jq的情况下,代码可以正常执行 判断指定ID的盒子中所有图片加载,demo代码如下: 页面图片加载完成测试 //'loadingBox' => 存放 指定要加载的图片 的上级盒子 ID getImgLoadEd('loadingBox'...
阅读(377) 评论(0)

涂抹CANVAS,判断清除完毕执行操作

涂抹CANVAS,判断清除完毕执行操作 clearCanvas.js代码如下: function clearCanvas(imgSrc,Bl,callback){ var ctx = null; var mouseX = null; var mouseY = null; var _width = 0; var _height = 0; function touchStartEven...
阅读(621) 评论(0)

JS禁止页面中的一些操作事件

禁止鼠标右键:oncontextmenu="return false"; 禁止选择:onselectstart="return false"; 禁止拖放:ondragstart="return false"; 禁止拷贝:oncopy=document.selection.empty() 。 禁止复制:oncopy = "return false"; 禁止保存:,放在head里面。 禁止...
阅读(161) 评论(0)

循环展示图片(画中画效果)CANVAS2.0版

循环展示图片(画中画效果)CANVAS2.0版 之前设计的一版在测试当中有点问题,PC端测试是没有问题的,但在手机上访问时,切屏时就出现闪屏(本就出现的大图没有出现,是之前的小图突然变大,一闪而过,然后再显示正常的大图)问题,总结原因,应该还是在移动端加载慢的问题 这一版做了优化,第一屏时加载三张图片,把下一屏的图预加载出来,到下一屏的时候,只需再预加载下一屏的一张图即可,经过测试,的确不会出...
阅读(460) 评论(0)

循环展示图片(画中画效果)

循环展示图片(画中画效果),页面展示效果就是每次显示两张叠加起来的图片,上面的一张图在下面的图的里面,画面不断的缩小,当下面的一张图缩放到窗口大小时它自己切换成上面的图片,叠加在另一张新加载的图片(下面的图)的上面 最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的,为了使其看上去有不间断的变化效果,加上了CSS3过渡的效果,此功能实现的所有HTML/CSS/JS都直接...
阅读(534) 评论(0)

活动倒计时功能

做了一个显示活动倒计时的功能,方便用到时直接拿来就用 与今天之后的某一特定时间的倒计时 离结束时间还差天小时分秒 //getTimeS(86400000); getTimeS(new Date(2017,6,3,10,40,0) - new Date());//当前时间 与 2017年7月3号10点40分 差值 function getTimeS(newTime){ var ...
阅读(202) 评论(0)

安卓微信中播放视频终于可以不再自动全屏啦

安卓微信中播放视频时总是会自动在新窗口全屏播放视频,而且播放结束后自动推送多个视频列表展示给用户选择,但有时候我们就是需要视频能够局部区域播放 找了一年多的答案终于有了结果了 下面贴出解决办法: 1、HTML中 ① 给video标签增加属性,使浏览器调用h5原生video ② 在页面中添加canvas画布 2、CSS中,使video隐藏 vid...
阅读(6201) 评论(5)

CSS3之:object-position/object-fit深入了解

object-fit和object-position之间的关系有点类似于background-size和background-position,无论是,关系还是属性值,都有相似之处,因此,我们在理解object-fit和object-position的时候,可以或多或少映射background-size和background-position。 object-fit理解 object-fi...
阅读(405) 评论(0)

PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用

PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用 注:PC端JQ版本2.0或以上会报错 页面包含 jquery.touchSlider.js,代码: /** * @name jQuery.touchSlider * @version 201209_2 * @since 201106 * @param Object settings 환경변수 오브젝트 * roll ...
阅读(419) 评论(0)

小程序单位:rpx、rem的具体使用方法及算法

小程序单位:rpx、rem的具体使用方法及算法 1)rpx:不论哪个型号的手机,屏幕宽度都是750rpx rpx与px的转换,根据设计稿换算 例如:设计稿750px宽度,ps上量出宽度是多少,那么就定义多少rpx,也就是,1px = 1rpx 例如:设计稿640px宽度,那么需要转换一下,1px = 750/640rpx 2)rem:根据设计稿换算 例如:设计稿750px宽度,那么1r...
阅读(212) 评论(0)

JS设置页面下拉刷新

JS设置页面下拉刷新 //滑动动作 document.body.addEventListener("touchstart", touchStart, false); document.body.addEventListener("touchmove", touchMove, false); document.body.addEventListener("touchend", touchEnd...
阅读(409) 评论(0)

设置页面全屏

设置页面全屏方法: //全屏 function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } els...
阅读(231) 评论(0)

微信中的video属性设置

id="videoID"  src="video.mp4"  poster="loadbg.jpg" 视频封面  preload="auto"  x-webkit-airplay="allow"  x5-video-player-type="h5" 启用H5播放器,是wechat安卓版特性  x5-video-player-fullscreen="true" 全屏设置,设置为 true...
阅读(9640) 评论(0)

SVG动画vivus.js库使用

SVG动画vivus.js库使用整理 使用方法如图: HTML例子代码: vivus.js - test svg * {fill: none;stroke: currentColor;stroke-width:4;} .sunrise {color: #f037a5; background-color: #f8c72c;} .matrix {color: #...
阅读(2005) 评论(0)

使用canvas 绘制一个有限度的斐波那契数列的曲线

昨天看到“前端面试中的常见的算法问题”的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞得很懵,先只能手动一条一条的画出弧线,但一直认为肯定有规律可循的,脑子真是不太好啊,好在最后理清思路,找到规律,根据规律定义好所有重要的点,再按点循环画出线条,呵呵,记录一下 斐波那契数列,又称黄金分割数列,指...
阅读(757) 评论(0)

html2canvas浏览器截屏

html2canvas实现浏览器截屏,根据DOM元素样式截图 通过html2canvas方法调用插件,该方法接受两个参数,第一个为要生成截图的DOM元素,第二个参数为插件的配置 demo: html2canvas浏览器截屏 *{ margin:0; padding:0;} body{ text-align:center; padding-top:50px;} #box{ d...
阅读(716) 评论(0)
78条 共4页1 2 3 4 下一页 尾页
    个人资料
    • 访问:158639次
    • 积分:2140
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:6篇
    • 译文:0篇
    • 评论:13条
    文章分类
    最新评论