免费的js特效网 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js 实现下雪特效

直接上代码放到你的script 标签中具体效果参考博客页面 (function($){ $.fn.snow = function(options){ var $flake = $('<div id

27.1K1 0

苹果官网产品展示特效

给大家分享一个由原生JS实现的苹果官网产品展示特效，看起来很不错，效果如下：以下是代码实现，欢迎大家复制粘贴。苹果官网产品展示特效...miaov_head a:hover { color: #555; } js.../move.js"> //封装函数通过class去选取元素（由于IE8以下对getElementsByClassName...move.js代码。

13.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效.../* 第三个封面 */ background: url(images/2.jpg) 0 0; /*scaleX将翻书镜像后的图像还原镜像...800px) rotateY(-180deg)'; setTimeout(function () { // 翻页后瞬间更换下一页的背景...bottomNode.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)'; // 更换翻页后的纸背景

25.1K0 1

原生JS实现切换不同图片的特效

分享一个由原生JS实现的图片切换特效，效果如下：原理比较简单，实现的代码如下：原生JS实现切换不同图片的特效 <style

21.2K1 0

原生JS实现书本立体特效

给大家分享一个原生JS实现的书本立体特效，效果如下：实现这个特效需要的三张图片如下：第一张图：0.jpg 第二张图 1.jpg 第三张图：3.jpg 实现代码如下，欢迎大家复制粘贴。原生JS实现书本立体特效 <style type

18.7K1 0

jquery特效，不用再写繁琐的js脚本

之前做一些js特效，网上找的一些demo，都是很长很长的js脚本。但是没办法，只能原样copy /paste，写出来的还不能用。唉，苦逼啊。。...但是前几天发现，有些特效如果用jquery的话就可以很简单的实现某些特效，而不必在书写繁琐的js代码。...如实现一个窗口的拖拽，如果使用javascript可能会写大几十行的代码，但是使用jquery，只需一个方法就可以实现，但必须导入jquery-ui.min.js（可能早有大神们知道这个了，小弟也是刚学...stylesheet" type="text/css"/> js..."> js"></script

1.5K1 0

原生JS实现球面展示特效

分享一个由原生JS实现的球面展示效果，效果如下：实现代码如下：原生JS...实现球面展示特效 body { background-color: #000; } #div1...hover { color: red } JS...a>试听精品视频 SEO 特效

15.9K1 0

原生JS实现涟漪按钮特效

给大家分享一个用原生JS实现的涟漪按钮特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现按钮涟漪特效 * { margin: 0; padding:

28.5K2 0

原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： ? 实现代码如下：原生JS...实现目录滚动特效 body { font-size: 12px; line-height: 24px...2013-11-06 6.导航条菜单的制作...con2.innerHTML = con1.innerHTML; //向上滚动函数 function scrollUp() { //当滚动列表向滚动的高度大于等于列表自身的高度时

38.6K2 0

JS特效：跟随鼠标移动的小飞机

前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。效果源码实现的原理是...如果想独自享用此功能，不想让他人知道原理、不想被他人修改，可以将核心JS代码进行混淆加密。比如用JShaman对上述JS代码加密。加密后的代码，会成为以下形式，使用起来还跟加密前一样。...0x4b6716,_0x4781f6,_0x57584e,_0x4dbb11,_0x295d49){return _0x38eb(_0x4b6716-0x233,_0x4781f6);}count++;}一个小小的JS...特效，但效果挺不错。

5.2K2 0

生日主题的烟花特效HTML,CSS,JS

="UTF-8"> 生日烟花特效...烟花功能：每个烟花是由 Firework 类生成的粒子组成，模拟了绚丽的散开效果。生日主题：中心的文字动画通过 @keyframes glow 实现，配合文字生日快乐！...如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：点赞来表达你的喜爱，关注以获取我的最新消息，评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

2.5K1 0

原生JS实现VR看图特效

现在很多看车或是看房的网站都有VR看图的效果，看起来比较高端，类似于下面这样的效果： ? 那么这种效果是如何实现的呢？...其实原理很简单，就是连续拍摄了多个角度的图片，然后根据用户的操作加载不同角度的图片。上面这个效果其实也是由多个图片共同完成的，下面这些图片就是在代码中需要引入的图片，它们的角度是连续的。 ?...以下是这个效果的代码实现，由于图片太多，就不一一上传了，大家多看注释，理解其原理即可。原生JS...实现VR看图特效 body { margin: 0; } img {

17.6K2 0

关于js特效轮播图练习

【出现问题】 js轮播图，图片未正常轮播。【解决方法】通过对代码的检查，发现是以下三个原因造成的错误。　　...1.js代码问题 js代码使用alert(test);，测试修改完毕后，发现依然没有解决错误。

3.9K1 0

three.js 实现火花特效

上周末刚在原神里抽到了“火花骑士”可莉，于是就心血来潮，想用three.js来实现一种火系的特效，不是炸弹的爆炸，而是炸弹爆炸后在草上留下的火花效果 ?...RBvmVJ.jpg 游戏里的效果相对比较卡通化，而本文的效果将更加逼近现实一点 ? 让我们开始吧！...://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/也可以入门，掌握了基础概念后就可以开始了本项目需要用到：笔者的three.js...简要说下思路：ray marching获取的值改成光线位置pos和光线移动的进度strength，光线位置的y轴将用于设定火花的颜色；光线移动的进度strength用于设定火花的形状（这里就是椭圆） #...R0fRFH.gif 莫名感觉像黑魂3里的芙莉德修女的黑焰，尽管这样也很cool，我们还是给它加上颜色，让它更像现实中的火花给火花加上颜色将颜色通过mix函数混合起来（强度是光线位置的y轴），和之前的颜色相乘即可

15.8K2 0

原生JS实现拖拽翻书特效

给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下：效果还不错吧，当然还需要两个图片。 1.书本封面。 2.书页实现代码如下，欢迎大家复制粘贴。原生JS...实现拖拽翻书特效 body, h2, p { margin: 0;... js.../index.js"> 以下上面代码中引入的index.js代码，为核心代码。

11.7K1 0

原生JS实现数码表特效

分享一个用原生JS实现的数码时钟特效，效果如下：上面的数字是用的图片生成的，共10张图片如下：实现代码如下，欢迎大家复制粘贴。原生JS...实现数码表特效 body { background: blue; color: white;...images/' + nextStr.charAt(arr[i]) + '.png'; } //数组中不同的字符所对应名称的图片的高度等于它内容高度每次减...= aImg[arr[i]].offsetHeight + iSpeed + 'px'; //数组中不同的字符所对应名称的图片的top值等于它内容高度1

20.2K1 0

原生JS实现影集展示特效

分享一个用原生JS实现的影集展示特效，效果如下：实现的代码如下：原生JS实现影集展示特效 <style type...arr.push(allLi[i].className); }; onclick = function () { // 删除开头的，

18.7K1 0

原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：实现的代码如下：原生JS实现图片爆炸特效 <style type...zIndex; //让下一张图片位于爆作图之下 zIndex--; index++; //如果三张不同的图片切换完...oDiv.style.height = boom_node.offsetHeight / T + 'px'; //浮动生成大的div...}; //自调函数,让爆炸之前底部切换到下一张 show(x, y); //清除爆炸后小div的占位

22.3K2 0

原生JS实现特效留言框

给大家分享一个用原生JS实现的特效留言框，效果如下：实现代码如下，欢迎大家复制粘贴。特效留言框 * { margin: 0; padding: 0 }...}; // 欢乐的留言框文字特效,很经典 function toHead() { var oHead = id("head");...;" id="btn">亲，请完成此处以下是上面引入的最重要的...public.js代码，里面封装了很多有用的方法。

20K1 0

产品动态 | 腾讯特效SDK免费测试，多样美颜特效带来丰富应用玩法

随着直播、短视频业务的爆发式增长，丰富多样的视频特效，自然生动的智能美颜，新奇有趣的贴纸玩法也受到大量关注，为多种视频场景注入了新的生机与活力。...---- 腾讯特效SDK当前提供最长28天的免费测试，您可以免费申请腾讯特效模块的测试版 License体验测试。...（可点击文末「阅读原文」查看具体规则） - 产品功能 - 腾讯特效SDK基于优图精准的 AI 能力和天天P图丰富的实时特效处理，为各类视频处理场景提供智能美颜、特效滤镜、动态贴纸、自然美妆以及智能分割...便捷的使用方法快速搭建视频场景中的美颜特效能力。腾讯特效 SDK 是音视频终端 SDK（腾讯云视立方）的重要组成部分，移动端支持与直播 SDK 、短视频 SDK、音视频通话 SDK 灵活集成。...Web 小程序 Android 腾讯特效SDK提供免费测试，您可以免费申请腾讯特效模块的测试版 License（免费测试有效期为14天，可续期1次，共28天）体验测试。

6.8K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭