利用swiper插件实现3D轮播效果

利用swiper插件实现3D轮播效果

头部引入 swiper-3.4.2.min.css,底部引入 swiper-3.4.2.jquery.min.js。css代码#main { width:100%; } #main .swiper-container { width:95%; padding-top:0.5rem; } #main .swiper-slide
浏览:40 标签: swiper 轮播 时间: 2018-04-19 11:06
自定义函数:获取/设置transform属性值及属性

自定义函数:获取/设置transform属性值及属性

transform中所有的变换都是基于矩阵来实现的, 但是这块也存在一个问题,就是没法获取样式中设置的动画属性值。通过 getComputedStyle(div[0])["transform"] 方式获取到的是一个矩阵数据,如:matrix(0.5, 0, 0, 0.5, 50, 0);通过 div[0].style.transform 方式获取到是所有的与transform相
浏览:41 标签: transform 时间: 2018-04-16 21:27
利用translate封装移动端滑屏效果(缓冲动画/滚动条)

利用translate封装移动端滑屏效果(缓冲动画/滚动条)

具体滑屏布局,css样式可以查看此篇文章:http://menvscode.com/detail/5ace2f814f66b879b92af410js代码functionmScroll(init){if(!init.el){returnfalse; }var wrap =document.querySelector(init.el);var inner = wrap.chi
浏览:50 标签: translate 移动端 滚动条 时间: 2018-04-12 0:05
touch事件封装tap轻触事件

touch事件封装tap轻触事件

单手指事件:【1】touchstart:手指按在屏幕上【2】touchmove:手指在屏幕上移动【3】touchend:手指离开屏幕【4】touchcancle :手指操作取消(一般都是意外情况导致操作取消)多手指事件:【1】getsturestart:多手指按下【2】getsturechange:多手指位置改变【3】getstureend :手指离开【4】g
浏览:53 标签: touch tap 时间: 2018-04-11 14:36
mui框架grid栅格布局

mui框架grid栅格布局

该文章将mui框架中grid栅格布局的css代码单独拿出来。演示的html代码<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>MVC前端网(menVScode)_前端博客_前端技术_前端资源下载_学习,成为更好的自己</title><metaname="viewport"content="widt
浏览:44 标签: mui grid 栅格 时间: 2018-04-11 13:58
基于jquery实现分页效果

基于jquery实现分页效果

效果展示html代码<!DOCTYPE html> <html lang="en"><head><head>     <meta charset="utf-8" />     <title>MVC前端网(menvscode.com)</title>     <style>     *{ margin:0; padding:0; list-style:n
浏览:49 标签: jquery 分页 时间: 2018-04-08 13:45
JS日期格式化转换方法

JS日期格式化转换方法

将日期转换为指定的格式:比如转换成 年月日时分秒 这种格式:yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。当然是网上的方法,只是总结下。可以为Date原型添加如下的方法:Date.prototype.format =function(fmt){var o = {"M+" :this.getMonth()+1,//月份"d+" :this.getDate(
浏览:156 标签: js 日期格式 时间: 2018-03-23 13:16
mui中dtpicker组件--弹出日期选择器(移动端滑动日历)

mui中dtpicker组件--弹出日期选择器(移动端滑动日历)

dtpicker组件适用于弹出日期选择器,使用dtpicker组件必须要引入 mui.min.js、mui.min.css、mui.picker.min.css、mui.picker.min.js。【1】1. 通过 new mui.DtPicker() 初始化DtPicker组件var dtPicker =new mui.DtPicker(options)【2】显示pick
浏览:362 标签: 日期 dtpicker mui 时间: 2018-03-16 14:31
原生js实现图片放大镜效果及原理分析

原生js实现图片放大镜效果及原理分析

放大镜的关键原理        鼠标在小图片上移动时,通过捕捉鼠标在小图片的位置,来定位大图片的相应位置。        放大镜的移动方向和大图片的移动方向:横向相反,纵向相反。页面元素        小图片、存放小图片的容器、大图片、存放大图片的容器、放大镜技术点:时间捕获、定位        onmouseover:会在鼠标指针移动到指定的对象上时发生。   
浏览:369 标签: 放大镜 js 时间: 2017-11-28 18:20
原生js实现图片放大镜效果

原生js实现图片放大镜效果

放大镜原理        放大镜的实现过程是将一个小图放置在一个盒子里。宽高都是100%。当鼠标在小图盒子里移动时,出现一个移动块(阴影区域)。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。如图(请勿过于认真看图片,注意圈圈(¬_¬)):        一定要理解上图中圈起来的阴影块是箭头指向的粉红色圈的等比缩小版。理解了这个在接下来的代码中,我们才知道
浏览:282 标签: 放大镜 js 时间: 2017-11-28 16:11
jq实现图片在父级容器内等比例缩放且居中显示

jq实现图片在父级容器内等比例缩放且居中显示

jq实现图片在父级容器内等比例缩放且居中显示css样式demo{width:500px;height:250px;overflow: hidden;background: red;margin-bottom:15px;}html文件<divclass="demo"><imgsrc="http://www.menvscode.com/upload/56224941679780
浏览:333 标签: 缩放 居中 图片 jq 时间: 2017-11-16 13:21
css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果:一种是单行显示省略号;另一种是自己可以控制几行,最后一行末尾才显示省略号。css样式.text01 {width:200px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text
浏览:291 标签: css3 省略号 时间: 2017-10-31 10:43

邮箱快速注册

忘记密码