sjy7329-CSDN博客

原创放大镜效果

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

2018-12-26 16:33:20 214

原创自定义滚动条

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

2018-12-25 16:15:44 226

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

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

2018-12-07 17:21:25 709

原创拖拽事件回放

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

2018-12-07 14:34:57 235

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

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

2018-12-07 09:50:05 878

原创摇色子效果

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

2018-11-19 11:32:45 1169

原创两种写三角形的方式

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

2018-11-08 11:15:29 221

原创 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 172

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

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

2018-11-07 14:43:05 289

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

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

2018-11-07 10:07:00 262

原创星星评分效果

<!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 258

原创 css3实现幻灯片效果

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

2018-11-02 16:23:44 1162

原创 css3 filter 滤镜

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

2018-10-31 14:09:46 194

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

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

2018-10-12 16:49:16 879

原创 js留言功能

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

2018-10-12 13:46:09 751

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

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

2018-10-12 10:34:59 665

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

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

2018-10-11 15:48:46 1085

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

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

2018-10-11 15:35:41 567

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

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

2018-10-10 15:32:33 316

原创商品加减,总计

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

2018-10-10 14:42:32 234

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

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

2018-09-17 15:16:04 3693 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 865

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

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

2018-09-17 09:45:34 161

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

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

2018-09-12 10:46:12 1799

原创纯css实现二级导航

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

2018-09-11 09:55:12 396

原创解决手机1像素问题

2017-10-17 15:35:02 1043

原创无缝滚动

<!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 218

原创仿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 748

原创数码时钟

<!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 293

原创 Cookie, LocalStorage 与 SessionStorage

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

2017-10-05 15:06:11 841

原创 react.js 显示隐藏效果

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

2017-10-05 14:56:34 10543

原创日历备忘录

<!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 1692

原创简洁风格的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 378

原创卡片风格的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 287

原创 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 313

原创 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 455

原创 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 404

原创 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 449

原创 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 439

原创 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 239

空空如也

空空如也