JavaScript网页特效
分享
扫一扫
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
超级会员免费看
aiguangyuan
要全身心的投入，程序才会有些感觉！
展开
-
正确的用户拖拽方式
要设计一个有感拖拽交互，你可以考虑的反馈效果有：拖拽隐喻、拖拽状态、目标暗示、位置确认、吸附确认和选中状态。考虑到开发成本，和实际场景的复杂性，也不可能所有的拖拽交互都把这些做齐全了。但最好是心里有数，根据情况选择需要的反馈效果。............原创 2022-07-25 00:32:25 · 1430 阅读 · 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>原生JS实现拖动拉.原创 2021-12-13 00:14:10 · 1322 阅读 · 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 · 1164 阅读 · 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>原生JS实现一个好看计原创 2020-06-12 22:45:07 · 1409 阅读 · 0 评论 -
Darkmode.js实现黑暗模式
运用CSS 3.0的过滤属性可以实现黑暗模式，当我们用这个属性实现黑暗模式时，我们会发现图片的颜色会受影响，并不是很美观，是无法完美切换黑暗模式的，而最近出了一个JavaScript辅助插件叫Darkmode.js可以完美的切换黑暗模式。Darkmode.js运用的是CSS里面的一个特性叫mix-blend-mode，这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，再加上Javascript的辅助判断哪些页面上的元素需要黑化的，哪些是不需要黑化的。以下是代码实现，欢..原创 2020-06-10 01:17:53 · 3268 阅读 · 0 评论 -
原生JS实现鼠标滑动撒爱心特效
给大家分享一个鼠标滑动撒爱心的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!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-03 01:44:40 · 1724 阅读 · 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 · 1652 阅读 · 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>原生JS实现原创 2020-06-02 21:25:00 · 3927 阅读 · 0 评论 -
原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出，效果如下:以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X.原创 2020-05-30 21:43:39 · 708 阅读 · 0 评论 -
原生JS实现魔方效果
给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：<!DOCTYPE html><html><head> <title>原生JS实现魔方效果</title> <meta charset="utf-8"> <style type="text/css"> .........原创 2020-04-03 18:44:48 · 1389 阅读 · 0 评论 -
原生JS实现软件卸载对话框（超有趣）
今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。实现效果如下：实现代码如下，首先是HTML：<!DOCTYPE html><html lang="en"><head> <.........原创 2019-12-02 11:32:18 · 1221 阅读 · 3 评论 -
原生JS实现一个简易的运动函数
给大家分享一个用原生JS实现的运动框架，并分别用改变高度、宽度、字体大小、边框、透明度来进行测试，欢迎大家复制粘贴及吐槽 。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &.........原创 2019-08-20 23:12:37 · 450 阅读 · 0 评论 -
原生JS实现各种运动之悬浮侧边栏
在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/.........原创 2019-08-17 10:42:43 · 1739 阅读 · 0 评论 -
原生JS实现弹性运动中需要注意的问题
在使用弹性运动时，需要注意一些小问题，即运动的元素所要改变的属性值不能太小，如果太小在反弹时就会出现负值，导致出现错误，所以要给出一定的限制，下面写一个小Demo，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/h............原创 2019-08-17 10:13:14 · 235 阅读 · 1 评论 -
原生JS实现各种运动之拖拽碰撞加重心运动
分享一个用原生JS实现的拖拽碰撞加上重心运动的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <.........原创 2019-08-17 09:39:16 · 370 阅读 · 0 评论 -
原生JS实现各种运动之缓冲运动
分享一个用原生JS实现的缓冲运动的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-17 09:05:47 · 375 阅读 · 0 评论 -
原生JS实现各种运动之匀速运动
给大家分享一个用原生JS实现的匀速运动，效果如下：需要注意的是，这种运动效果在实际的开发中用的比较少，用的更多的还是弹性运动和缓冲运动，以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/htm.........原创 2019-08-17 09:05:37 · 1161 阅读 · 1 评论 -
原生JS实现各种运动之碰撞运动
给大家分享一个用原生JS实现的碰撞运动，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原.........原创 2019-08-17 09:05:24 · 949 阅读 · 0 评论 -
原生JS实现各种运动之弹性运动
给大家分享一个用原生JS实现的弹性运动，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生.........原创 2019-08-17 09:05:07 · 711 阅读 · 0 评论 -
原生JS实现各种运动之重心运动
给大家分享一个用原生JS实现的重心运动，所谓重心运动即为一个元素在向下运动触底时呈一定角度的递减回弹，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=............原创 2019-08-17 05:48:37 · 334 阅读 · 0 评论 -
原生JS实现各种运动之链式运动
给大家分享一个用原生JS实现的链式运动，所谓链式运动即为一个属性变化完成后另一个属性接着发生变化，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ut.........原创 2019-08-17 05:19:44 · 419 阅读 · 0 评论 -
原生JS实现各种运动之复合运动
给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=u.........原创 2019-08-17 05:17:28 · 302 阅读 · 0 评论 -
原生JS实现动画中的布局转换
在用JS编写动画的时候，经常用会到布局转换，即在运动前将相对定位转为绝对定位，然后执行动画函数。下面给大家分享一个运用原生JS实现的布局转换的Demo，效果如下:以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" cont............原创 2019-08-16 20:04:42 · 340 阅读 · 0 评论 -
原生JS实现拖拽缩放元素
今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <............原创 2019-08-16 18:59:30 · 1905 阅读 · 1 评论 -
原生JS实现拖拽位置预览
给大家分享一个拖拽元素时添加预览的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g.........原创 2019-08-16 13:31:29 · 966 阅读 · 0 评论 -
原生JS解决拖拽后刷新位置丢失问题
在给页面中的元素时行拖拽时，如果拖拽到一半，页面刷新了，上一次拖拽的位置就会丢失，今天给大家分享一个小Demo，主要运用的localStorage来解决的这个问题，以下是代码实现，欢迎大家复制粘贴及吐槽。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content............原创 2019-08-16 13:04:33 · 806 阅读 · 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 · 920 阅读 · 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 · 706 阅读 · 0 评论 -
原生JS中的拖拽方法继承
给大家分享一个用原生JS编写的拖拽及拖拽方法继承的小Demo，代码如下。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS中的拖拽方法继承&l.........原创 2019-08-16 11:52:17 · 303 阅读 · 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 · 1679 阅读 · 7 评论 -
原生JS实现呼吸轮播图
今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ............原创 2019-08-14 13:05:25 · 712 阅读 · 0 评论 -
原生JS实现特效留言框
给大家分享一个用原生JS实现的特效留言框，效果如下：实现代码如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS.........原创 2019-08-13 22:57:23 · 774 阅读 · 0 评论 -
原生JS实现手风琴特效
今天给大家分享一个用原生JS实现的手风琴特效，效果如下：实现代码如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>原生JS实现手风琴特效</title> <style&.........原创 2019-08-12 23:57:19 · 6094 阅读 · 0 评论 -
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下：实现的代码如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........原创 2019-08-12 23:13:16 · 3114 阅读 · 0 评论 -
原生JS实现数码表特效
分享一个用原生JS实现的数码时钟特效，效果如下：上面的数字是用的图片生成的，共10张图片如下：实现代码如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&.........原创 2019-08-11 19:11:02 · 528 阅读 · 0 评论 -
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下：效果还不错吧，当然还需要两个图片。1.书本封面。2.书页实现代码如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; ch.........原创 2019-08-11 09:00:56 · 2273 阅读 · 0 评论 -
原生JS实现书本立体特效
给大家分享一个原生JS实现的书本立体特效，效果如下：实现这个特效需要的三张图片如下：第一张图：0.jpg第二张图 1.jpg第三张图：3.jpg实现代码如下，欢迎大家复制粘贴。<!doctype html><html><head> <meta charset="utf-8"> <t.........原创 2019-08-11 08:59:58 · 971 阅读 · 0 评论 -
原生JS实现翻书特效
给大家分享一个用原生JS与CSS 3.0实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。<!doctype html><html> <head> <meta charset="utf-8"> <title>原生JS与CSS 3.0实现翻书特效</title>.........原创 2019-08-11 08:59:31 · 3749 阅读 · 5 评论 -
原生JS实现腾讯视频轮播图
给大家分享一个用原生JS实现的腾讯视频轮播图特效，实现效果如下：以下是代码实现，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g............原创 2019-08-11 08:59:17 · 2564 阅读 · 0 评论 -
原生JS实现百叶窗特效
分享一个用原生JS实现的百叶窗特效，效果如下：代码实现如下，欢迎大家复制粘贴。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生J............原创 2019-08-10 17:42:24 · 1511 阅读 · 0 评论