原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&…

原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步…

面向对象原生js幻灯片代淡出效果

面向对象原生js幻灯片代淡出效果下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht…

JS 文本输入框放大镜效果

JS 文本输入框放大镜效果今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件请看kissy demo 其实这种效果对于很多童鞋来说应该并不陌生!我今年最早也是在 12306官网抢票中添加联系人要填写电话号码中看到这种效果!如下图所示: 所以今天下午也就研究下这个,特此分享出来给大家!也做了一个简单的DEMO jSFiddle链接地址如下: JSFiddle链接: 想要查看效果!请轻轻的点击我! 基本原理: 其实基本原理也很简单!通过JS不断的监听输…

jq与原生js实现收起展开效果

jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>展开收起</title> <style> * { margin: 0; padding: 0; } button { font-size: 18px; padding: 0 19px; } #con { width: 500px; b…

前端JS电商放大镜效果

前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>-电商放大镜</title> <style type="text/css"> *{ padding: ; margin: ; } #left{ padding: ; margin: ; width:…

原生JS实现图片放大镜插件

前言我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的 ↓ 看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~ 1实现思路 ① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替). ② 确定放大比例,最重要的一点,鼠标指上的…

原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值. 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出…

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

当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document<…

js 实现商品放大镜效果

知识点,需熟悉下面属性及含义: offsetLeft //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop //获取元素相对顶部的距离 (计算是从最顶部边框外开始) offsetWidth //获取元素宽度 (border + padding + margin) offsetHeight //获取元素高度 (border +padding + margin) clientLeft //…

原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div class="wrap"> <ul class="pic-group"> <li><img src="./pic1.jpg" alt=""></li> <li><im…

原生js实现拖拽效果

面向对象 + 原生js拖拽拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function(Move_fn){ function Move_img() { } Move_img.prototype = { constructor:Move_img, pageInit: function(imgEle, imgContent) { this.Ele = imgEle; this.Box =…

原生JS编写的照片墙效果实例演示特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

js代码实现放大镜效果

每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕竟好记性不如烂笔头. 主要事件: onmouseout onmouseover onmousemove 这种实现也是比较简单的,代码如下所示: <!doctype html> <html> <head> <meta charset="UTF-8"&…

原生js实现雪花飘落效果

雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;margin: 0;} body{ background:#000; width: 100%; height: 100%; overflow:hidden; } </style> <div id="flame"></div> js实现代码: <script…

原生JS轮播-各种效果的极简实现

寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟然不是用markdown写的! 当时使用var还需要解决必报的问题!而如今使用ES6的let,自带领域的感觉就是不一样! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

原生js实现简单打字机效果

快过年了,公司基本没活,闲着也是闲着,就写了一个打字机效果玩玩,感觉挺有意思的. 具体代码请参见我的github,请戳这里预览效果,请戳这里…

原生js颗粒页换图效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>颗粒翻转</title> <style> * { margin: 0; padding: 0; list-style: none; } div{ width: 700px; height: 400px; background: url("…

【原生JS】滑动门效果

效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> CSS: <style> #box{border:1px gray solid; margin: 0 aut…

用原生js写碰撞变色效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #wrap{ width: 100px; height: 100px; background-color: red; position: abs…

原生JS实现轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin…

原生js实现瀑布流效果

参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ position: absolute; } img{ width: 100%; } .gap{ width: 20px; } html: <div class="masonrybox"> <div class="masonry"> <div clas…

js原生淘宝京东宝贝放大镜效果

js实现商城放大镜效果效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用. 事件捕获,定位 `难点``:计算. **接下来是demo分享: css部分: * { margin: 0; padding: 0; } /* img { vertical-align: top; } */…

圆盘时钟效果原生JS

圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟,设计的同款时钟效果实现效果实现原理数字时钟利用Date内置对象获取当下的时间,通过处理呈现在页面上这一步获取时间是非常简单的,通过Date下的一些属性就可以实现了背景采用的是一个炫彩流光的效果,利用了CSS3新增的动画效果这部分的炫彩流光效果在之前的博客中有详细讲到炫彩流光效果指针时钟通过定位将三根针重叠在一起,下端对齐都摆在原点,通过transfrom-origin属性,将旋转原点定为底部,也就是,让三根针转的时候绕中…

使用原生JS实现一个风箱式的demo，并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at…