随笔分类 -  js

鼠标上下滚动一次切换一个页面
摘要:其实也就是垂直轮播图的原理,当然可以直接使用轮播图组件去实现,在网上看到一个用很简单的代码就实现了的,一看就懂。 发现一个小bug,我把导航加上了名称并且把hover改为了click,假如当前是第一页,当我先点击了第四页,翻页到第四页,此时用鼠标滚轮向下滚动,是会翻到第二页,这就需要在点击翻页函数中 阅读全文

posted @ 2020-04-22 12:12 dawn888 阅读(2047) 评论(0) 推荐(1) 编辑

移动端页面弹幕小Demo实例说明
摘要:写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明:Demo中页面展示如下图所示: 如果图片挂了,请看文字说明: 简单的说弹幕只完成了一个功能,从右向左缓慢移动 Demo中所涉及到的文字参数说明如下: 行走translateX= 屏幕宽度+弹幕宽度 + 70行走时间:屏幕宽度/50(初始 阅读全文

posted @ 2020-04-20 13:58 dawn888 阅读(248) 评论(0) 推荐(0) 编辑

移动端手写下拉刷新
摘要:codepen F12开启浏览器手机模拟器,在顶部鼠标按住移动 思路 使用touchstart、touchmove、touchend三个事件来监听触摸事件 使用getBoundingClientRect()API来判断当前dom是否在顶部(之前使用document.body.scrollTop并不行 阅读全文

posted @ 2020-04-20 10:39 dawn888 阅读(467) 评论(0) 推荐(1) 编辑

按不同通道加载不同弹幕数据的实现方法
摘要:前言 这个需求如题,大体上是将文章的评论数据,在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候,花了挺多精力的,踩了很多坑,现将弹幕的实现思路写出来,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 实现原理: 实现弹幕的原理,并不算太复杂,耗费一些时间,怼一怼应该都可 阅读全文

posted @ 2020-04-20 10:30 dawn888 阅读(257) 评论(0) 推荐(0) 编辑

animation-play-state 在 ios 中不生效的解决办法(JS篇)
摘要:我们要实现动画的播放和暂停,animation-play-state 在安卓端可以使用,但是在 ios 中不起作用,这时可以使用 js 来实现相同效果。 原理 通过 js 获取当前元素的 transform 属性,通过添加、移除 class 实现 animation 动画。 由于移除 animati 阅读全文

posted @ 2020-04-15 18:32 dawn888 阅读(724) 评论(0) 推荐(0) 编辑

Html5移动端弹幕动画实现示例代码
摘要:已知20条内容要有弹幕效果,分成三层,速度随机。 先来看看效果: 所以这里不考虑填写生成的。只是一个展现的效果。 如果要看填写生成的,请不要浪费Time 思路 把单个内容编辑好,计算自身宽度,确定初始位置 移动的距离是屏幕宽度 js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机 阅读全文

posted @ 2020-04-14 08:00 dawn888 阅读(1176) 评论(0) 推荐(0) 编辑

ES6新特性箭头函数和常用function()对比
摘要:// 无参 var fn1 = function() {} var fn1 = () => {} // 单个参数 var fn2 = function(a) {} var fn2 = a => {} // 多个参数 var fn3 = function(a, b) {} var fn3 = (a, 阅读全文

posted @ 2020-04-10 17:53 dawn888 阅读(219) 评论(0) 推荐(0) 编辑

JavaScript实现简单的弹幕效果实例分析
摘要:不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰。今天我们来写一个简单的弹幕。简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦。 就是由一个p、一个input框另加一个button组成。 <p id="box" cla 阅读全文

posted @ 2020-04-10 16:46 dawn888 阅读(630) 评论(0) 推荐(0) 编辑

从前端到后端实现弹幕的过程(jsp/Jquery.barrager.js)
摘要:Jquery.barrager.js插件,可以去网上下载!下载完后,就把下载文件中的js文件、css文件、图片文件、等等等文件全部拷贝到你们自己的项目中去,千万别拷贝漏了,如果你怕拷贝漏了什么,那就把所有的文件夹都拷贝到你自己的项目中去! 先看我们要做成什么样的效果:如下图 barrage.jsp页 阅读全文

posted @ 2020-04-10 15:23 dawn888 阅读(1209) 评论(0) 推荐(0) 编辑

解决弹幕之间的碰撞问题
摘要:第一次发博客有点小紧脏。事情开始于一周前,因为公司项目需要做一个弹幕展示的功能。室友给我推荐了一款弹幕 https://yaseng.org/jquery.barrager.js/ 插件。网站代码说的很详细,但是,是基于PHP端后台做的,作为一个PHP文盲,真的很无力,但是还好,大致能了解写的什么。 阅读全文

posted @ 2020-04-10 15:20 dawn888 阅读(678) 评论(0) 推荐(0) 编辑

Ajax 简述与基础语法
摘要:目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. 异步通信案例:搜索候选栏 a. 主要功能 b. 代码实现 c. 示例文档与效果图 Ajax Aja 阅读全文

posted @ 2020-04-09 12:54 dawn888 阅读(500) 评论(0) 推荐(0) 编辑

jquery 延迟执行方法
摘要:setTimeout方法使用时需注意: //以下两种方式都行: setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000); function test(){ alert("aaaa"); } //以下是错误示例 阅读全文

posted @ 2020-04-09 11:54 dawn888 阅读(12810) 评论(0) 推荐(0) 编辑

解决同层hover事件重叠闪烁问题
摘要:完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D 阅读全文

posted @ 2020-04-08 12:01 dawn888 阅读(675) 评论(0) 推荐(0) 编辑

解决click与hover(mouseover)的冲突问题
摘要:主要应用到一个知识点:$(selector).data('name','value'); <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 阅读全文

posted @ 2020-04-01 17:51 dawn888 阅读(1838) 评论(0) 推荐(0) 编辑

用SVGDeveloper制作svg地图
摘要:项目中需要实现巴蜀地区图,并且将其分为川东、川西、川南、川北四个区域,鼠标悬浮对应区域的区块改变颜色。经过网上查询资料,并未找到现成的区域图,于是就利用SVGDeveloper工具绘制。 一、绘制地图 1、首先找一张地图作为绘制模板; 2、新建svg文件:File --> New --> svg 点 阅读全文

posted @ 2020-03-31 12:59 dawn888 阅读(758) 评论(0) 推荐(0) 编辑

d3操作svg路径动画,及dom移动
摘要:图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站https://www.vectorizer.io/上生成path路径 2,以下是完整代码及注释 <!DO 阅读全文

posted @ 2020-03-31 11:21 dawn888 阅读(1618) 评论(0) 推荐(0) 编辑

新时代前端必备神器 Snapjs之弹动效果
摘要:有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs 了,这时候再不学 SVG 就晚了!(如果你只会 jQuery 就当我没说。。。)这里我就给大家分享一个前几天在别处看到的一个高大上的 SVG 效果,左边菜单弹出来会动动弹的说,链接点这里。 当时我就震惊了,今天抽 阅读全文

posted @ 2020-03-31 11:19 dawn888 阅读(777) 评论(0) 推荐(0) 编辑

玩转SVG线条动画
摘要:在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度(最好是大于其长度,可以通过.getTotalL 阅读全文

posted @ 2020-03-31 10:03 dawn888 阅读(980) 评论(0) 推荐(0) 编辑

解决Jquery中click里面包含click事件,出现重复执行的问题
摘要:出现问题的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/ 阅读全文

posted @ 2020-03-27 13:09 dawn888 阅读(695) 评论(0) 推荐(0) 编辑

jquery的焦点图片无限循环关键思维
摘要:在循环的时候,关键的是按(下一页按钮)到最后一页的时候和按(上一页按钮)到到第一页的时候如何转换; 首先必须知道3个js方法,prepend()、append()和clone(); prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。 append() 方法在被选元素的结尾(仍然在内 阅读全文

posted @ 2020-03-21 11:08 dawn888 阅读(118) 评论(0) 推荐(0) 编辑

导航

点击右上角即可分享
微信分享提示