sjy7329-CSDN博客

原创放大镜效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css">

2018-12-26 16:33:20 152

原创自定义滚动条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style> *{ margin:0;

2018-12-25 16:15:44 168

原创内容实现拖拽放大缩小

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽放大缩小事件委托</title> <style> *{ margi

2018-12-07 17:21:25 635

原创拖拽事件回放

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽事件回放</title> <style> *{ margin:0;

2018-12-07 14:34:57 180

原创简单的弹出框拖拽关闭事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹出框拖拽关闭事件</title> <style> *{ margin

2018-12-07 09:50:05 820

原创摇色子效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>摇色子</title> <style> #div1{ width:10

2018-11-19 11:32:45 1050

原创两种写三角形的方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .first{ width

2018-11-08 11:15:29 159

原创 js实现轮播效果(二)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;padding:0;lis

2018-11-08 10:05:49 115

原创图片或者元素模块碎片化降落

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:2

2018-11-07 14:43:05 226

原创点击元素依次下落,在点击依次上升

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body&am

2018-11-07 10:07:00 205

原创星星评分效果

<!doctype html><html><head><meta charset="utf-8"><title></title><link href="style.css" rel="stylesheet" type="text/css"

2018-11-05 10:41:13 200

原创 css3实现幻灯片效果

<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { width:

2018-11-02 16:23:44 1097

原创 css3 filter 滤镜

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ width:100%;

2018-10-31 14:09:46 126

原创 js实现轮播效果(一)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin:0;

2018-10-12 16:49:16 815

原创 js留言功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言板</title> <style> * { padding: 0;

2018-10-12 13:46:09 682

原创纯js实现动态时间显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;

2018-10-12 10:34:59 603

原创用css伪类实现文字左右两边有横线的效果

<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=&

2018-10-11 15:48:46 955

原创鼠标移动到标题时,出现从中心向两边水平扩展的下划线

<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=&

2018-10-11 15:35:41 507

原创鼠标移动显示图片一块一块的显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;

2018-10-10 15:32:33 252

原创商品加减,总计

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul id=&q

2018-10-10 14:42:32 179

转载鼠标滚动一次就是一屏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css&

2018-09-17 15:16:04 3513 4

原创 JQuery简单实现锚点链接的平滑滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;p

2018-09-17 14:49:13 803

原创输入样式,内容随之变化

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #box{ width:100px;

2018-09-17 09:45:34 110

原创鼠标划过旋转180度并且切换图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .test { width

2018-09-12 10:46:12 1697

原创纯css实现二级导航

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>企业搜索页面</title> <style> *{ margin:0;

2018-09-11 09:55:12 290

原创解决手机1像素问题

2017-10-17 15:35:02 956

原创无缝滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .btn{ margin:20px auto 0; text-align:cent

2017-10-13 11:22:58 177

原创仿qq信息延时提示框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ float:left; margin:10px; font-size:14px; color:#fff; } #div1{

2017-10-06 14:46:46 697

原创数码时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ color:#fff; background: #171717; font-size:50px; text-align:center;

2017-10-06 14:09:14 232

原创 Cookie, LocalStorage 与 SessionStorage

Cookie Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage localStorage 是 HTML5 标准中新

2017-10-05 15:06:11 807

原创 react.js 显示隐藏效果

constructor(props) { super(props); // 设置 initial state this.state = { style: {display:"block",color:"red"}, actionTitle:false, }; } sh

2017-10-05 14:56:34 10415

原创日历备忘录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .box{ width:250px; height:350px; backgr

2017-09-30 14:01:09 1622

原创简洁风格的Tab

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100%; height:auto; border-bottom:1px #e2e2e2 solid; box-shadow

2017-09-29 11:06:49 314

原创卡片风格的Tab

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100%; height:auto; border:1px #e2e2e2 solid; box-shadow:0 2px

2017-09-29 10:29:03 227

原创 table 隔行变色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload = function () { var oTab = document.getElementById('tab'); var oTr = oTa

2017-09-23 16:36:10 260

原创 table 搜索内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oBtn=document.getElementById('btn'); var oName=document.

2017-09-23 14:25:17 390

原创 table排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload = function () { var oBtn = document.getElementById('btn'); var oTab = do

2017-09-23 13:35:10 343

原创 table 删除内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oTab=document.getElementById('tab'); var oName=document.

2017-09-23 11:28:04 386

原创 table添加内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script> window.onload=function(){ var oTab=document.getElementById('tab'); var oName=document.

2017-09-23 10:36:04 368

原创 flex布局（3）

三、悬挂式布局html代码如下：<div class="box"> <img src="icon.jpeg" class="box-figure" width="60px" height="60px" /> <div class="box-body"> <div>标题</div> <p>内容部内容部内容部内容部分内容部内容部内容部内容部内容部内容部内容部</p> </di

2017-09-22 15:29:29 188

空空如也

空空如也