HTML+CSS+JS
关注
分享
扫一扫
HTML代码和CSS代码+JS
senwei.zhang
Keep looking until you find it
展开
-
模仿360开机效果
效果图：原图片：代码：<!DOCTYPE html><html><head> <title>360开机效果</title> <style type="text/css"> .box{ width: 322px; position: fi...原创 2020-02-13 10:33:05 · 336 阅读 · 0 评论 -
封装运动函数回掉函数
封装缓动动画回掉函数：<!DOCTYPE html><html><head> <title>封装运动函数回掉函数</title> <style type="text/css"> div { width: 100px; height: 100px; ...原创 2020-02-13 10:30:37 · 267 阅读 · 0 评论 -
JS获取当前样式得函数
JS获取当前样式函数封装：<!DOCTYPE html><html><head> <title>返回当前样式封装函数</title> <style type="text/css"> div { width: 100px; height: 200px; ...原创 2020-02-13 10:28:38 · 336 阅读 · 0 评论 -
缓动动画原理
效果：代码：<!DOCTYPE html><html><head> <title>demo1</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: pink; p...原创 2020-02-13 10:27:26 · 263 阅读 · 0 评论 -
前端js实现点击文字弹出小框
效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px;...原创 2020-02-11 21:27:23 · 2472 阅读 · 1 评论 -
JS 实现点击空白隐藏内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击空白隐藏内容</title> <style> body { height: 2000px; ...原创 2020-02-11 21:28:49 · 823 阅读 · 0 评论 -
JS实现图片跟着鼠标走
效果图code:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片跟着鼠标走</title> <style> img { width: 9...原创 2020-02-11 21:30:10 · 1024 阅读 · 0 评论 -
JS封装匀速动画
效果图代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>匀速动画封装函数</title> <style> #box { position: a...原创 2020-02-11 21:45:35 · 290 阅读 · 0 评论 -
轮播图的动画效果
实现的效果：图片匀速滑动，右下角的小图片也跟着变色。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图-焦点图</title></head><style> *{...原创 2020-02-11 22:39:16 · 1187 阅读 · 0 评论 -
商品图片放大镜效果
京东商品页面中的放大镜效果实现技术：：html+ css + js效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品图片放大镜</title> <style> ...原创 2020-02-06 11:27:54 · 459 阅读 · 0 评论 -
轮播图的简单实现
看上网上的教程，然后自己做了一个简单的轮播图案例：图片是从京东上轮播图扣下来的图片。（自己抠图的时候，记得改下代码中盒子的宽度和图片的宽度一致，以及鼠标放上去的时候target移动盒子的大小=图片大小）效果图如上。代码如下，有注释。<!DOCTYPE html><html lang="en"><head> <meta c...原创 2020-02-04 19:57:56 · 390 阅读 · 0 评论 -
JS使用定时器实现倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器实现倒计时</title> <style> body { font-size: 30px; text-align: c...原创 2020-02-04 10:19:24 · 1903 阅读 · 0 评论 -
CSS样式初始化
/* CSS初始化 */body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,li { margin: 0; padding: 0; list-style: none; font-size: 14px; font-family: 宋体; color: #000;}a { color: #000; text-decoration: none;...原创 2020-01-13 09:03:45 · 462 阅读 · 0 评论 -
如何清除浮动
浮动的原理，是元素脱标不占位，类似于水中的物体浮动到表面，那么何时在网页布局中何时需要清除浮动呢？时机（原因）：父元素（这里指的的div盒子）没有指定高度，并且子元素全部都设置了浮动，造成了脱标，此时父元素没有高度成为了一个线，父元素后边的元素会顶到元素后，给我们的主观感受就是在浮动的子元素下边，这个时候就是会造成布局混乱，此时我们需要清除浮动。下面看一个例子：<...原创 2020-01-07 16:31:05 · 386 阅读 · 0 评论 -
别踩白块-用H5中的Canvas和JavaScript实现。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title> SteppingWhiteBlocks </title> <style type="text/css"> div { ...翻译 2017-08-27 21:15:24 · 1988 阅读 · 0 评论