Js和jQuery实现的特效❤️
文章平均质量分 61
都是一些我们在工作中做网页实用的特效
Sestid
不忘初心!不负野心!奋于曾经,立于当下,拼于未来。
展开
-
一分钟教你学会ajax、async/await联调接口!!!
在实现前后台分离之后,后台只需要给前台提供相应的接口(数据请求地址),而众多的接口如果没有很好的管理,对于开发和维护都是很不友好的,如果我们在每个页面需要获取数据的时候直接,通过Ajax调用传参如:$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json ...原创 2020-01-15 11:07:13 · 5570 阅读 · 1 评论 -
CSS实现自动播放相册------Sestid
效果展示:以下是两种实现方式(CSS或者js)CSS代码:<!DOCTYPE html><html><head> <style> html { background-color: black; width: 100%; height: 100%; display: ...原创 2019-11-04 10:41:19 · 928 阅读 · 0 评论 -
Js自定义快捷键并实现上下左右移动
JS代码实现自定义热键实现功能:1.自定义上下左右键2.使用自定义热键或者使用键盘上下左右键移动图片效果图:代码:<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>使用自定义按键实现图片移动</title> ...转载 2019-10-17 13:59:15 · 1663 阅读 · 1 评论 -
Js实现购物车加减,价格计算等功能
需求说明:1、单击“半闭”按钮时,关闭当前页面购物车页面2、单击“移入收藏”弹出收藏提示3、单击“删除”弹出确认删除提示4、单击“结算”按钮,弹出结算信息页面窗口5、自动计算商品总计6、单击“删除”按钮,使用parentNode访问当前节点的父亲节点等,使用removeChild( )删除当前商品效果图:代码:<!DOCTYPE html><ht...原创 2019-10-14 17:55:33 · 11765 阅读 · 6 评论 -
Js实现生成自定义输入行列宽高表格------Sestid
样式图:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/table1.js"></script> </head> <body...转载 2019-10-14 15:00:27 · 1208 阅读 · 1 评论 -
为什么我的CSDN上都是开关灯??????Js实现开灯关灯特效
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <style> body { color: #333; background-color: #000;...转载 2019-10-14 13:34:37 · 296 阅读 · 1 评论 -
Js实现input全选、全不选、反选功能------Sestid
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全选和反选</title> <script type="text/javascript"> function $(id){ return...转载 2019-10-12 16:39:14 · 648 阅读 · 1 评论 -
Js实现点击置顶效果(带动画)
样式图:代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js置顶动画</title> <style> *{margin:0;padding:0;} ul {width: 1...原创 2019-10-12 16:32:24 · 687 阅读 · 1 评论 -
canvas画布实现的集中效果
1、canvas-画布图片旋转样式图:代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="./jquery.js"></script> <title></title> <st...原创 2019-10-12 15:32:15 · 388 阅读 · 1 评论 -
vivo官网鼠标触碰图片拉长------Sestid
.animate({属性:目标},function(){目标完成后执行})清除定时器:.stop()【每个动画后都需要清除一次定时器】stop有两个参数,默认情况下为false1.动画列队(第一个参数): false:不操作 true:清空2.当前动画(第二个参数): false:立即停止 true:立即到终点样式图:全部代码: (图片自...原创 2019-10-12 14:52:56 · 465 阅读 · 1 评论 -
Js实现炫酷仿抖罗盘时钟------Sestid
样式图:(动态旋转的罗盘,刚打开时还有炫酷的折叠变换)全部代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-10-11 15:42:26 · 7633 阅读 · 35 评论 -
点击出现对应界面(第二个界面可以选择显示内容)------Sestid
样式图:主页代码:1.html<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>这是一个跳转的table卡&l...原创 2019-10-11 15:30:47 · 416 阅读 · 1 评论 -
js实现购物时选带属性的商品------Sestid
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...原创 2019-09-25 12:01:04 · 565 阅读 · 1 评论 -
JS实现拖拽效果------Sestid
实现拖拽效果的实现思路以及演示代码:实现思路:1、在CSS中设置你要进行拖拽的图片或者元素的样式2、在JS中获取元素,以及他的宽高和浏览器的宽高3、在要被拖拽的元素上绑定鼠标按下事件4、阻止浏览器默认行为5、获取光标在元素按下时的坐标6、绑定元素移动事件7、获取光标在可视窗口的坐标8、计算拖动的图片定位位置9、判断是否在窗口范围内10、设置拖动过程中图片的定位11、绑定...原创 2019-09-05 16:59:41 · 367 阅读 · 0 评论 -
js或jQuery实现返回顶部功能------Sestid
1、纯js,无动画版本window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2、纯js,带动画版本生硬版:var scrollToTop = window.setInterval(function() { var pos = window.pageYOffset; if ( pos >...原创 2019-09-05 14:11:15 · 132 阅读 · 0 评论 -
Js或jQuery图片层叠轮播------Sestid
目录原生Js3张图片层叠轮播:html:CSS:JavaScript:jQuery6张图片层叠轮播:html:css:javaScript:详细解析:原生Js3张图片层叠轮播:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-09-04 15:48:35 · 2515 阅读 · 2 评论 -
jQuery实现html网页顶部自适应导航栏(media)------Sestid
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>jQuery自适应网页顶部...原创 2019-09-06 14:21:45 · 1306 阅读 · 1 评论 -
鼠标悬停显示下划线(带小特效)------Sestid
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>鼠标悬停下划线</title> <style> body { display: flex; justify-content: center; ...原创 2019-09-06 14:52:52 · 1759 阅读 · 1 评论 -
jQuery 实现input搜索框自动匹配------Sestid
效果动态图:源代码:<!doctype html><html><head><meta charset="utf-8"><title>HTML5 JS实现搜索匹配功能-jq22.com</title><script src="https://libs.baidu.com/jquery/1.11...转载 2019-09-06 16:02:50 · 2096 阅读 · 4 评论 -
Js 实现回车键触发登录,并弹出需要输入信息------Sestid
效果图:最简单的捕捉回车键:判断按下的是不是回车键,提示:回车键的键值为 13<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script lang...转载 2019-09-06 16:10:10 · 415 阅读 · 0 评论 -
Js或者jQuery实现点击图片出现蒙层并将图片放大在蒙层上------Sestid
我们先看一个比较简单的(用jQuery实现)示例图:点击中间图片后...代码html:<div class="middle-mid"> <img class="img-responsive" src="./calculate-png/car-phone.png" /></div><div class="toggle...原创 2019-09-11 16:19:08 · 1516 阅读 · 1 评论 -
Js实现跟随鼠标移动的小球------Sestid
以下就是全部代码(纯Js)<!DOCTYPE html><html><head> <title>follow mouse</title></head><style type="text/css"> *{ margin: 0; padding:0; ...原创 2019-09-12 11:59:36 · 542 阅读 · 0 评论 -
原生js实现自定义倒计时效果------Sestid
倒计时的实现,主要使用了时间对象,定时器,计算时间戳效果图:全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-09-25 11:52:27 · 473 阅读 · 0 评论 -
原生js实现生成随机验证码=------Sestid
效果图:全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-09-25 11:55:04 · 123 阅读 · 1 评论 -
jQuery实现倒计时秒杀效果------Sestid
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"&g...原创 2019-09-06 10:35:23 · 501 阅读 · 0 评论