JavaScript网页特效
分享
扫一扫
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
超级会员免费看
aiguangyuan
要全身心的投入，程序才会有些感觉！
展开
-
正确的用户拖拽方式
要设计一个有感拖拽交互，你可以考虑的反馈效果有：拖拽隐喻、拖拽状态、目标暗示、位置确认、吸附确认和选中状态。考虑到开发成本，和实际场景的复杂性，也不可能所有的拖拽交互都把这些做齐全了。但最好是心里有数，根据情况选择需要的反馈效果。............原创 2022-07-25 00:32:25 · 1415 阅读 · 0 评论 -
JavaScript特效运动函数
分享一个JS封装的运动函数，里面分为弹性运动和缓冲运动两个方法，通过调用startMove()函数来实现动画效果。function css(obj, attr, value) { if (arguments.length == 2) { return parseFloat( obj.currentStyle ? .........原创 2019-07-05 23:38:01 · 1436 阅读 · 0 评论 -
原生JS解决拖拽后刷新位置丢失问题
在给页面中的元素时行拖拽时，如果拖拽到一半，页面刷新了，上一次拖拽的位置就会丢失，今天给大家分享一个小Demo，主要运用的localStorage来解决的这个问题，以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content............原创 2019-08-16 13:04:33 · 800 阅读 · 0 评论 -
原生JS中的拖拽事件兼容性问题
写个小Demo，分享一下使用原生JS实现拖拽时的兼容性问题如何解决？代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS中的拖拽事件兼.........原创 2019-08-16 11:54:37 · 702 阅读 · 0 评论 -
原生JS实现弹性运动中需要注意的问题
在使用弹性运动时，需要注意一些小问题，即运动的元素所要改变的属性值不能太小，如果太小在反弹时就会出现负值，导致出现错误，所以要给出一定的限制，下面写一个小Demo，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/h............原创 2019-08-17 10:13:14 · 230 阅读 · 1 评论 -
原生JS实现拖动拉开序幕特效
给大家分享一个用原生JS实现的拖动拉开序幕特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现拖动拉.原创 2021-12-13 00:14:10 · 1315 阅读 · 0 评论 -
原生JS实现涟漪按钮特效
给大家分享一个用原生JS实现的涟漪按钮特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2020-10-26 18:41:55 · 1157 阅读 · 0 评论 -
原生JS给可编辑DIV添加文字阴影
给大家分享一个用原生JS给可编辑DIV添加文字阴影的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS给原创 2020-06-02 22:00:58 · 1643 阅读 · 0 评论 -
Darkmode.js实现黑暗模式
运用CSS 3.0的过滤属性可以实现黑暗模式，当我们用这个属性实现黑暗模式时，我们会发现图片的颜色会受影响，并不是很美观，是无法完美切换黑暗模式的，而最近出了一个JavaScript辅助插件叫Darkmode.js可以完美的切换黑暗模式。Darkmode.js运用的是CSS里面的一个特性叫mix-blend-mode，这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，再加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的。以下是代码实现，欢..原创 2020-06-10 01:17:53 · 3261 阅读 · 0 评论 -
原生JS实现动画中的布局转换
在用JS编写动画的时候，经常用会到布局转换，即在运动前将相对定位转为绝对定位，然后执行动画函数。下面给大家分享一个运用原生JS实现的布局转换的Demo，效果如下:以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" cont............原创 2019-08-16 20:04:42 · 339 阅读 · 0 评论 -
原生JS实现拖拽元素时与另一元素碰撞检测
给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo，效果如下：实现代码如下， 欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &.........原创 2019-08-16 11:49:22 · 1675 阅读 · 7 评论 -
原生JS实现拖拽进度条显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条显示相应的内容，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&.........原创 2019-08-10 10:20:23 · 1605 阅读 · 0 评论 -
原生JS拖拽进度条改变元素透明度
今天要分享的是运用原生JS拖拽进度条改变元素透明度，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-09 13:16:41 · 1116 阅读 · 1 评论 -
原生JS实现各种运动之弹性运动
给大家分享一个用原生JS实现的弹性运动，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生.........原创 2019-08-17 09:05:07 · 703 阅读 · 0 评论 -
原生JS实现各种运动之匀速运动
给大家分享一个用原生JS实现的匀速运动，效果如下：需要注意的是，这种运动效果在实际的开发中用的比较少，用的更多的还是弹性运动和缓冲运动，以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/htm.........原创 2019-08-17 09:05:37 · 1158 阅读 · 1 评论 -
原生JS实现特效导航条
分享一个用原生JS实现的特效导航条，效果如下：实现代码如下：<!DOCTYPE html><head> <meta charset="utf-8" /> <title>原生JS实现特效导航条</title> <style> body { mar............原创 2019-07-27 13:56:32 · 1130 阅读 · 0 评论 -
原生JS拖拽进度条改变元素大小
今天要分享的是运用原生JS拖拽进度条改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-09 13:05:50 · 829 阅读 · 0 评论 -
原生JS滚动鼠标改变元素大小
今天要分享的是运用原生JS滚动鼠标改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-09 01:04:06 · 992 阅读 · 0 评论 -
原生JS实现实时钟表
分享一个用原生JS实现的实时钟表特效，效果如下（PS：实际指针是按360度走的，截图时只截了一部分）上面的效果一共需要4张图片，分别是表盘、时针、分针、秒针，根据需要可以自己做图片，实现的代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> .........原创 2019-07-27 11:32:13 · 2237 阅读 · 0 评论 -
原生JS实现选中文字分享
当我们在阅读某些文章时，会看到一些比较精彩的语句急于分享，下面分享一个选中文字分享的功能，实现类似于下面的效果。以下是代码实现：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.........原创 2019-07-19 23:20:10 · 824 阅读 · 0 评论 -
原生JS实现特效导航条
分享一个用原生JS实现的特效导航条，效果如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>原生JS实现特效导航条</title> <style> * .........原创 2019-07-27 12:03:05 · 1473 阅读 · 0 评论 -
图片拖拽在项目中的实现
公司目前在做一个任务宝的项目，主要是用公众号举行一些活动，通过公众号推送活动的海报，海报上面附有公众号的二维码，当用户扫码进入公众号以后，提示用户需要完成一定数量的分享即可免费赠送相关礼品等等，活动的主要目的是为了涨粉。其中在生成海报时，为了方便后台人员操作，二维码和头像与海报的合成需要做到拖拽定位，效果如下：两个图片的拖拽实现代码如下：// 图片拖拽事件function dr............原创 2019-04-26 11:03:59 · 362 阅读 · 0 评论 -
原生JS实现一个简易的运动函数
给大家分享一个用原生JS实现的运动框架，并分别用改变高度、宽度、字体大小、边框、透明度来进行测试，欢迎大家复制粘贴及吐槽 。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &.........原创 2019-08-20 23:12:37 · 440 阅读 · 0 评论 -
原生JS实现拖拽照片墙，实现照片互换位置
分享一个用原生JS实现的可拖拽照片墙，效果如下：实现代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽照片墙，实现照............原创 2019-08-03 01:46:35 · 3248 阅读 · 0 评论 -
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效，效果如下：原理比较简单，实现的代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>原生JS实现切换不同图片的特效</title> <style type="text............原创 2019-07-26 13:02:44 · 1294 阅读 · 0 评论 -
原生JS实现苹果菜单栏
分享一个由原生JS实现的苹果菜单栏效果，效果如下：实现的代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现苹果菜单栏&.........原创 2019-07-26 12:36:16 · 872 阅读 · 0 评论 -
原生JS实现立体金字塔
采用原生JS及CSS 3.0实现一个金字塔的效果，这个特效在实际工作中用处不大，纯属娱乐。实现代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>原生JS实现立体金字塔</title> <style t.........原创 2019-07-26 02:20:32 · 2606 阅读 · 0 评论 -
原生JS实现各种运动之链式运动
给大家分享一个用原生JS实现的链式运动，所谓链式运动即为一个属性变化完成后另一个属性接着发生变化，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ut.........原创 2019-08-17 05:19:44 · 414 阅读 · 0 评论 -
原生JS实现轮播图
分享一个用原生JS实现轮播图特效，效果如下：以下是代码实现，详情请看注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>普通轮播图</title> <style type="text.........原创 2019-08-04 20:21:45 · 491 阅读 · 0 评论 -
原生JS实现定时器多段动画
分享一个用原生JS实现的定时器多段动画，效果如下：代码实现如下，详情请看代码注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现定时器多段动画</title> <style&.........原创 2019-08-04 21:49:36 · 827 阅读 · 0 评论 -
原生JS实现目录滚动特效
分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下：实现代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.........原创 2019-07-28 19:33:09 · 1344 阅读 · 0 评论 -
原生JS实现飘浮关键词特效
分享一个原生JS实现的飘浮关键词的效果，鼠标悬停可让关键词停止运动，点击关键词可跳转到对应的页面，效果如下：实现的代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> .........原创 2019-07-27 09:28:12 · 901 阅读 · 0 评论 -
原生JS实现特效导航条
分享一个用原生JS实现的特效导航条，效果如下：实现代码如下：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现特效导航条</.........原创 2019-07-27 13:43:18 · 1599 阅读 · 0 评论 -
原生JS实现各种运动之复合运动
给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=u.........原创 2019-08-17 05:17:28 · 301 阅读 · 0 评论 -
原生JS实现各种运动之重心运动
给大家分享一个用原生JS实现的重心运动，所谓重心运动即为一个元素在向下运动触底时呈一定角度的递减回弹，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=............原创 2019-08-17 05:48:37 · 330 阅读 · 0 评论 -
原生JS实现拖拽鼠标绘画
分享一个用原生JS实现的拖拽鼠标绘画的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-16 12:56:41 · 919 阅读 · 0 评论 -
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &.........原创 2019-08-10 10:32:05 · 1744 阅读 · 1 评论 -
原生JS实现放大镜特效
分享一个用原生JS实现的放大镜效果，效果如下：代码如下：<!doctype html><html><head> <meta charset="UTF-8"> <title>原生JS实现放大镜特效</title> <style> * { .........原创 2019-07-27 10:14:50 · 599 阅读 · 0 评论 -
原生JS实现影集展示特效
分享一个用原生JS与CSS 3.0实现的影集展示特效，效果如下：实现的代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>原生JS与CSS 3.0实现影集展示特效</title> <style type.........原创 2019-07-27 23:29:46 · 872 阅读 · 0 评论 -
原生JS实现各种运动之悬浮侧边栏
在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/.........原创 2019-08-17 10:42:43 · 1734 阅读 · 0 评论