![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js基础案例
qq_42736234
这个作者很懒,什么都没留下…
展开
-
原生js实现放大镜
思路:1、移入移出事件:移入目标盒子出现放大镜盒子和遮罩层盒子2、Tab切换:点击下面列表选项切换目标盒子内容3、鼠标移动:(1)拖拽和边界判定:用鼠标移动遮罩层盒子位置(2)调整放大镜盒子背景图片大小,使背景图片移动位置与遮罩层盒子移动位置成比例效果:一、css和html<div id="wrap"> <section> ...原创 2020-01-28 23:11:44 · 156 阅读 · 0 评论 -
原生js实现滚动歌词
思路:原创 2020-01-28 22:14:35 · 1433 阅读 · 4 评论 -
Tab切换
js实现Tab切换(选项卡)Tab切换:点击或者鼠标划过时不同导航栏时,下面内容自动切换一 布局<div> <ul> <li class="active1">1</li> <li>2</li> <li>3</li&g...原创 2019-12-31 12:07:16 · 317 阅读 · 0 评论 -
鼠标拖拽和边界吸附
思路:1、拖拽获取元素绑定事件:当鼠标按下时,可以拖走;鼠标移动时,拖着走;鼠标抬起时,不能拖走2、边界值判定当鼠标将要超过边界值是,强行让元素位置固定在边界上效果:一、布局<div id="drag"></div>二、css样式* { margin: 0; padding: 0; ...原创 2020-01-03 16:43:51 · 1306 阅读 · 0 评论 -
js制作轮播图
我的轮播图功能有:自动播放、点击焦点切换和点击左右按钮切换效果图:自动轮播点击焦点切换注意:本文用带背景颜色的li标签指代图片,有需要的话可以将图片插入li标签内思路:基础布局和css样式(1) 给盛放要轮播的图片的盒子绝对定位js中的代码(2) 复制第一张图片放在盒子最后,复制最后一张图片放在盒子最前,以保证轮播图左右滑动效果(否则看起来会有一点卡顿)(3)设置盒子位置...原创 2020-01-07 21:25:58 · 413 阅读 · 0 评论 -
js动态表格创建
js动态表格创建1、一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有3列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的1、一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有3列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的1 布局<table>...原创 2019-12-29 17:53:55 · 4691 阅读 · 3 评论