51Dev开发社区
登录 注册

#Javascript实用效果整理

html+css实现下拉菜单效果
直接来看代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>*{margin:0;padd...
代码星球 代码星球·2021-02-20

js实现查找替换关键字的效果
昨天写的例子是查找关键字，今天就在其基础上更改一下便可实现可以替换这些关键字的效果，布局稍有改变：<inputtype="text"/><inputtype="text"/><inputtype="button"value="替换"/><pid="box">轻轻的我走了，...
代码星球 代码星球·2021-02-20

js实现查找关键字效果
一般情况下，我们操作页面上都会有查找某个关键字的的功能，那么今天也简单写一下关键查找页面上关键字的效果！首先页面上要写入一部分内容，然后要有搜索框，来看一下布局：<inputtype="text"/><inputtype="button"value="查找"/><pid="box">...
代码星球 代码星球·2021-02-20

原生js解决倒计时结束图片抖动之后移动消失的效果
标题看着复杂其实需求就是：一张图片在一段时间倒计时结束之后，先抖动一下然后向下移动消失。不明白什么意思的可以看下图解释：直接来看布局代码，直接把布局以及css都写在一起了：<style>#img{position:absolute;left:15px;top:80px;}#time{width:150px;...
代码星球 代码星球·2021-02-20

原生js解决图片渐渐变透明的效果
今天来封装一个简单的js效果，就是点击一张图片，渐渐的图片的透明度为0，即为图片消失的效果。来看布局即为一张图片：<!--需求：点击图片，透明度降低--><imgid="img"width="180"src="img/pic4.jpg"/>js效果如下：<script>window....
代码星球 代码星球·2021-02-20

原生js实现多组图片抖动效果的问题
昨天把多组图片抖动效果实现了，但是有一个问题就是关于快速多次移动到图片上的时候会出现移动事件结束之后图片不在原来位置。就像下图所示： 这个问题的关键是：获取的位置都是移动事件之后重新刷新的位置，所以又去加抖动频率，重新又实现一次抖动效果，以便于会有图片最后出现上图的问题了。解决这个关键就是要做个判断，每次实现...
代码星球 代码星球·2021-02-20

多组抖动效果的图片js封装
昨天提到了单个图片的抖动效果，那么今天来写一下多组图片实现抖动效果的封装，这种效果也许在日常的项目中会用到，简单封装一下，就不用每次都写差不多一样的代码了，好的来看html和css的布局，其实很简单就是两张图片：<style>img{position:absolute;top:200px;left:300p...
代码星球 代码星球·2021-02-20

原生js实现图片抖动效果
今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到0），然后将其放入定时器内，让其慢慢自动停下来。来看代码布局：<style>#img{positio...
代码星球 代码星球·2021-02-20

原生js实现全选和反选以及任意一个未被选中的效果
模仿一个百度音乐的全选和反选的的操作。html代码如下：<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><...
代码星球 代码星球·2021-02-20

模仿QQ菜单的手风琴效果（点击当前展示其“兄弟”关闭）
上一篇博客的内容主要是模仿QQ菜单写出的类似手风琴的效果，今天就来改进一下这个手风琴效果，点击当前的，当前展开，其他的关闭，总之就是要实现点击其中一个，其他的关闭的效果，关于布局和样式的代码，见上一篇博客，今天主要来看看js的处理：1<script>2window.onload=function(){3va...
代码星球 代码星球·2021-02-20

QQ菜单案例，点击展开再次点击关闭（类似手风琴效果）
模仿一下qq的好友展示效果，点击好友标题，下民饿好友列表展示出来，而点击其中的一个好友，给其加上一个点击的效果样式，当然再次点击标题，可以将其关闭。说的可能不是很清楚，先来看一下布局，就明白想要的效果了，来看布局代码：1<ulid="list">2<liclass="lis">3<h2&g...
代码星球 代码星球·2021-02-20

整理string类常见方法的使用说明
整理String类的Length()、charAt()、getChars()、replace()、toUpperCase()、toLowerCase()、trim()、toCharArray()使用说明Length():可以用来计算字符串的长度。例如： String s=new Strin...
代码星球 代码星球·2021-02-20

javascript 面向对象整理
　　整理一下js面向对象中的封装和继承。　　js中封装有很多种实现方式，这里列出常用的几种。　　直接将我们的成员写入对象中，用函数返回。缺点：很难看出是一个模式出来的实例。代码：functionStu(name,score){return{name:name,score:score}}varstu1=Stu("张三",...
代码星球 代码星球·2021-02-18

javascript 面向对象制作坦克大战 （一）
 　　PS：这个坦克大战是在网上下的一段源码之后，自己进行的重写。 写这个的目的是为了巩固自己这段时间对js的学习。整理到博客上，算是对自己近端时间学习js的一个整理。同时也希望可以帮助到学习js的园友。由于自己也是刚学js不久，所以难免出现错误。如果发现希望给予指正。 这个教程适合熟悉j...
代码星球 代码星球·2021-02-18

用javascript 面向对象制作坦克大战（二）
2.1 创建障碍物对象群   对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。 Barrier.js: ViewCode 2.2  写入地图的数据。在Common.js中添加以下代码： V...
代码星球 代码星球·2021-02-18
首页上一页...7891011...下一页尾页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他