![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js-webApi
dom 和 bom
hind sight
记录学习前端的点滴
展开
-
原生js实现贪吃蛇之食物随机出现部分
html部分 <div class="map"></div> css部分 .map { width: 800px; height: 800px; /*渐变*/ background: linear-gradient(to bottom, rgb(10, 10, 50) 1...原创 2019-09-05 20:51:36 · 1512 阅读 · 0 评论 -
自定义滚动条
html部分 <div class="box" id="box"> <div class="content" id="content"> 床前明月光啊,明月光,疑是地上霜啊,举头 ...... 床前明月光啊,明月光,疑是地上霜啊,举头嘿嘿 </div><!--文字内容--> ...原创 2019-09-04 16:57:26 · 97 阅读 · 0 评论 -
原生js实现高清放大镜效果
html部分 <div class="box" id="box"> <div class="small"><!--小层--> <img src="images/small.jpg" width="350" height="450" alt=""/> <div class="mask"></d...原创 2019-09-03 20:38:05 · 176 阅读 · 0 评论 -
原生js实现旋转木马效果
html部分 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href=""><img src="images/slidepic1.jpg" alt=""></a><...原创 2019-09-02 16:03:46 · 1233 阅读 · 0 评论 -
js中的三大系列小结
offset系列:偏移 offsetWidth:获取元素的宽度(有边框) offsetHeight:获取元素的高度(有边框) offsetLeft:获取元素的左边位置的值 offsetRight:获取元素的右边位置的值 scroll系列:卷曲 scrollLeft:元素向上卷曲的距离 scrollTop:元素向下卷曲的距离 scrollWidth:元素的内容宽度(不包括边框) scr...原创 2019-09-02 15:55:16 · 214 阅读 · 0 评论 -
原生js实现轮播图
轮播图的实现的js部分主要有三个部分组成。轮播图的实现有个关键的点是在把图片放在一组ul中的许多li中,并且在所有的图片最后面要克隆一张与第一张一样的图片,目的是为了实现无缝连接。 html部分,代码如下: <div class="all" id="box"> <div class="screen"><!--相框--> <ul&...原创 2019-08-22 21:04:18 · 164 阅读 · 0 评论 -
原生js的简易百度搜索栏
<div id="dv"> <input type="text" id="txt"> <input type="button" value="搜索" id="btn"> </div> <script src="common.js"></script> <script> ...原创 2019-08-15 16:41:25 · 256 阅读 · 0 评论