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

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

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

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

放大镜原理        放大镜的实现过程是将一个小图放置在一个盒子里。宽高都是100%。当鼠标在小图盒子里移动时,出现一个移动块(阴影区域)。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。如图(请勿过于认真看图片,注意圈圈(¬_¬)):        一定要理解上图中圈起来的阴影块是箭头指向的粉红色圈的等比缩小版。理解了这个在接下来的代码中,我们才知道
浏览:1504 标签: 放大镜 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
浏览:1435 标签: 缩放 居中 图片 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
浏览:1396 标签: css3 省略号 时间: 2017-10-31 10:43
基于jq实现3D旋转轮播/点击轮播

基于jq实现3D旋转轮播/点击轮播

1、css样式布局        介绍一下上图的布局思路:上图所示,容器里面有五个小容器,五个小容器一定要是绝对定位,用 top 和 left 值来逐个定位,顺序就是上图的标号从一到五(按照自己的需要修改容器个数,这里用五个图举例),当然一定要记得父级元素相对定位。2、js的大致思路        自动循环轮播的图片,当前图片向左滑动,下一张图片就紧接着向左滑动进入可
浏览:1788 标签: 轮播 时间: 2017-10-30 16:43
js判断是否是ie浏览器且给出ie版本

js判断是否是ie浏览器且给出ie版本

        怎么去看浏览器的内核等信息 ---- js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核;navigator.userAgent 这个值取出来是个字符串,可以通过string的 indexOf 方法或者正则匹配来验证关键字符串。        ie11和edge的判断方式有所不
浏览:1512 标签: ie 浏览器 js 时间: 2017-10-24 18:16
html5的video标签自动填充满父级div的大小

html5的video标签自动填充满父级div的大小

使用video标签,视频总不能占满父级全屏,如下图所示,本文提供了两个方法来解决这个问题:方法一:原理是父级的div将video超出部分给隐藏了,这种方法属于奇淫技巧、野路子,->_->。.videoBox {width:100%;position: relative;height:980px;background:#000;overflow: hidden;min-wi
浏览:2913 标签: video html5 时间: 2017-10-10 17:14
js利用substring()替换指定长度的字符串

js利用substring()替换指定长度的字符串

js利用substring()替换指定长度的字符串的代码functiontransformStr(oldStr, start, end, replaceStr){return oldStr.substring(0,start-1)+replaceStr+oldStr.substring(end,oldStr.length);}这里一共有4个参数        oldStr
浏览:3182 标签: substring js 时间: 2017-09-18 10:45
jquery实现上传多个文件(file类型),并能单个删除

jquery实现上传多个文件(file类型),并能单个删除

        下面demo实现功能有:1、支持上传多个文件;2、可单独删除某个文件;3、可限制上传的文件类型;4、不允许同名文件再次上传。css代码.upLink{text-decoration: none;cursor: pointer;}.upLink:hover{text-decoration:underline;}.fileBox{position:relative
浏览:2463 标签: jquery 文件 file 时间: 2017-09-13 18:00
jquery实现列表选择点击左右列表选择器特效代码

jquery实现列表选择点击左右列表选择器特效代码

        本特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 等浏览器。        jquery实现列表选择点击左右列表选择器特效代码(function($){ $.fn.initList =function(){var selectTitle = $(this);
浏览:1514 标签: jquery jq插件 时间: 2017-08-30 9:58
jUploader-1.0正在版:基于jQuery文件无刷新上传插件下载及介绍

jUploader-1.0正在版:基于jQuery文件无刷新上传插件下载及介绍

         全局设置:        下面的为下面的实例写的设置。//全局配置(这样就不必每次初始化时都加上下面的设置)$.jUploader.setDefaults({ cancelable :true, //可取消上传 allowedExtensions : ['jpg','png','gif' ], //只允许上传图片
浏览:1379 标签: jUploader jquery jq插件 时间: 2017-08-17 14:57
基于jq从零开始实现pagination分页组件

基于jq从零开始实现pagination分页组件

        开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段。        组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination1、分析需求        当前页码显示前后三页,以及在两端显示上一页、下一页        
浏览:1905 标签: 分页 pagination 时间: 2017-07-31 14:00

邮箱快速注册

忘记密码