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 · 1530 阅读 · 0 评论 -
自定义滚动条
html部分<div class="box" id="box"> <div class="content" id="content"> 床前明月光啊,明月光,疑是地上霜啊,举头 ...... 床前明月光啊,明月光,疑是地上霜啊,举头嘿嘿 </div><!--文字内容--> ...原创 2019-09-04 16:57:26 · 107 阅读 · 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 · 189 阅读 · 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 · 1260 阅读 · 0 评论 -
js中的三大系列小结
offset系列:偏移offsetWidth:获取元素的宽度(有边框) offsetHeight:获取元素的高度(有边框) offsetLeft:获取元素的左边位置的值 offsetRight:获取元素的右边位置的值scroll系列:卷曲scrollLeft:元素向上卷曲的距离 scrollTop:元素向下卷曲的距离 scrollWidth:元素的内容宽度(不包括边框) scr...原创 2019-09-02 15:55:16 · 221 阅读 · 0 评论 -
原生js实现轮播图
轮播图的实现的js部分主要有三个部分组成。轮播图的实现有个关键的点是在把图片放在一组ul中的许多li中,并且在所有的图片最后面要克隆一张与第一张一样的图片,目的是为了实现无缝连接。html部分,代码如下:<div class="all" id="box"> <div class="screen"><!--相框--> <ul&...原创 2019-08-22 21:04:18 · 172 阅读 · 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 · 270 阅读 · 0 评论