├── img ├── blog.jpg ├── dui.png ├── ico.png ├── li1.jpg ├── li2.jpg ├── li3.jpg ├── li4.jpg ├── li5.jpg ├── logo.jpg ├── mark.png ├── github.jpg ├── gongzi.gif ├── peony.jpg ├── to-top.png ├── 页面展示源文件.psd ├── myphoto2.jpg ├── myphoto3.jpg ├── myphoto4.jpg ├── myphoto5.jpg ├── qianduan.gif ├── shanghai.gif ├── skill │ ├── css.png │ ├── git.png │ ├── js.png │ ├── ps.png │ ├── ws.png │ ├── html.png │ ├── jquery.png │ ├── node.png │ └── angular.png ├── blog-select.jpg ├── chengxuyuan.png ├── information.png ├── onmouseover1.jpg ├── onmouseover2.jpg ├── onmouseover3.jpg ├── phoneNumber.gif ├── smallPeony.jpg ├── xiaoxikuang1.jpg ├── xiaoxikuang2.png ├── 页面展示源文件-列表小图.psd ├── github-select.jpg └── FEdemo │ ├── FE │ ├── demo-list.jpg │ ├── demo-list-1.jpg │ ├── demo-list-11.jpg │ ├── demo-list-2.jpg │ ├── demo-list-2.psd │ ├── demo-list-3.jpg │ ├── demo-list-4.jpg │ ├── demo-list-5.jpg │ ├── demo-list-6.jpg │ └── demo-list-7.jpg │ ├── node │ ├── demo-list2.jpg │ ├── demo-list2-1.jpg │ └── demo-list2-2.jpg │ ├── ps │ ├── demo-list3-1.jpg │ ├── demo-list3-2.jpg │ ├── demo-list3-3.jpg │ ├── demo-list3-4.jpg │ └── demo-list3-5.jpg │ └── marketing │ ├── demo-list4.jpg │ ├── demo-list4-2.jpg │ ├── demo-list4-3.jpg │ ├── demo-list4-4.jpg │ └── demo-list4-5.jpg ├── 0备份存档 └── V0.01 │ ├── img │ ├── blog.jpg │ ├── dui.png │ ├── ico.png │ ├── li1.jpg │ ├── li2.jpg │ ├── li3.jpg │ ├── li4.jpg │ ├── li5.jpg │ ├── logo.jpg │ ├── mark.png │ ├── peony.jpg │ ├── github.jpg │ ├── gongzi.gif │ ├── to-top.png │ ├── 页面展示源文件.psd │ ├── myphoto2.jpg │ ├── myphoto3.jpg │ ├── myphoto4.jpg │ ├── myphoto5.jpg │ ├── qianduan.gif │ ├── shanghai.gif │ ├── skill │ │ ├── css.png │ │ ├── git.png │ │ ├── html.png │ │ ├── js.png │ │ ├── node.png │ │ ├── ps.png │ │ ├── ws.png │ │ ├── jquery.png │ │ └── angular.png │ ├── smallPeony.jpg │ ├── blog-select.jpg │ ├── chengxuyuan.png │ ├── information.png │ ├── onmouseover1.jpg │ ├── onmouseover2.jpg │ ├── onmouseover3.jpg │ ├── phoneNumber.gif │ ├── xiaoxikuang1.jpg │ ├── xiaoxikuang2.png │ ├── 页面展示源文件-列表小图.psd │ ├── github-select.jpg │ └── FEdemo │ │ ├── FE │ │ ├── demo-list.jpg │ │ ├── demo-list-1.jpg │ │ ├── demo-list-11.jpg │ │ ├── demo-list-2.jpg │ │ ├── demo-list-2.psd │ │ ├── demo-list-3.jpg │ │ ├── demo-list-4.jpg │ │ ├── demo-list-5.jpg │ │ ├── demo-list-6.jpg │ │ └── demo-list-7.jpg │ │ ├── node │ │ ├── demo-list2.jpg │ │ ├── demo-list2-1.jpg │ │ └── demo-list2-2.jpg │ │ ├── ps │ │ ├── demo-list3-1.jpg │ │ ├── demo-list3-2.jpg │ │ ├── demo-list3-3.jpg │ │ ├── demo-list3-4.jpg │ │ └── demo-list3-5.jpg │ │ └── marketing │ │ ├── demo-list4.jpg │ │ ├── demo-list4-2.jpg │ │ ├── demo-list4-3.jpg │ │ ├── demo-list4-4.jpg │ │ └── demo-list4-5.jpg │ ├── README.md │ ├── js │ ├── dragJs │ │ ├── drag.js │ │ ├── index.js │ │ ├── event.js │ │ └── tween.js │ ├── index.js │ └── dom.js │ ├── 开发此项目踩的坑.md │ ├── css │ └── style.css │ └── index.html ├── README.md ├── js ├── dragJs │ ├── drag.js │ ├── index.js │ ├── event.js │ └── tween.js ├── index.js └── dom.js ├── my.md ├── 开发此项目踩的坑.md ├── css └── style.css └── index.html /img/blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/blog.jpg -------------------------------------------------------------------------------- /img/dui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/dui.png -------------------------------------------------------------------------------- /img/ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/ico.png -------------------------------------------------------------------------------- /img/li1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/li1.jpg -------------------------------------------------------------------------------- /img/li2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/li2.jpg -------------------------------------------------------------------------------- /img/li3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/li3.jpg -------------------------------------------------------------------------------- /img/li4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/li4.jpg -------------------------------------------------------------------------------- /img/li5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/li5.jpg -------------------------------------------------------------------------------- /img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/logo.jpg -------------------------------------------------------------------------------- /img/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/mark.png -------------------------------------------------------------------------------- /img/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/github.jpg -------------------------------------------------------------------------------- /img/gongzi.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/gongzi.gif -------------------------------------------------------------------------------- /img/peony.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/peony.jpg -------------------------------------------------------------------------------- /img/to-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/to-top.png -------------------------------------------------------------------------------- /img/页面展示源文件.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/页面展示源文件.psd -------------------------------------------------------------------------------- /img/myphoto2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/myphoto2.jpg -------------------------------------------------------------------------------- /img/myphoto3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/myphoto3.jpg -------------------------------------------------------------------------------- /img/myphoto4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/myphoto4.jpg -------------------------------------------------------------------------------- /img/myphoto5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/myphoto5.jpg -------------------------------------------------------------------------------- /img/qianduan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/qianduan.gif -------------------------------------------------------------------------------- /img/shanghai.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/shanghai.gif -------------------------------------------------------------------------------- /img/skill/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/css.png -------------------------------------------------------------------------------- /img/skill/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/git.png -------------------------------------------------------------------------------- /img/skill/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/js.png -------------------------------------------------------------------------------- /img/skill/ps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/ps.png -------------------------------------------------------------------------------- /img/skill/ws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/ws.png -------------------------------------------------------------------------------- /img/blog-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/blog-select.jpg -------------------------------------------------------------------------------- /img/chengxuyuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/chengxuyuan.png -------------------------------------------------------------------------------- /img/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/information.png -------------------------------------------------------------------------------- /img/onmouseover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/onmouseover1.jpg -------------------------------------------------------------------------------- /img/onmouseover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/onmouseover2.jpg -------------------------------------------------------------------------------- /img/onmouseover3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/onmouseover3.jpg -------------------------------------------------------------------------------- /img/phoneNumber.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/phoneNumber.gif -------------------------------------------------------------------------------- /img/skill/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/html.png -------------------------------------------------------------------------------- /img/skill/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/jquery.png -------------------------------------------------------------------------------- /img/skill/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/node.png -------------------------------------------------------------------------------- /img/smallPeony.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/smallPeony.jpg -------------------------------------------------------------------------------- /img/xiaoxikuang1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/xiaoxikuang1.jpg -------------------------------------------------------------------------------- /img/xiaoxikuang2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/xiaoxikuang2.png -------------------------------------------------------------------------------- /img/页面展示源文件-列表小图.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/页面展示源文件-列表小图.psd -------------------------------------------------------------------------------- /img/github-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/github-select.jpg -------------------------------------------------------------------------------- /img/skill/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/skill/angular.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/blog.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/dui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/dui.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/ico.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/li1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/li1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/li2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/li2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/li3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/li3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/li4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/li4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/li5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/li5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/logo.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/mark.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/peony.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/peony.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/github.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/gongzi.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/gongzi.gif -------------------------------------------------------------------------------- /0备份存档/V0.01/img/to-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/to-top.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/页面展示源文件.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/页面展示源文件.psd -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/myphoto2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/myphoto2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/myphoto3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/myphoto3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/myphoto4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/myphoto4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/myphoto5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/myphoto5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/qianduan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/qianduan.gif -------------------------------------------------------------------------------- /0备份存档/V0.01/img/shanghai.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/shanghai.gif -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/css.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/git.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/html.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/js.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/node.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/ps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/ps.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/ws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/ws.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/smallPeony.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/smallPeony.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-1.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-11.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-2.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-2.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-2.psd -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-3.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-4.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-5.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-6.jpg -------------------------------------------------------------------------------- /img/FEdemo/FE/demo-list-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/FE/demo-list-7.jpg -------------------------------------------------------------------------------- /img/FEdemo/node/demo-list2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/node/demo-list2.jpg -------------------------------------------------------------------------------- /img/FEdemo/ps/demo-list3-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/ps/demo-list3-1.jpg -------------------------------------------------------------------------------- /img/FEdemo/ps/demo-list3-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/ps/demo-list3-2.jpg -------------------------------------------------------------------------------- /img/FEdemo/ps/demo-list3-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/ps/demo-list3-3.jpg -------------------------------------------------------------------------------- /img/FEdemo/ps/demo-list3-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/ps/demo-list3-4.jpg -------------------------------------------------------------------------------- /img/FEdemo/ps/demo-list3-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/ps/demo-list3-5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/blog-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/blog-select.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/chengxuyuan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/chengxuyuan.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/information.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/onmouseover1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/onmouseover1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/onmouseover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/onmouseover2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/onmouseover3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/onmouseover3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/phoneNumber.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/phoneNumber.gif -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/jquery.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/xiaoxikuang1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/xiaoxikuang1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/xiaoxikuang2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/xiaoxikuang2.png -------------------------------------------------------------------------------- /0备份存档/V0.01/img/页面展示源文件-列表小图.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/页面展示源文件-列表小图.psd -------------------------------------------------------------------------------- /img/FEdemo/node/demo-list2-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/node/demo-list2-1.jpg -------------------------------------------------------------------------------- /img/FEdemo/node/demo-list2-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/node/demo-list2-2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/github-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/github-select.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/skill/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/skill/angular.png -------------------------------------------------------------------------------- /img/FEdemo/marketing/demo-list4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/marketing/demo-list4.jpg -------------------------------------------------------------------------------- /img/FEdemo/marketing/demo-list4-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/marketing/demo-list4-2.jpg -------------------------------------------------------------------------------- /img/FEdemo/marketing/demo-list4-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/marketing/demo-list4-3.jpg -------------------------------------------------------------------------------- /img/FEdemo/marketing/demo-list4-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/marketing/demo-list4-4.jpg -------------------------------------------------------------------------------- /img/FEdemo/marketing/demo-list4-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/img/FEdemo/marketing/demo-list4-5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-11.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-2.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-2.psd -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-6.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/FE/demo-list-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/FE/demo-list-7.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/node/demo-list2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/node/demo-list2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/ps/demo-list3-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/ps/demo-list3-1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/ps/demo-list3-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/ps/demo-list3-2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/ps/demo-list3-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/ps/demo-list3-3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/ps/demo-list3-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/ps/demo-list3-4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/ps/demo-list3-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/ps/demo-list3-5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/node/demo-list2-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/node/demo-list2-1.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/node/demo-list2-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/node/demo-list2-2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/marketing/demo-list4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/marketing/demo-list4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/marketing/demo-list4-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/marketing/demo-list4-2.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/marketing/demo-list4-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/marketing/demo-list4-3.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/marketing/demo-list4-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/marketing/demo-list4-4.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/img/FEdemo/marketing/demo-list4-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/my-resume-like-tmall/HEAD/0备份存档/V0.01/img/FEdemo/marketing/demo-list4-5.jpg -------------------------------------------------------------------------------- /0备份存档/V0.01/README.md: -------------------------------------------------------------------------------- 1 | # 电子商务版的简历模板（纯手写，无框架） 2 | ###原生JS+HTML+CSS，兼容到IE56789，全兼容，优雅降低， 3 | 4 | 测试环境 5 | 6 | - chrome 7 | - IETeser中的678910 8 | - win系统自带的IE57891011； 9 | 10 | 现在的作品品展示页等都是给写死的，打算等功能加的差不多后，再重构下；作品页，技能总结都做成json格式，直接用过拼接字符串的形式显示；高度自适应； -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 电子商务版的简历模板（纯手写，无框架） 2 | ###原生JS+HTML+CSS，没有用任何框架 3 | ###兼容到IE56789，全兼容，优雅降低方案 4 | 5 | 预览的地址：https://anbang.blog/demo/resume/index.html 6 | 7 | 预览： 8 | ![](http://i.imgur.com/FnpYxFw.png) 9 | 10 | PSD设计稿在：[http://pan.baidu.com/s/1ntPl6Fv](http://pan.baidu.com/s/1ntPl6Fv)；修改文件方式可以在 PSCC 里面，先要设置，首选项>增效工具>启动生成器；并且在文件>生成>图像资源前打钩；在 PSD 所在的文件夹下会自动生成修改后的文件；可以直接修改； 这个仓库里也有单独模块的PSD文件，也可以在那里改 11 | 12 | 测试环境 13 | 14 | - chrome 15 | - IETeser中的678910 16 | - win系统自带的IE57891011； 17 | 18 | 现在的作品品展示页等都是给写死的，打算等功能加的差不多后，再重构下；作品页，技能总结都做成json格式，直接用过拼接字符串的形式显示；高度自适应； 19 | 20 | #写这个简历踩到的坑 21 | 因为用原生JS写的，并且JS,CSS都兼容到IE56789，所以才到的坑还是很多的；[点此查看](https://github.com/Broszhu/my-resume-like-tmall/blob/master/%E5%BC%80%E5%8F%91%E6%AD%A4%E9%A1%B9%E7%9B%AE%E8%B8%A9%E7%9A%84%E5%9D%91.md)； 22 | 23 | #下次打算加的功能 24 | - 图片延迟加载（按需加载）； 25 | - 图片显示方式，动态跳跃显示，类似忍者先快后慢入，先慢后快出； 26 | - 以模块化开发的方式写； 27 | - 重构JS代码逻辑 28 | 29 | -------------------------------------------------------------------------------- /js/dragJs/drag.js: -------------------------------------------------------------------------------- 1 | function down(e){//把down发布为一个事件；让别人能够约定的标识符； 2 | //识别符："selfDragStart" ; 3 | this.x=this.offsetLeft; 4 | this.y=this.offsetTop; 5 | this.mouseX= e.pageX; 6 | this.mouseY= e.pageY; 7 | if(this.setCapture){ 8 | this.setCapture(); 9 | on(this,"mousemove",move); 10 | on(this,"mouseup",up); 11 | }else{ 12 | this._move=bindThis(this,move); 13 | this._up=bindThis(this,up); 14 | on(document,"mousemove",this._move); 15 | on(document,"mouseup",this._up); 16 | } 17 | e.preventDefault();//阻止默认行为，解决盒子因为加了图片，站住鼠标的BUG； 18 | fire.call(this,"selfDragStart",e);//这个是接口； 19 | } 20 | function move(e){ 21 | this.style.left=this.x+ (e.pageX-this.mouseX)+"px"; 22 | this.style.top=this.y+ (e.pageY-this.mouseY)+"px"; 23 | fire.call(this,"selfDragMove",e);//这个是接口； 24 | } 25 | function up(e){ 26 | if(this.releaseCapture){ 27 | this.releaseCapture(); 28 | off(this,"mousemove",move); 29 | off(this,"mouseup",up); 30 | }else{ 31 | off(document,"mousemove",this._move); 32 | off(document,"mouseup",this._up); 33 | } 34 | fire.call(this,"selfDragEnd",e);//这个是接口； 35 | } -------------------------------------------------------------------------------- /0备份存档/V0.01/js/dragJs/drag.js: -------------------------------------------------------------------------------- 1 | function down(e){//把down发布为一个事件；让别人能够约定的标识符； 2 | //识别符："selfDragStart" ; 3 | this.x=this.offsetLeft; 4 | this.y=this.offsetTop; 5 | this.mouseX= e.pageX; 6 | this.mouseY= e.pageY; 7 | if(this.setCapture){ 8 | this.setCapture(); 9 | on(this,"mousemove",move); 10 | on(this,"mouseup",up); 11 | }else{ 12 | this._move=bindThis(this,move); 13 | this._up=bindThis(this,up); 14 | on(document,"mousemove",this._move); 15 | on(document,"mouseup",this._up); 16 | } 17 | e.preventDefault();//阻止默认行为，解决盒子因为加了图片，站住鼠标的BUG； 18 | fire.call(this,"selfDragStart",e);//这个是接口； 19 | } 20 | function move(e){ 21 | this.style.left=this.x+ (e.pageX-this.mouseX)+"px"; 22 | this.style.top=this.y+ (e.pageY-this.mouseY)+"px"; 23 | fire.call(this,"selfDragMove",e);//这个是接口； 24 | } 25 | function up(e){ 26 | if(this.releaseCapture){ 27 | this.releaseCapture(); 28 | off(this,"mousemove",move); 29 | off(this,"mouseup",up); 30 | }else{ 31 | off(document,"mousemove",this._move); 32 | off(document,"mouseup",this._up); 33 | } 34 | fire.call(this,"selfDragEnd",e);//这个是接口； 35 | } -------------------------------------------------------------------------------- /my.md: -------------------------------------------------------------------------------- 1 | ##一年前端经验，四年设计经验，JS基础扎实 2 | ####轻度工作狂，可接受高强度加班，期望工资8K/月 3 | 4 | - 性别：男 5 | - 出生：1990年 6 | - 户籍：安徽宿州 7 | - 教育信息：大专 8 | - 婚姻状况：已婚 9 | - 现在住址：杭州五常(目前是暂住朋友这里的，没有确定住在哪里；等工作确定后在单位附近租房) 10 | - 到岗时间：随时到岗 11 | - 参加工作时间：2010年6月（其中前端经验一年） 12 | 13 | ##项目经验： 14 | ####1、电子商务版的简历 15 | - 在线地址：[https://github.com/Broszhu/my-resume-like-tmall ](https://github.com/Broszhu/my-resume-like-tmall) 16 | - 描述：原生JavaScript+HTML+CSS； 没有用任何第三方框架，纯手写； 17 | - 兼容到IE5、IE678910和标准浏览器； 18 | - 优雅降级方案，项目中用的类库是自己封装的； 19 | - 项目中有做常见电子商务中的放大镜效果，图片拖拽效果等； 20 | 21 | ####2、 我封装的类库 22 | - DOM库：[在线地址](https://github.com/Broszhu/My-JavaScript-is-a-clover/tree/master/DOM/封装DOM库) 23 | - 动画库：[在线地址](https://github.com/Broszhu/My-JavaScript-is-a-clover/tree/master/DOM/动画/封装动画库) 24 | - 事件库：[在线地址](https://github.com/Broszhu/My-JavaScript-is-a-clover/tree/master/DOM/事件/封装的事件库) 25 | - 模仿jQuer封装的类库；用的是构造函数+原型继承封装的； 26 | 27 | ####3、移动端的下载站 28 | - 在线地址：[http://taobao.fm/works/youku2/list.html](http://taobao.fm/works/youku2/list.html) 29 | - 描述： 用HTML5+CSS3+zepto做的移动端页面； 30 | 31 | ####4、nodeJs做的博客站 32 | - github仓库：[https://github.com/Broszhu/zhuanbangBlog](https://github.com/Broszhu/zhuanbangBlog) 33 | - 描述：用nodeJs配合bootstrap、mongoDB；是跟着网上的教程做的； 34 | 35 | ####5、用photoshop设计的一款平面作品； 36 | - 描述：用是photoshop做的，[在线演示地址](http://taobao.fm/archives/1155) 37 | 38 | ###更多总结，请移步我的博客 39 | 40 | ##技术记录地址： 41 | - 个人博客：[taobao.fm](http://taobao.fm/) （[前端作品归类](http://taobao.fm/前端demo)，[设计作品归类](http://taobao.fm/设计demo)） 42 | - GitHub：[github.com/broszhu](https://github.com/Broszhu) 43 | 44 | ##技能总结： 45 | 46 | - 可手写符合w3c标准的代码，用DIV+CSS布局常见页面，高度还原设计图； 47 | - 熟练处理IE6+及chrome浏览器的兼容性问题，CSS和JS代码可兼容至IE6； 48 | - 有个人开发JS类库的经验；曾封装过DOM库，动画库，事件库，掌握模块化开发； 49 | - JS基础扎实，不借助第三方类库和框架可进行项目开发 50 | - 熟练使用jQuery；研读过源码，不仅熟悉jQuery的使用，且知道代码背后的逻辑和原理； 51 | - 熟悉HTTP协议，AJAX,了解浏览器和服务器交互机制 52 | - 对Web前端超级感兴趣，善用搜索引擎，较强的自学能力和对新技术的追求，乐于分享； 53 | - 有移动端WEB页面的开发经验和案例； 54 | - 使用nodeJs+mongoDB+bootstrap搭建过博客，但对nodeJs仅限于借助搜索引擎会用阶段； 55 | - 熟练使用npm包管理工具，熟练使用git工具进行团队合作； 56 | - 平面设计功底深厚，熟练使用photoshop，可与设计师无缝对接； 57 | 58 | ##自我总结 59 | 轻度工作狂，热爱前端，就不说那些团队合作，吃苦耐劳之类的套话了；如果工作中遇到棘手的事或者紧急项目，不会找借口和拖进程，就算是加班到深夜，我也会先把事情给做好；假如项目中需要用到从未使用过的新技术/新框架，我相信我可以最快速度的用它来干活； 60 | 61 | - 自学前端入门，一年前端经验，JS基础扎实； 62 | - 懂设计，熟练使用photoshop； 63 | - 轻度工作狂，接受加班； 64 | 65 | ##联系方式 66 | - 邮箱：ooxx@zhu.me 67 | - 手机：139-5654-9211 68 | - 可面试时间：每天8:00--23:00； 69 | 70 | ##已经离职，可随时到岗 71 | -------------------------------------------------------------------------------- /js/dragJs/index.js: -------------------------------------------------------------------------------- 1 | var dom=new Tool(); 2 | var photolist=document.getElementById("photolist"); 3 | var oLis=photolist.getElementsByTagName("li"); 4 | for(var i=oLis.length-1;i>=0;i--){ 5 | var oLi=oLis[i]; 6 | oLi.l=oLi.offsetLeft; 7 | oLi.t=oLi.offsetTop; 8 | oLi.style.left=oLi.l+"px"; 9 | oLi.style.top=oLi.t+"px"; 10 | oLi.style.position="absolute"; 11 | oLi.style.margin=0; 12 | 13 | on(oLi,"mousedown",down); 14 | on(oLi,"selfDragStart",zIndexNum); 15 | on(oLi,"selfDragMove",getHitedEle); 16 | on(oLi,"selfDragEnd",changePosition); 17 | 18 | } 19 | 20 | var zIndex=1; 21 | function zIndexNum(){ 22 | this.style.zIndex=++zIndex; 23 | this.style.backgroundColor="#cb5c55" 24 | } 25 | function restore(){ 26 | this.style.backgroundColor="" 27 | } 28 | 29 | function isHited(r,b){//判断是否判断 30 | if(r.offsetLeft+ r.offsetWidth< b.offsetLeft 31 | || r.offsetTop+ r.offsetHeight< b.offsetTop 32 | || r.offsetLeft> b.offsetLeft+ b.offsetWidth 33 | || r.offsetTop> b.offsetTop+ b.offsetHeight){ 34 | return false; 35 | }else{ 36 | return true; 37 | } 38 | } 39 | 40 | //*获取相交最近的li*// 41 | function getHitedEle(){ 42 | this["aHitedEle"]=[]; 43 | var subs= dom.getSiblings(this); 44 | for(var i=0;idistance){ 67 | oMin.min=distance; 68 | oMin.ele=oLi; 69 | } 70 | } 71 | } 72 | /*下面是加动画效果的*/ 73 | starMove(oMin.ele,{left:this.l,top:this.t},600,8,restore); 74 | starMove(this,{left:oMin.ele.l,top:oMin.ele.t},600,8,restore); 75 | //*下面是更新交换后的位置*//* 76 | var objEle={l:this.l,t:this.t}; 77 | this.l=oMin.ele.l; 78 | this.t=oMin.ele.t; 79 | oMin.ele.l=objEle.l; 80 | oMin.ele.t=objEle.t; 81 | this["aHitedEle"]=null; 82 | }else{ 83 | starMove(this,{left:this.l,top:this.t},600,8,restore) 84 | } 85 | setTimeout(function(){ 86 | for(var i=oLis.length-1;i>=0;i--){ 87 | var oLi=oLis[i]; 88 | oLi.style.background="#fff" 89 | } 90 | },500) 91 | 92 | } -------------------------------------------------------------------------------- /0备份存档/V0.01/js/dragJs/index.js: -------------------------------------------------------------------------------- 1 | var dom=new Tool(); 2 | var photolist=document.getElementById("photolist"); 3 | var oLis=photolist.getElementsByTagName("li"); 4 | for(var i=oLis.length-1;i>=0;i--){ 5 | var oLi=oLis[i]; 6 | oLi.l=oLi.offsetLeft; 7 | oLi.t=oLi.offsetTop; 8 | oLi.style.left=oLi.l+"px"; 9 | oLi.style.top=oLi.t+"px"; 10 | oLi.style.position="absolute"; 11 | oLi.style.margin=0; 12 | 13 | on(oLi,"mousedown",down); 14 | on(oLi,"selfDragStart",zIndexNum); 15 | on(oLi,"selfDragMove",getHitedEle); 16 | on(oLi,"selfDragEnd",changePosition); 17 | 18 | } 19 | 20 | var zIndex=1; 21 | function zIndexNum(){ 22 | this.style.zIndex=++zIndex; 23 | this.style.backgroundColor="#cb5c55" 24 | } 25 | function restore(){ 26 | this.style.backgroundColor="" 27 | } 28 | 29 | function isHited(r,b){//判断是否判断 30 | if(r.offsetLeft+ r.offsetWidth< b.offsetLeft 31 | || r.offsetTop+ r.offsetHeight< b.offsetTop 32 | || r.offsetLeft> b.offsetLeft+ b.offsetWidth 33 | || r.offsetTop> b.offsetTop+ b.offsetHeight){ 34 | return false; 35 | }else{ 36 | return true; 37 | } 38 | } 39 | 40 | //*获取相交最近的li*// 41 | function getHitedEle(){ 42 | this["aHitedEle"]=[]; 43 | var subs= dom.getSiblings(this); 44 | for(var i=0;idistance){ 67 | oMin.min=distance; 68 | oMin.ele=oLi; 69 | } 70 | } 71 | } 72 | /*下面是加动画效果的*/ 73 | starMove(oMin.ele,{left:this.l,top:this.t},600,8,restore); 74 | starMove(this,{left:oMin.ele.l,top:oMin.ele.t},600,8,restore); 75 | //*下面是更新交换后的位置*//* 76 | var objEle={l:this.l,t:this.t}; 77 | this.l=oMin.ele.l; 78 | this.t=oMin.ele.t; 79 | oMin.ele.l=objEle.l; 80 | oMin.ele.t=objEle.t; 81 | this["aHitedEle"]=null; 82 | }else{ 83 | starMove(this,{left:this.l,top:this.t},600,8,restore) 84 | } 85 | setTimeout(function(){ 86 | for(var i=oLis.length-1;i>=0;i--){ 87 | var oLi=oLis[i]; 88 | oLi.style.background="#fff" 89 | } 90 | },500) 91 | 92 | } -------------------------------------------------------------------------------- /js/dragJs/event.js: -------------------------------------------------------------------------------- 1 | /*on:是负责往数组里安排一个队列的，程序池*/ 2 | function on(ele,type,fn){ 3 | /*约定type如果以self开头的字符串，就是自定义事件，如果不是的，就是系统的事件*/ 4 | if(/^self/.test(type)){//判断是否是自定义事件，这里是自定义事件； 5 | if(!ele[type]){ 6 | ele[type]=[]; 7 | } 8 | var aryEvent=ele[type]; 9 | for(var i=0;i" 104 | pBigImg.appendChild(bigImg); 105 | container.appendChild(pBigImg); 106 | 107 | #做个人页面的时候，用雪碧图的时候，背景图片不出来； 108 | 原本代码： 109 | 110 | #introduces .left ul li .user{background: url("../img/ico.png")no-repeat 0 0;} 111 | 修改后的代码 112 | 113 | #introduces .left ul li .user{background: url("../img/ico.png") no-repeat 0 0;} 114 | 仅仅是相差了一个空格；在no-repeat前面打一个空格即可； 115 | 116 | #经典padding兼容性问题； 117 | IE低版本会把padding算成width的一部分；在做技能技能书的时候，如果用padding-left属性让文字向右；在地版本IE里就会有误差；解决的办法是可以用首行空格算；使用text-indent: 11px;即可；这个属性如果写text-indent: 2em;代表的就是坑2个字符； 118 | 119 | #当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 120 | 对和文字相连接的img、input、textarea、select、object等元素加以属性 121 | 122 | margin: (所属line-height-自身img,input,select,object高度)/2px 0; 123 | vertical-align:middle 124 | 如果整个页面中有很多Img时，可以直接定义 125 | 126 | img{ 127 | margin: (所属line-height-自身img,input,select,object高度)/2px 0; 128 | vertical-align:middle 129 | } 130 | 网上也有人说是，line-height只可以应用于inline行内元素。所以line-height属性的设置对input元素是无效的。 131 | 132 | display:block; /*转换块级*/ 133 | display:inline; /*转换行内*/ 134 | display:inline-block; /* 其实仍未行内元素设置width及height属性等*/ 135 | 但是我设置display:inline;还是不行； 136 | 137 | 因为我是需要一次性设置9张图片，所以没有好的解决办法；然后就直接改素材，把素材该大即可； 138 | #当一个css样式同时设置了float和margin的属性的时候，在ie7+及火狐上，该元素显示正常。但是在ie6下，将会出现双倍的margin属性值， 139 | 140 | 上面的就是双倍的margin-left；解决办法是解决此办法的最简单的方法是，在style中添加：display:inline; 141 | 142 | 143 | 144 | #IE6中line-height的兼容性问题； 145 | 146 | height:59px; 147 | line-height: 60px; 148 | 149 | 上面的代码，在IE6中会被解析为，宽度是60px的；只需要把line-height改的和height一样就可以了； 150 | 151 | #margin-bottom在标准和IE不一致的时候（IE有时候会多一些像素），可以用display:inline-block转一下，然后统一设置，这样就可以了 152 | 153 | display:inline-block 154 | 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。 155 | 156 | # 文字两边对齐 157 | 158 | 用text-align即可； 159 | 160 | text-align:justify; -------------------------------------------------------------------------------- /0备份存档/V0.01/开发此项目踩的坑.md: -------------------------------------------------------------------------------- 1 | 2 | #开发中遇到的坑 3 | ###0、IE6下div图片下边4px空隙bug的解决办法 4 | 清零的时候设置img为“display:block;”这样就可以了 5 | 6 | ###1、在开发商品详情页时候，个人博客鼠标移入后在IE5-7中z-index时效 7 | 原因是：IE7及更早版本对z-index的解析有个讨厌的Bug，如果父元素具有position: relative/absolute;属性，那么只设置子元素的z-index是不起作用的，父元素也得一起设置。也就是说必须把要控制元素和它上层的所有DIV都加上z-index才行。 8 | 9 | #放大镜功能，天坑合集！ 10 | ###1、放大镜效果中；大图片的left和top兼容问题；左右便捷判断 11 | // bigImg.style.left="-"+(l/tabW*bigImg.width)+"px"; 12 | // bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 13 | //如果样式用上面的写，在IE678的时候有兼容性问题，应该改为下面的 14 | if(l<=0){ 15 | bigImg.style.left=="0px"; 16 | }else{ 17 | bigImg.style.left="-"+l/tabW*bigImg.width+"px"; 18 | } 19 | if(t<=0){ 20 | bigImg.style.top=="0px"; 21 | }else{ 22 | bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 23 | } 24 | 25 | ###2、放大镜效果中，因为要兼容到IE5678，所以用一个DIV抱住元素，必须用定位；但是放大镜的镜片mark定位需要与鼠标相连；需要算出小图片的left值；此时需要用到元素距离浏览器左边框的距离； 26 | 解决办法是：算出距离左上角的绝对left和top来；然后再去操作,写一个函数解决； 27 | 28 | function offset() { 29 | var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent; 30 | while (par) { 31 | left += par.offsetLeft; 32 | top += par.offsetTop; 33 | if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) { 34 | left += par.clientLeft; 35 | top += par.clientTop; 36 | } 37 | par = par.offsetParent; 38 | } 39 | return { 40 | left: left, 41 | top: top 42 | }; 43 | } 44 | 45 | ###3、在滚动图片的时候；放大镜会错位； 46 | 解决办法是，使用scrollTop来操作；然后监听页面的滚动事件；只要滚动了页面，就强制刷新一个滚动出的值； 47 | 48 | function getWin(attr) { 49 | return document.documentElement[attr] || document.body[attr]; 50 | } 51 | //上面的函数获取元素的属性，解决clientHeight，scrollTop等的兼容性问题； 52 | 53 | //获取鼠标滚动掉的像素;鼠标滚动的时候，强制刷新winTop; 54 | var winTop =getWin("scrollTop"); 55 | window.onscroll=function(){ 56 | winTop =getWin("scrollTop"); 57 | } 58 | ###放大镜的镜片不透明在IE6的解决办法 59 | 用低不透明的png图片，然后再加一个边框；因为低不透明度的图片在在IE里不显示，直接为空的；只显示边框；这样也可以达到指定范围的效果； 60 | 61 | #浮动层的div被select遮挡 62 | 原因： 63 | 在IE中,select属于window类型控件，它会“挡住”所有非window类型控件 64 | 可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的， 65 | 他们被渲染在客户区的绘画表面上， 66 | 而select是使用的标准windows控件，只是作为客户区的子控件放置而已， 67 | 它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件， 68 | 比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。 69 | 70 | **解决办法**： 71 | 72 | 1. 修改select，不用标准select，而是自己用其他html元素模拟 73 | 2. 修改你的div，使用iframe。 74 | 3. 在div被显示的时候或者到达select所在位置时隐藏select 75 | 4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。 76 | 5.Object对象的优先度较高,可以挡住select框 77 | 78 | **最好的解决办法最好的方法**：iframe来当作div的底 79 | Div被Select挡住，是一个比较常见的问题。 80 | 有的朋友通过把div的内容放入iframe或object里来解决。 81 | 可惜这样会破坏页面的结构，互动性不大好。 82 | 83 | 这里采用的方法是： 84 | 85 | 虽说div直接盖不住select 86 | 但是div可以盖iframe，而iframe可以盖select, 87 | 所以，把一个iframe来当作div的底， 88 | 这个div就可以盖住select了. 89 | 90 | 原来的JS代码是： 91 | 92 | var bigImg=document.createElement("img"); 93 | bigImg.src="img/peony.jpg"; 94 | bigImg.id="bigImg"; 95 | container.appendChild(bigImg); 96 | 97 | 改后的是： 98 | 99 | var bigImg=document.createElement("img"); 100 | bigImg.src="img/peony.jpg"; 101 | bigImg.id="bigImg"; 102 | var pBigImg=document.createElement("p"); 103 | pBigImg.innerHTML="" 104 | pBigImg.appendChild(bigImg); 105 | container.appendChild(pBigImg); 106 | 107 | #做个人页面的时候，用雪碧图的时候，背景图片不出来； 108 | 原本代码： 109 | 110 | #introduces .left ul li .user{background: url("../img/ico.png")no-repeat 0 0;} 111 | 修改后的代码 112 | 113 | #introduces .left ul li .user{background: url("../img/ico.png") no-repeat 0 0;} 114 | 仅仅是相差了一个空格；在no-repeat前面打一个空格即可； 115 | 116 | #经典padding兼容性问题； 117 | IE低版本会把padding算成width的一部分；在做技能技能书的时候，如果用padding-left属性让文字向右；在地版本IE里就会有误差；解决的办法是可以用首行空格算；使用text-indent: 11px;即可；这个属性如果写text-indent: 2em;代表的就是坑2个字符； 118 | 119 | #当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 120 | 对和文字相连接的img、input、textarea、select、object等元素加以属性 121 | 122 | margin: (所属line-height-自身img,input,select,object高度)/2px 0; 123 | vertical-align:middle 124 | 如果整个页面中有很多Img时，可以直接定义 125 | 126 | img{ 127 | margin: (所属line-height-自身img,input,select,object高度)/2px 0; 128 | vertical-align:middle 129 | } 130 | 网上也有人说是，line-height只可以应用于inline行内元素。所以line-height属性的设置对input元素是无效的。 131 | 132 | display:block; /*转换块级*/ 133 | display:inline; /*转换行内*/ 134 | display:inline-block; /* 其实仍未行内元素设置width及height属性等*/ 135 | 但是我设置display:inline;还是不行； 136 | 137 | 因为我是需要一次性设置9张图片，所以没有好的解决办法；然后就直接改素材，把素材该大即可； 138 | #当一个css样式同时设置了float和margin的属性的时候，在ie7+及火狐上，该元素显示正常。但是在ie6下，将会出现双倍的margin属性值， 139 | 140 | 上面的就是双倍的margin-left；解决办法是解决此办法的最简单的方法是，在style中添加：display:inline; 141 | 142 | 143 | 144 | #IE6中line-height的兼容性问题； 145 | 146 | height:59px; 147 | line-height: 60px; 148 | 149 | 上面的代码，在IE6中会被解析为，宽度是60px的；只需要把line-height改的和height一样就可以了； 150 | 151 | #margin-bottom在标准和IE不一致的时候（IE有时候会多一些像素），可以用display:inline-block转一下，然后统一设置，这样就可以了 152 | 153 | display:inline-block 154 | 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。 155 | 156 | # 文字两边对齐 157 | 158 | 用text-align即可； 159 | 160 | text-align:justify; -------------------------------------------------------------------------------- /js/dragJs/tween.js: -------------------------------------------------------------------------------- 1 | function starMove(ele,jsonStr,duration,moveTypeNum,fnCallback){ 2 | //多态：方法重载：JS如何实现方法重载。一个方法，可以有不同类型或个数的参数 3 | //方法重写：子类上的方法覆盖了父类上的方法 4 | var typeNum=moveType.jiansu4.starOut; 5 | if(typeof moveTypeNum =="number"){ 6 | if(moveTypeNum===4){ 7 | typeNum=moveType.jiansu4.starOut; 8 | }else if(moveTypeNum ===6){ 9 | typeNum=moveType.jiansu4.starOut; 10 | }else if(moveTypeNum ===7 ){ 11 | typeNum=moveType.jiansu7.starOut; 12 | }else if(moveTypeNum===8){ 13 | typeNum=moveType.dabai.starOut; 14 | }else if(moveTypeNum===9){ 15 | typeNum=moveType.xiaobai.starOut; 16 | }else if(moveTypeNum===10){ 17 | typeNum=moveType.fantan.starOut; 18 | } 19 | }else if(typeof moveTypeNum=="object"){ 20 | if(moveTypeNum instanceof Array){ 21 | /*输入模式是["fantan","starInOut"]*/ 22 | if(moveTypeNum.length==1){ 23 | typeNum=moveType[moveTypeNum[0]];//moveTypeNum[0]是获取line方法 24 | }else if(moveTypeNum.length==2){ 25 | typeNum=moveType[moveTypeNum[0]][moveTypeNum[1]]//moveType.jiansu1.starIn/out/inOut; 26 | } 27 | } 28 | }else if(typeof moveTypeNum=="function"){ 29 | fnCallback=moveTypeNum; 30 | } 31 | 32 | var oBegin={};//不同方向的起始值； 33 | var oChange={};//不同方向的运动距离； 34 | var booleanNum=0; 35 | for(var attr in jsonStr){ 36 | var begin=setCss(ele,attr); 37 | var target=jsonStr[attr]; 38 | var change=target-begin; 39 | if(change){ 40 | oBegin[attr]=begin; 41 | oChange[attr]=change; 42 | booleanNum++; 43 | } 44 | } 45 | if(booleanNum===0){ 46 | if(typeof fnCallback=="function"){ 47 | fnCallback.call(ele); 48 | } 49 | return; 50 | }else{ 51 | var interval=13; 52 | var times=0; 53 | clearInterval(ele.timer); 54 | ele.timer=window.setInterval(move,interval); 55 | function move(){ 56 | times+=interval; 57 | if(times>=duration){ 58 | clearInterval(ele.timer); 59 | ele.timer=null; 60 | for(var attr in jsonStr){ 61 | setCss(ele,attr,jsonStr[attr]); 62 | } 63 | if(typeof fnCallback=="function"){ 64 | fnCallback.call(ele); 65 | } 66 | }else{ 67 | for(var attr in oChange){ 68 | //动画效果在这里 69 | var targetNumber=typeNum(times,oBegin[attr],oChange[attr],duration); 70 | setCss(ele,attr,targetNumber); 71 | } 72 | } 73 | } 74 | } 75 | }; 76 | 77 | 78 | //回调方法； 79 | function toGreen(){ 80 | setCss(this,"backgroundColor","green"); 81 | }; 82 | 83 | /*setCss*/ 84 | function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 85 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 86 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 87 | var flag="getElementsByClassName" in document; 88 | var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 89 | return !reg.test(attr) ? parseFloat(value) : value; 90 | } else{ 91 | switch (attr) { 92 | case "opacity": 93 | curEle["style"][attr] = value; 94 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 95 | break; 96 | case "float": 97 | curEle["style"].cssFloat = value; 98 | curEle["style"].styleFloat = value; 99 | break; 100 | case "backgroundColor": 101 | curEle["style"][attr] = value; 102 | break; 103 | case "zIndex": 104 | curEle["style"][attr] = value; 105 | break; 106 | default: 107 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 108 | } 109 | } 110 | }; 111 | 112 | /*数学计算*/ 113 | var moveType = { 114 | /*直线运动*///当前时间*变化量/持续时间+初始值 115 | line: function(t,b,c,d){ return c*t/d + b; }, 116 | 117 | /*减速中最长用的是4、6、7*/ 118 | jiansu1: {//二次方的缓动（t^2）； 119 | starIn: function(t,b,c,d){ 120 | return c*(t/=d)*t + b; 121 | }, 122 | starOut: function(t,b,c,d){ 123 | return -c *(t/=d)*(t-2) + b; 124 | }, 125 | starInOut: function(t,b,c,d){ 126 | if ((t/=d/2) < 1) return c/2*t*t + b; 127 | return -c/2 * ((--t)*(t-2) - 1) + b; 128 | } 129 | }, 130 | jiansu2: {//三次方的缓动（t^3） 131 | starIn: function(t,b,c,d){ 132 | return c*(t/=d)*t*t + b; 133 | }, 134 | starOut: function(t,b,c,d){ 135 | return c*((t=t/d-1)*t*t + 1) + b; 136 | }, 137 | starInOut: function(t,b,c,d){ 138 | if ((t/=d/2) < 1) return c/2*t*t*t + b; 139 | return c/2*((t-=2)*t*t + 2) + b; 140 | } 141 | }, 142 | jiansu3: {//四次方的缓动（t^4）； 143 | starIn: function(t,b,c,d){ 144 | return c*(t/=d)*t*t*t + b; 145 | }, 146 | starOut: function(t,b,c,d){ 147 | return -c * ((t=t/d-1)*t*t*t - 1) + b; 148 | }, 149 | starInOut: function(t,b,c,d){ 150 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 151 | return -c/2 * ((t-=2)*t*t*t - 2) + b; 152 | } 153 | }, 154 | jiansu4: {//5次方的缓动（t^5）； 155 | starIn: function(t,b,c,d){ 156 | return c*(t/=d)*t*t*t*t + b; 157 | }, 158 | starOut: function(t,b,c,d){ 159 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 160 | }, 161 | starInOut: function(t,b,c,d){ 162 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 163 | return c/2*((t-=2)*t*t*t*t + 2) + b; 164 | } 165 | }, 166 | jiansu5: {//正弦曲线的缓动（sin(t)） 167 | starIn: function(t,b,c,d){ 168 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 169 | }, 170 | starOut: function(t,b,c,d){ 171 | return c * Math.sin(t/d * (Math.PI/2)) + b; 172 | }, 173 | starInOut: function(t,b,c,d){ 174 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 175 | } 176 | }, 177 | jiansu6: {//指数曲线的缓动（2^t）； 178 | starIn: function(t,b,c,d){ 179 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 180 | }, 181 | starOut: function(t,b,c,d){ 182 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 183 | }, 184 | starInOut: function(t,b,c,d){ 185 | if (t==0) return b; 186 | if (t==d) return b+c; 187 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 188 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 189 | } 190 | }, 191 | jiansu7: {//圆形曲线的缓动（sqrt(1-t^2)）； 192 | starIn: function(t,b,c,d){ 193 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 194 | }, 195 | starOut: function(t,b,c,d){ 196 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 197 | }, 198 | starInOut: function(t,b,c,d){ 199 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 200 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 201 | } 202 | }, 203 | /*大摆动的效果，非常绚丽;比xiaobai好*/ 204 | dabai: {//指数衰减的正弦曲线缓动； 205 | starIn: function(t,b,c,d,a,p){ 206 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 207 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 208 | else var s = p/(2*Math.PI) * Math.asin (c/a); 209 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 210 | }, 211 | starOut: function(t,b,c,d,a,p){ 212 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 213 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 214 | else var s = p/(2*Math.PI) * Math.asin (c/a); 215 | return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); 216 | }, 217 | starInOut: function(t,b,c,d,a,p){ 218 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 219 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 220 | else var s = p/(2*Math.PI) * Math.asin (c/a); 221 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 222 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 223 | } 224 | }, 225 | xiaobai: {//超过范围的三次方缓动（(s+1)*t^3 - s*t^2）； 226 | starIn: function(t,b,c,d,s){ 227 | if (s == undefined) s = 1.70158; 228 | return c*(t/=d)*t*((s+1)*t - s) + b; 229 | }, 230 | starOut: function(t,b,c,d,s){ 231 | if (s == undefined) s = 1.70158; 232 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 233 | }, 234 | starInOut: function(t,b,c,d,s){ 235 | if (s == undefined) s = 1.70158; 236 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 237 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 238 | } 239 | }, 240 | fantan: {//指数衰减的反弹缓动。 241 | starIn: function(t,b,c,d){ 242 | return c - moveType.fantan.starOut(d-t, 0, c, d) + b; 243 | }, 244 | starOut: function(t,b,c,d){ 245 | if ((t/=d) < (1/2.75)) { 246 | return c*(7.5625*t*t) + b; 247 | } else if (t < (2/2.75)) { 248 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 249 | } else if (t < (2.5/2.75)) { 250 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 251 | } else { 252 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 253 | } 254 | }, 255 | starInOut: function(t,b,c,d){ 256 | if (t < d/2) return moveType.fantan.starIn(t*2, 0, c, d) * .5 + b; 257 | else return moveType.fantan.starOut(t*2-d, 0, c, d) * .5 + c*.5 + b; 258 | } 259 | } 260 | }; -------------------------------------------------------------------------------- /0备份存档/V0.01/js/dragJs/tween.js: -------------------------------------------------------------------------------- 1 | function starMove(ele,jsonStr,duration,moveTypeNum,fnCallback){ 2 | //多态：方法重载：JS如何实现方法重载。一个方法，可以有不同类型或个数的参数 3 | //方法重写：子类上的方法覆盖了父类上的方法 4 | var typeNum=moveType.jiansu4.starOut; 5 | if(typeof moveTypeNum =="number"){ 6 | if(moveTypeNum===4){ 7 | typeNum=moveType.jiansu4.starOut; 8 | }else if(moveTypeNum ===6){ 9 | typeNum=moveType.jiansu4.starOut; 10 | }else if(moveTypeNum ===7 ){ 11 | typeNum=moveType.jiansu7.starOut; 12 | }else if(moveTypeNum===8){ 13 | typeNum=moveType.dabai.starOut; 14 | }else if(moveTypeNum===9){ 15 | typeNum=moveType.xiaobai.starOut; 16 | }else if(moveTypeNum===10){ 17 | typeNum=moveType.fantan.starOut; 18 | } 19 | }else if(typeof moveTypeNum=="object"){ 20 | if(moveTypeNum instanceof Array){ 21 | /*输入模式是["fantan","starInOut"]*/ 22 | if(moveTypeNum.length==1){ 23 | typeNum=moveType[moveTypeNum[0]];//moveTypeNum[0]是获取line方法 24 | }else if(moveTypeNum.length==2){ 25 | typeNum=moveType[moveTypeNum[0]][moveTypeNum[1]]//moveType.jiansu1.starIn/out/inOut; 26 | } 27 | } 28 | }else if(typeof moveTypeNum=="function"){ 29 | fnCallback=moveTypeNum; 30 | } 31 | 32 | var oBegin={};//不同方向的起始值； 33 | var oChange={};//不同方向的运动距离； 34 | var booleanNum=0; 35 | for(var attr in jsonStr){ 36 | var begin=setCss(ele,attr); 37 | var target=jsonStr[attr]; 38 | var change=target-begin; 39 | if(change){ 40 | oBegin[attr]=begin; 41 | oChange[attr]=change; 42 | booleanNum++; 43 | } 44 | } 45 | if(booleanNum===0){ 46 | if(typeof fnCallback=="function"){ 47 | fnCallback.call(ele); 48 | } 49 | return; 50 | }else{ 51 | var interval=13; 52 | var times=0; 53 | clearInterval(ele.timer); 54 | ele.timer=window.setInterval(move,interval); 55 | function move(){ 56 | times+=interval; 57 | if(times>=duration){ 58 | clearInterval(ele.timer); 59 | ele.timer=null; 60 | for(var attr in jsonStr){ 61 | setCss(ele,attr,jsonStr[attr]); 62 | } 63 | if(typeof fnCallback=="function"){ 64 | fnCallback.call(ele); 65 | } 66 | }else{ 67 | for(var attr in oChange){ 68 | //动画效果在这里 69 | var targetNumber=typeNum(times,oBegin[attr],oChange[attr],duration); 70 | setCss(ele,attr,targetNumber); 71 | } 72 | } 73 | } 74 | } 75 | }; 76 | 77 | 78 | //回调方法； 79 | function toGreen(){ 80 | setCss(this,"backgroundColor","green"); 81 | }; 82 | 83 | /*setCss*/ 84 | function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 85 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 86 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 87 | var flag="getElementsByClassName" in document; 88 | var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 89 | return !reg.test(attr) ? parseFloat(value) : value; 90 | } else{ 91 | switch (attr) { 92 | case "opacity": 93 | curEle["style"][attr] = value; 94 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 95 | break; 96 | case "float": 97 | curEle["style"].cssFloat = value; 98 | curEle["style"].styleFloat = value; 99 | break; 100 | case "backgroundColor": 101 | curEle["style"][attr] = value; 102 | break; 103 | case "zIndex": 104 | curEle["style"][attr] = value; 105 | break; 106 | default: 107 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 108 | } 109 | } 110 | }; 111 | 112 | /*数学计算*/ 113 | var moveType = { 114 | /*直线运动*///当前时间*变化量/持续时间+初始值 115 | line: function(t,b,c,d){ return c*t/d + b; }, 116 | 117 | /*减速中最长用的是4、6、7*/ 118 | jiansu1: {//二次方的缓动（t^2）； 119 | starIn: function(t,b,c,d){ 120 | return c*(t/=d)*t + b; 121 | }, 122 | starOut: function(t,b,c,d){ 123 | return -c *(t/=d)*(t-2) + b; 124 | }, 125 | starInOut: function(t,b,c,d){ 126 | if ((t/=d/2) < 1) return c/2*t*t + b; 127 | return -c/2 * ((--t)*(t-2) - 1) + b; 128 | } 129 | }, 130 | jiansu2: {//三次方的缓动（t^3） 131 | starIn: function(t,b,c,d){ 132 | return c*(t/=d)*t*t + b; 133 | }, 134 | starOut: function(t,b,c,d){ 135 | return c*((t=t/d-1)*t*t + 1) + b; 136 | }, 137 | starInOut: function(t,b,c,d){ 138 | if ((t/=d/2) < 1) return c/2*t*t*t + b; 139 | return c/2*((t-=2)*t*t + 2) + b; 140 | } 141 | }, 142 | jiansu3: {//四次方的缓动（t^4）； 143 | starIn: function(t,b,c,d){ 144 | return c*(t/=d)*t*t*t + b; 145 | }, 146 | starOut: function(t,b,c,d){ 147 | return -c * ((t=t/d-1)*t*t*t - 1) + b; 148 | }, 149 | starInOut: function(t,b,c,d){ 150 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 151 | return -c/2 * ((t-=2)*t*t*t - 2) + b; 152 | } 153 | }, 154 | jiansu4: {//5次方的缓动（t^5）； 155 | starIn: function(t,b,c,d){ 156 | return c*(t/=d)*t*t*t*t + b; 157 | }, 158 | starOut: function(t,b,c,d){ 159 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 160 | }, 161 | starInOut: function(t,b,c,d){ 162 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 163 | return c/2*((t-=2)*t*t*t*t + 2) + b; 164 | } 165 | }, 166 | jiansu5: {//正弦曲线的缓动（sin(t)） 167 | starIn: function(t,b,c,d){ 168 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 169 | }, 170 | starOut: function(t,b,c,d){ 171 | return c * Math.sin(t/d * (Math.PI/2)) + b; 172 | }, 173 | starInOut: function(t,b,c,d){ 174 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 175 | } 176 | }, 177 | jiansu6: {//指数曲线的缓动（2^t）； 178 | starIn: function(t,b,c,d){ 179 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 180 | }, 181 | starOut: function(t,b,c,d){ 182 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 183 | }, 184 | starInOut: function(t,b,c,d){ 185 | if (t==0) return b; 186 | if (t==d) return b+c; 187 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 188 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 189 | } 190 | }, 191 | jiansu7: {//圆形曲线的缓动（sqrt(1-t^2)）； 192 | starIn: function(t,b,c,d){ 193 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 194 | }, 195 | starOut: function(t,b,c,d){ 196 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 197 | }, 198 | starInOut: function(t,b,c,d){ 199 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 200 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 201 | } 202 | }, 203 | /*大摆动的效果，非常绚丽;比xiaobai好*/ 204 | dabai: {//指数衰减的正弦曲线缓动； 205 | starIn: function(t,b,c,d,a,p){ 206 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 207 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 208 | else var s = p/(2*Math.PI) * Math.asin (c/a); 209 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 210 | }, 211 | starOut: function(t,b,c,d,a,p){ 212 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 213 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 214 | else var s = p/(2*Math.PI) * Math.asin (c/a); 215 | return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); 216 | }, 217 | starInOut: function(t,b,c,d,a,p){ 218 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 219 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 220 | else var s = p/(2*Math.PI) * Math.asin (c/a); 221 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 222 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 223 | } 224 | }, 225 | xiaobai: {//超过范围的三次方缓动（(s+1)*t^3 - s*t^2）； 226 | starIn: function(t,b,c,d,s){ 227 | if (s == undefined) s = 1.70158; 228 | return c*(t/=d)*t*((s+1)*t - s) + b; 229 | }, 230 | starOut: function(t,b,c,d,s){ 231 | if (s == undefined) s = 1.70158; 232 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 233 | }, 234 | starInOut: function(t,b,c,d,s){ 235 | if (s == undefined) s = 1.70158; 236 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 237 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 238 | } 239 | }, 240 | fantan: {//指数衰减的反弹缓动。 241 | starIn: function(t,b,c,d){ 242 | return c - moveType.fantan.starOut(d-t, 0, c, d) + b; 243 | }, 244 | starOut: function(t,b,c,d){ 245 | if ((t/=d) < (1/2.75)) { 246 | return c*(7.5625*t*t) + b; 247 | } else if (t < (2/2.75)) { 248 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 249 | } else if (t < (2.5/2.75)) { 250 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 251 | } else { 252 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 253 | } 254 | }, 255 | starInOut: function(t,b,c,d){ 256 | if (t < d/2) return moveType.fantan.starIn(t*2, 0, c, d) * .5 + b; 257 | else return moveType.fantan.starOut(t*2-d, 0, c, d) * .5 + c*.5 + b; 258 | } 259 | } 260 | }; -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | //下面是header区域的JS文件 2 | var dom=new Tool(); 3 | var explain=document.getElementById('explain'); 4 | var headerList=dom.getElementsByClassName(explain,'header-list'); 5 | for(var i=0;i 0) { 66 | tabMove.call(navNav, 0); 67 | } 68 | } 69 | }; 70 | 71 | function tabMove(target) { 72 | var that = this; 73 | _move(); 74 | function _move() { 75 | var start = dom.setCss(that,"height");//要在内部，不能写在外面 76 | clearTimeout(that.timer); 77 | that.timer = setTimeout(_move, 10); 78 | if (start >= target) { 79 | dom.setCss(that, "height", start - 10); 80 | if (start - 10 <= target) { 81 | dom.setCss(that, "height", target); 82 | navNav.style.display="none"; 83 | clearTimeout(that.timer); 84 | return; 85 | } 86 | } else if (start < target) { 87 | dom.setCss(that,"height", start + 10); 88 | if (start + 10 >= target) { 89 | dom.setCss(that, "height", target); 90 | clearTimeout(that.timer); 91 | return; 92 | } 93 | } else { 94 | return; 95 | } 96 | } 97 | } 98 | //下面是导航条上的联系方式 99 | contact.onmouseover=function(){contactInformation.style.display="block";}; 100 | contact.onmouseout=function(){contactInformation.style.display="none";}; 101 | //导航条区域结束 102 | 103 | //商品介绍区域开始 104 | // 下面是选项卡 105 | var displayHeader=document.getElementById("displayHeader"); 106 | var displayBody=document.getElementById("displayBody"); 107 | var displayHeaderLi=displayHeader.getElementsByTagName("li"); 108 | var displayBodyDiv=displayBody.getElementsByTagName("li"); 109 | for(var i= 0,len=displayHeaderLi.length;i" 149 | pBigImg.appendChild(bigImg); 150 | container.appendChild(pBigImg); 151 | 152 | //当鼠标移近来的时候，动态创建一个DIV元素，id是mark 153 | var mark = document.createElement("div"); 154 | mark.id = "mark"; 155 | this.appendChild(mark);//像oTab里添加mark； 156 | 157 | //执行setMark 158 | setMark(mark, container, e); 159 | }; 160 | 161 | oTab.onmousemove = function (e) { 162 | var mark = document.getElementById("mark"); 163 | if (mark) { 164 | //先判断mark是否存在，如果存在，执行setMark 165 | setMark(mark, container, e); 166 | } 167 | }; 168 | 169 | //onmouseleave也可以显示冒泡机制; 170 | oTab.onmouseleave = function () { 171 | var mark = document.getElementById("mark"); 172 | if (mark) { 173 | //当离开的时候移除mark节点； 174 | this.removeChild(mark); 175 | this.removeChild(container); 176 | } 177 | }; 178 | 179 | var jiance=document.getElementById("jiance"); 180 | function setMark(mark,container,e) { 181 | e = e || window.event; 182 | //上面是绑定事件的标配； 183 | //获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间； 184 | var markW = mark.offsetWidth; 185 | var markH = mark.offsetHeight; 186 | var l = e.clientX - tabL - (mark.offsetWidth / 2); 187 | var t = e.clientY+ winTop- tabT - (mark.offsetHeight / 2);//因为鼠标滚动的时候，需要加上滚动出的距离；否则mark的这个镜片位置就不对了 188 | //console.log("e.clientX:"+e.clientX +"tabL:"+ tabL +"winTop:"+ winTop); 189 | 190 | mark.style.left = l + "px"; 191 | mark.style.top = t + "px"; 192 | container.style.left=tabW+10+"px"; 193 | container.style.top=0; 194 | // bigImg.style.left="-"+(l/tabW*bigImg.width)+"px"; 195 | // bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 196 | //如果样式用上面的写，在IE678的时候有兼容性问题，应该改为下面的 197 | if(l<=0){ 198 | bigImg.style.left=="0px"; 199 | }else{ 200 | bigImg.style.left="-"+l/tabW*bigImg.width+"px"; 201 | } 202 | if(t<=0){ 203 | bigImg.style.top=="0px"; 204 | }else{ 205 | bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 206 | } 207 | //下面是判断边界，当鼠标移到左边界和右边界的判断； 208 | if (l < 0) { 209 | mark.style.left = 0; 210 | } else if (l > (tabW - markW)) { 211 | mark.style.left = tabW - markW + "px"; 212 | bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px"; 213 | } 214 | //当鼠标移到上边界和下边界的判断； 215 | if (t < 0) { 216 | mark.style.top = 0 + "px"; 217 | } else if (t > (tabH - markH)) { 218 | mark.style.top = tabH - markH + "px"; 219 | bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px"; 220 | } 221 | }; 222 | //下面的函数可以算出元素的距离浏览器顶部的绝对位置, 223 | function offset() { 224 | var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent; 225 | while (par) { 226 | left += par.offsetLeft; 227 | top += par.offsetTop; 228 | if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) { 229 | left += par.clientLeft; 230 | top += par.clientTop; 231 | } 232 | par = par.offsetParent; 233 | } 234 | return { 235 | left: left, 236 | top: top 237 | }; 238 | } 239 | //获取元素的属性clientHeight+scrollTop 240 | function getWin(attr) { 241 | return document.documentElement[attr] || document.body[attr]; 242 | } 243 | //省市区三级 244 | addressInit('province', 'city', 'area', '上海', '市辖区', '浦东新区'); 245 | //鼠标悬停提示 246 | var rent=document.getElementById("rent"); 247 | var distributionTime=document.getElementById("distributionTime"); 248 | var xiaoxi1=document.getElementById("xiaoxi1"); 249 | var xiaoxi2=document.getElementById("xiaoxi2"); 250 | rent.onmouseover=function(){show(xiaoxi1)}; 251 | rent.onmouseout=function(){none(xiaoxi1)}; 252 | distributionTime.onmouseover=function(){show(xiaoxi2)}; 253 | distributionTime.onmouseout=function(){none(xiaoxi2)}; 254 | function show(ele){ 255 | ele.style.display="block"; 256 | }; 257 | function none(ele){ 258 | ele.style.display="none"; 259 | } 260 | //商品数量增加 261 | var mallNum=document.getElementById("mallNum"); 262 | var flag=document.getElementById("flag"); 263 | var reduce=dom.getElementsByClassName(mallNum,"reduce")[0]; 264 | var plus=dom.getElementsByClassName(mallNum,"plus")[0]; 265 | var content=dom.getElementsByClassName(mallNum,"content")[0]; 266 | reduce.onclick=function() { 267 | if(content.innerText<2) return; 268 | content.innerText--; 269 | if(content.innerText==1){ 270 | flag.className="right-right"; 271 | }; 272 | }; 273 | plus.onclick=function(){ 274 | content.innerText++; 275 | flag.className="right-right flag"; 276 | }; 277 | //商品介绍区域结束 278 | 279 | //拖拽的效果开始 280 | //这里单开了一个JS文件夹，在drag里面 281 | //拖拽的效果结束 282 | 283 | //DEMO演示的页面 284 | var DEMO=document.getElementById("DEMO"); 285 | var DEMOLis=DEMO.getElementsByTagName("li"); 286 | for(var i= 0,len=DEMOLis.length;i 0) { 66 | tabMove.call(navNav, 0); 67 | } 68 | } 69 | }; 70 | 71 | function tabMove(target) { 72 | var that = this; 73 | _move(); 74 | function _move() { 75 | var start = dom.setCss(that,"height");//要在内部，不能写在外面 76 | clearTimeout(that.timer); 77 | that.timer = setTimeout(_move, 10); 78 | if (start >= target) { 79 | dom.setCss(that, "height", start - 10); 80 | if (start - 10 <= target) { 81 | dom.setCss(that, "height", target); 82 | navNav.style.display="none"; 83 | clearTimeout(that.timer); 84 | return; 85 | } 86 | } else if (start < target) { 87 | dom.setCss(that,"height", start + 10); 88 | if (start + 10 >= target) { 89 | dom.setCss(that, "height", target); 90 | clearTimeout(that.timer); 91 | return; 92 | } 93 | } else { 94 | return; 95 | } 96 | } 97 | } 98 | //下面是导航条上的联系方式 99 | contact.onmouseover=function(){contactInformation.style.display="block";}; 100 | contact.onmouseout=function(){contactInformation.style.display="none";}; 101 | //导航条区域结束 102 | 103 | //商品介绍区域开始 104 | // 下面是选项卡 105 | var displayHeader=document.getElementById("displayHeader"); 106 | var displayBody=document.getElementById("displayBody"); 107 | var displayHeaderLi=displayHeader.getElementsByTagName("li"); 108 | var displayBodyDiv=displayBody.getElementsByTagName("li"); 109 | for(var i= 0,len=displayHeaderLi.length;i" 149 | pBigImg.appendChild(bigImg); 150 | container.appendChild(pBigImg); 151 | 152 | //当鼠标移近来的时候，动态创建一个DIV元素，id是mark 153 | var mark = document.createElement("div"); 154 | mark.id = "mark"; 155 | this.appendChild(mark);//像oTab里添加mark； 156 | 157 | //执行setMark 158 | setMark(mark, container, e); 159 | }; 160 | 161 | oTab.onmousemove = function (e) { 162 | var mark = document.getElementById("mark"); 163 | if (mark) { 164 | //先判断mark是否存在，如果存在，执行setMark 165 | setMark(mark, container, e); 166 | } 167 | }; 168 | 169 | //onmouseleave也可以显示冒泡机制; 170 | oTab.onmouseleave = function () { 171 | var mark = document.getElementById("mark"); 172 | if (mark) { 173 | //当离开的时候移除mark节点； 174 | this.removeChild(mark); 175 | this.removeChild(container); 176 | } 177 | }; 178 | 179 | var jiance=document.getElementById("jiance"); 180 | function setMark(mark,container,e) { 181 | e = e || window.event; 182 | //上面是绑定事件的标配； 183 | //获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间； 184 | var markW = mark.offsetWidth; 185 | var markH = mark.offsetHeight; 186 | var l = e.clientX - tabL - (mark.offsetWidth / 2); 187 | var t = e.clientY+ winTop- tabT - (mark.offsetHeight / 2);//因为鼠标滚动的时候，需要加上滚动出的距离；否则mark的这个镜片位置就不对了 188 | //console.log("e.clientX:"+e.clientX +"tabL:"+ tabL +"winTop:"+ winTop); 189 | 190 | mark.style.left = l + "px"; 191 | mark.style.top = t + "px"; 192 | container.style.left=tabW+10+"px"; 193 | container.style.top=0; 194 | // bigImg.style.left="-"+(l/tabW*bigImg.width)+"px"; 195 | // bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 196 | //如果样式用上面的写，在IE678的时候有兼容性问题，应该改为下面的 197 | if(l<=0){ 198 | bigImg.style.left=="0px"; 199 | }else{ 200 | bigImg.style.left="-"+l/tabW*bigImg.width+"px"; 201 | } 202 | if(t<=0){ 203 | bigImg.style.top=="0px"; 204 | }else{ 205 | bigImg.style.top="-"+(t/tabH*bigImg.height)+"px"; 206 | } 207 | //下面是判断边界，当鼠标移到左边界和右边界的判断； 208 | if (l < 0) { 209 | mark.style.left = 0; 210 | } else if (l > (tabW - markW)) { 211 | mark.style.left = tabW - markW + "px"; 212 | bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px"; 213 | } 214 | //当鼠标移到上边界和下边界的判断； 215 | if (t < 0) { 216 | mark.style.top = 0 + "px"; 217 | } else if (t > (tabH - markH)) { 218 | mark.style.top = tabH - markH + "px"; 219 | bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px"; 220 | } 221 | }; 222 | //下面的函数可以算出元素的距离浏览器顶部的绝对位置, 223 | function offset() { 224 | var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent; 225 | while (par) { 226 | left += par.offsetLeft; 227 | top += par.offsetTop; 228 | if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) { 229 | left += par.clientLeft; 230 | top += par.clientTop; 231 | } 232 | par = par.offsetParent; 233 | } 234 | return { 235 | left: left, 236 | top: top 237 | }; 238 | } 239 | //获取元素的属性clientHeight+scrollTop 240 | function getWin(attr) { 241 | return document.documentElement[attr] || document.body[attr]; 242 | } 243 | //省市区三级 244 | addressInit('province', 'city', 'area', '上海', '市辖区', '浦东新区'); 245 | //鼠标悬停提示 246 | var rent=document.getElementById("rent"); 247 | var distributionTime=document.getElementById("distributionTime"); 248 | var xiaoxi1=document.getElementById("xiaoxi1"); 249 | var xiaoxi2=document.getElementById("xiaoxi2"); 250 | rent.onmouseover=function(){show(xiaoxi1)}; 251 | rent.onmouseout=function(){none(xiaoxi1)}; 252 | distributionTime.onmouseover=function(){show(xiaoxi2)}; 253 | distributionTime.onmouseout=function(){none(xiaoxi2)}; 254 | function show(ele){ 255 | ele.style.display="block"; 256 | }; 257 | function none(ele){ 258 | ele.style.display="none"; 259 | } 260 | //商品数量增加 261 | var mallNum=document.getElementById("mallNum"); 262 | var flag=document.getElementById("flag"); 263 | var reduce=dom.getElementsByClassName(mallNum,"reduce")[0]; 264 | var plus=dom.getElementsByClassName(mallNum,"plus")[0]; 265 | var content=dom.getElementsByClassName(mallNum,"content")[0]; 266 | reduce.onclick=function() { 267 | if(content.innerText<2) return; 268 | content.innerText--; 269 | if(content.innerText==1){ 270 | flag.className="right-right"; 271 | }; 272 | }; 273 | plus.onclick=function(){ 274 | content.innerText++; 275 | flag.className="right-right flag"; 276 | }; 277 | //商品介绍区域结束 278 | 279 | //拖拽的效果开始 280 | //这里单开了一个JS文件夹，在drag里面 281 | //拖拽的效果结束 282 | 283 | //DEMO演示的页面 284 | var DEMO=document.getElementById("DEMO"); 285 | var DEMOLis=DEMO.getElementsByTagName("li"); 286 | for(var i= 0,len=DEMOLis.length;i 0 ? children[0] : null; 73 | }, 74 | getLast: function (curEle) {//获取最后一个元素节点； 75 | var children = this.getEleChildren(curEle); 76 | return children.length > 0 ? children[children.length - 1] : null; 77 | }, 78 | getPre: function (curEle) {//上一个哥哥节点； 79 | if (this.flag) { 80 | return curEle.previousElementSibling; 81 | } 82 | var pre = curEle.previousSibling; 83 | while (pre && pre.nodeType !== 1) { 84 | pre = pre.previousSibling; 85 | } 86 | return pre; 87 | }, 88 | getPres: function (curEle) {//获得所有哥哥们； 89 | /* var ary = [], 90 | attr = this.flag ? "previousElementSibling" : "previousSibling"; 91 | var pre = curEle[attr]; 92 | while (pre) { 93 | if (pre.nodeType === 1) { 94 | ary.unshift(pre); 95 | } 96 | pre = pre[attr]; 97 | } 98 | return ary;*/ 99 | var ary = [], 100 | next = this.getPre(curEle); 101 | while (next) { 102 | ary.unshift(next); 103 | next = this.getPre(next); 104 | } 105 | return ary; 106 | }, 107 | getNext: function (curEle) {//下一个弟弟节点，第一个弟弟节点； 108 | if (this.flag) { 109 | return curEle.nextElementSibling; 110 | } 111 | var next = curEle.nextSibling; 112 | while (next && next.nodeType !== 1) { 113 | next = next.nextSibling; 114 | } 115 | return next; 116 | }, 117 | getNexts: function (curEle) {//获取所有的弟弟们； 118 | var ary = [], 119 | next = this.getNext(curEle); 120 | while (next) { 121 | ary.push(next); 122 | next = this.getNext(next); 123 | } 124 | return ary; 125 | }, 126 | getSibling: function (curEle) {//获取上一个哥哥和下一个弟弟； 127 | var ary = [], 128 | pre = this.getPre(curEle), 129 | next = this.getNext(curEle); 130 | pre ? ary.push(pre) : void 0; 131 | next ? ary.push(next) : void 0; 132 | return ary; 133 | }, 134 | getSiblings: function (curEle) {//获取所有的兄弟们（除了自己） 135 | var pres = this.getPres(curEle), 136 | nexts = this.getNexts(curEle); 137 | return pres.concat(nexts); 138 | }, 139 | getIndex: function (curEle) {//获取元素的索引值； 140 | return this.getPres(curEle).length; 141 | }, 142 | insertAfter: function (newEle,oldEle) {//在目标元素oldEle后面插入新元素newEle；如果没有传指定元素，则直接添加在后面 143 | var next = this.getNext(oldEle), 144 | par = oldEle.parentNode; 145 | next ? par.insertBefore(newEle, next) : par.appendChild(newEle); 146 | }, 147 | prependChild: function (parentEle,curEle) {//把一个元素节点添加为parentEle的第一个子节点； 148 | var first = this.getFirst(parentEle);//获取par中的第一个元素节点； 149 | first ? parentEle.insertBefore(curEle, first) : parentEle.appendChild(curEle); 150 | }, 151 | innerHTML: function (curEle,str) {//获取元素的innerHTML； 152 | var str= str || ""; 153 | if (!str) { 154 | return curEle.innerHTML; 155 | } 156 | curEle.innerHTML = str; 157 | }, 158 | text:function (ele,str){//处理innerText和textContent的兼容性；传一个参数是获取；2个参数是设置； 159 | if(ele&&ele.nodeType&&ele.nodeType==1){ 160 | if(str===undefined){//如果str没有传，那么方法是获取元素的文本内容； 161 | if(typeof ele.textContent=='string') 162 | return ele.textContent; 163 | else 164 | return ele.innerText; 165 | 166 | }else{//如果传了，就是添加文本内容 167 | if(str===null){ 168 | alert('text方法参数错误,str为null！'); 169 | return ; 170 | }else if(typeof str=='string'){ 171 | if(typeof ele.textContent=='string') { 172 | ele.textContent += str; 173 | }else{ 174 | ele.innerText+=str; 175 | } 176 | }else{ 177 | alert('text方法的参数错误！') 178 | } 179 | } 180 | }else{ 181 | alert('text方法的ele参数错误！') 182 | } 183 | }, 184 | 185 | /***下面是设置CSS***/ 186 | setCss:function (curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 187 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 188 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 189 | var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 190 | return !reg.test(attr) ? parseFloat(value) : value; 191 | } else{ 192 | switch (attr) { 193 | case "opacity": 194 | curEle["style"][attr] = value; 195 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 196 | break; 197 | case "float": 198 | curEle["style"].cssFloat = value; 199 | curEle["style"].styleFloat = value; 200 | break; 201 | case "backgroundColor": 202 | curEle["style"][attr] = value; 203 | break; 204 | case "zIndex": 205 | curEle["style"][attr] = value; 206 | break; 207 | default: 208 | //curEle["style"][attr] = value+='px'; 209 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 210 | } 211 | } 212 | }, 213 | setGroupCss: function (curEle,cssObj) {//给元素设置一组属性；cssObj是一个对象类型； 214 | for (var key in cssObj) { 215 | this.setCss(curEle, key, cssObj[key]); 216 | } 217 | }, 218 | offset: function (curEle) {//获取偏移量； 219 | var par = curEle.offsetParent, 220 | left = curEle.offsetLeft, 221 | top = curEle.offsetTop; 222 | while (par) { 223 | left += par.offsetLeft; 224 | top += par.offsetTop; 225 | if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) { 226 | left += par.clientLeft; 227 | top += par.clientTop; 228 | } 229 | par = par.offsetParent; 230 | } 231 | return {left: left, top: top}; 232 | }, 233 | hasClassName: function (curEle,cName) {//判断是否有某个className； 234 | var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)"); 235 | return reg.test(curEle.className); 236 | }, 237 | addClassName: function (curEle,cName) {//增加某个className； 238 | if (!this.hasClassName(curEle,cName)) { 239 | curEle.className += (" " + cName); 240 | } 241 | }, 242 | removeClassName: function (curEle,cName) {//移除类样式的方法； 243 | var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g"); 244 | if (this.hasClassName(curEle,cName)) { 245 | curEle.className = curEle.className.replace(reg, " "); 246 | } 247 | } 248 | }; 249 | ~function () {//在DOM库上增加方法，同时不影响原来的方法；在类的原型上增加方法； 250 | var strPro = String.prototype, 251 | aryPro = Array.prototype, 252 | objPro = Object.prototype; 253 | aryPro.removeRepeat = function () {//数组去重； 254 | var obj = {}; 255 | for (var i = 0; i < this.length; i++) { 256 | var cur = this[i]; 257 | if (obj[cur] == cur) { 258 | this.splice(i, 1); 259 | i--; 260 | continue; 261 | } 262 | obj[cur] = cur; 263 | } 264 | obj = null; 265 | return this; 266 | }; 267 | aryPro.forEachPro = function (fn,context) {//forEach兼容性处理； 268 | var context = context || window; 269 | if (this.forEach) { 270 | this.forEach(fn, context); 271 | return this; 272 | } 273 | for (var i = 0; i < this.length; i++) { 274 | fn.call(context, this[i], i, this); 275 | } 276 | return this; 277 | }; 278 | objPro.myHasPubProperty = function (attr) {//是否为公有属性； 279 | return (attr in this) && !this.hasOwnProperty(attr); 280 | }; 281 | strPro.myTrim = function () {//去除首尾空格； 282 | return this.replace(/(^\s*|\s*$)/g, ""); 283 | }; 284 | strPro.mySub = function (len,isD) {//是不是有效的 285 | var len = len || 10, 286 | isD = isD || false, 287 | str = "", 288 | n = 0; 289 | for (var i = 0; i < this.length; i++) { 290 | var s = this.charAt(i); 291 | /[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++; 292 | if (n > len) { 293 | isD ? str += "..." : void 0; 294 | break; 295 | } 296 | str += s; 297 | } 298 | return str; 299 | }; 300 | strPro.myFormatTime = function (format) {//时间格式化； 301 | var reg = /^(\d{4})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:\s+)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})$/g, 302 | ary = []; 303 | this.replace(reg, function () { 304 | ary = ([].slice.call(arguments)).slice(1, 7); 305 | }); 306 | var format = format || "{0}年{1}月{2}日 {3}:{4}:{5}"; 307 | return format.replace(/{(\d+)}/g, function () { 308 | var val = ary[arguments[1]]; 309 | return val.length === 1 ? "0" + val : val; 310 | }); 311 | }; 312 | strPro.myQueryURLParameter = function () {//是否是有效URL 313 | var reg = /([^?&=]+)=([^?&=]+)/g, obj = {}; 314 | this.replace(reg, function () { 315 | obj[arguments[1]] = arguments[2]; 316 | }); 317 | return obj; 318 | } 319 | }(); 320 | -------------------------------------------------------------------------------- /0备份存档/V0.01/js/dom.js: -------------------------------------------------------------------------------- 1 | var Tool = function () {//构造函数模式；用的时候需要new一下； 2 | this.flag = "getElementsByClassName" in document; 3 | //getElementsByClassName 在IE678中是不存在的。用这个来判断是不是低版本的IE浏览器； 4 | //每次只需要判断this.flag是否存在就可以了；如果存在就是标准浏览器，如果不存在就是IE； 5 | }; 6 | Tool.prototype = {//方法是定义在Tool的prototype上的； 7 | constructor: Tool,//重写prototype后，prototype的constructor已经不是原来的Tool了；需要手动给他强制写会到Tool上去； 8 | /*经常用到的函数*/ 9 | getElementsByClassName: function (context,cName) {//获取元素的ClassName 10 | var context = context || document; 11 | var ary = []; 12 | if (this.flag) { 13 | return context.getElementsByClassName(cName); 14 | } 15 | var allNode = context.getElementsByTagName("*"); 16 | var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)"); 17 | for (var i = 0; i < allNode.length; i++) { 18 | var cur = allNode[i]; 19 | if (reg.test(cur.className)) { 20 | ary.push(cur); 21 | } 22 | } 23 | return ary; 24 | }, 25 | toJSON: function (jsonStr) {//将json字符串转化为json对象 26 | var jsonObj = null; 27 | try { 28 | jsonObj = JSON.parse(jsonStr);//如果支持 JSON.parse则直接使用 JSON.parse将JSON字符串转换为JSON对象。 29 | } catch (e) { 30 | jsonObj = eval("(" + jsonStr + ")"); 31 | } 32 | return jsonObj; 33 | }, 34 | isType: function (value,type) {//判断数据类型； 35 | var type = arguments[1] || "Object", 36 | reg = new RegExp("\\[object " + type + "\\]", "i"); 37 | return reg.test({}.toString.call(value));//{}不可以是[]，因为[]就不是Object.prototype,数组也有toString方法； 38 | }, 39 | listToArray: function (likeAry) {//类数组转化为数组； 40 | var ary = []; 41 | if (this.flag) { 42 | ary = [].slice.call(likeAry, 0); 43 | } else { 44 | for (var i = 0; i < likeAry.length; i++) { 45 | ary.push(likeAry[i]); 46 | } 47 | } 48 | return ary; 49 | }, 50 | 51 | /***下面是设置DOM***/ 52 | getEleChildren: function (parent,tagName) {//获取指定节点名的元素节点们；第二个参数如果不传，则返回obj下的所有子元素节点； 53 | var allNode = parent.childNodes, 54 | ary = [], 55 | reg = new RegExp("^" + tagName + "$", "i"); 56 | for (var i = 0; i < allNode.length; i++) { 57 | var cur = allNode[i]; 58 | if (cur.nodeType === 1) { 59 | if (tagName) {//tahName不可能为0，false之类的数；所以可以用if直接判断传进来的参数； 60 | if (reg.test(cur.nodeName)) { 61 | ary.push(cur); 62 | } 63 | continue; 64 | } 65 | ary.push(cur); 66 | } 67 | } 68 | return ary; 69 | }, 70 | getFirst: function (curEle) {//获取第一个元素节点； 71 | var children = this.getEleChildren(curEle); 72 | return children.length > 0 ? children[0] : null; 73 | }, 74 | getLast: function (curEle) {//获取最后一个元素节点； 75 | var children = this.getEleChildren(curEle); 76 | return children.length > 0 ? children[children.length - 1] : null; 77 | }, 78 | getPre: function (curEle) {//上一个哥哥节点； 79 | if (this.flag) { 80 | return curEle.previousElementSibling; 81 | } 82 | var pre = curEle.previousSibling; 83 | while (pre && pre.nodeType !== 1) { 84 | pre = pre.previousSibling; 85 | } 86 | return pre; 87 | }, 88 | getPres: function (curEle) {//获得所有哥哥们； 89 | /* var ary = [], 90 | attr = this.flag ? "previousElementSibling" : "previousSibling"; 91 | var pre = curEle[attr]; 92 | while (pre) { 93 | if (pre.nodeType === 1) { 94 | ary.unshift(pre); 95 | } 96 | pre = pre[attr]; 97 | } 98 | return ary;*/ 99 | var ary = [], 100 | next = this.getPre(curEle); 101 | while (next) { 102 | ary.unshift(next); 103 | next = this.getPre(next); 104 | } 105 | return ary; 106 | }, 107 | getNext: function (curEle) {//下一个弟弟节点，第一个弟弟节点； 108 | if (this.flag) { 109 | return curEle.nextElementSibling; 110 | } 111 | var next = curEle.nextSibling; 112 | while (next && next.nodeType !== 1) { 113 | next = next.nextSibling; 114 | } 115 | return next; 116 | }, 117 | getNexts: function (curEle) {//获取所有的弟弟们； 118 | var ary = [], 119 | next = this.getNext(curEle); 120 | while (next) { 121 | ary.push(next); 122 | next = this.getNext(next); 123 | } 124 | return ary; 125 | }, 126 | getSibling: function (curEle) {//获取上一个哥哥和下一个弟弟； 127 | var ary = [], 128 | pre = this.getPre(curEle), 129 | next = this.getNext(curEle); 130 | pre ? ary.push(pre) : void 0; 131 | next ? ary.push(next) : void 0; 132 | return ary; 133 | }, 134 | getSiblings: function (curEle) {//获取所有的兄弟们（除了自己） 135 | var pres = this.getPres(curEle), 136 | nexts = this.getNexts(curEle); 137 | return pres.concat(nexts); 138 | }, 139 | getIndex: function (curEle) {//获取元素的索引值； 140 | return this.getPres(curEle).length; 141 | }, 142 | insertAfter: function (newEle,oldEle) {//在目标元素oldEle后面插入新元素newEle；如果没有传指定元素，则直接添加在后面 143 | var next = this.getNext(oldEle), 144 | par = oldEle.parentNode; 145 | next ? par.insertBefore(newEle, next) : par.appendChild(newEle); 146 | }, 147 | prependChild: function (parentEle,curEle) {//把一个元素节点添加为parentEle的第一个子节点； 148 | var first = this.getFirst(parentEle);//获取par中的第一个元素节点； 149 | first ? parentEle.insertBefore(curEle, first) : parentEle.appendChild(curEle); 150 | }, 151 | innerHTML: function (curEle,str) {//获取元素的innerHTML； 152 | var str= str || ""; 153 | if (!str) { 154 | return curEle.innerHTML; 155 | } 156 | curEle.innerHTML = str; 157 | }, 158 | text:function (ele,str){//处理innerText和textContent的兼容性；传一个参数是获取；2个参数是设置； 159 | if(ele&&ele.nodeType&&ele.nodeType==1){ 160 | if(str===undefined){//如果str没有传，那么方法是获取元素的文本内容； 161 | if(typeof ele.textContent=='string') 162 | return ele.textContent; 163 | else 164 | return ele.innerText; 165 | 166 | }else{//如果传了，就是添加文本内容 167 | if(str===null){ 168 | alert('text方法参数错误,str为null！'); 169 | return ; 170 | }else if(typeof str=='string'){ 171 | if(typeof ele.textContent=='string') { 172 | ele.textContent += str; 173 | }else{ 174 | ele.innerText+=str; 175 | } 176 | }else{ 177 | alert('text方法的参数错误！') 178 | } 179 | } 180 | }else{ 181 | alert('text方法的ele参数错误！') 182 | } 183 | }, 184 | 185 | /***下面是设置CSS***/ 186 | setCss:function (curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 187 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 188 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 189 | var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 190 | return !reg.test(attr) ? parseFloat(value) : value; 191 | } else{ 192 | switch (attr) { 193 | case "opacity": 194 | curEle["style"][attr] = value; 195 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 196 | break; 197 | case "float": 198 | curEle["style"].cssFloat = value; 199 | curEle["style"].styleFloat = value; 200 | break; 201 | case "backgroundColor": 202 | curEle["style"][attr] = value; 203 | break; 204 | case "zIndex": 205 | curEle["style"][attr] = value; 206 | break; 207 | default: 208 | //curEle["style"][attr] = value+='px'; 209 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 210 | } 211 | } 212 | }, 213 | setGroupCss: function (curEle,cssObj) {//给元素设置一组属性；cssObj是一个对象类型； 214 | for (var key in cssObj) { 215 | this.setCss(curEle, key, cssObj[key]); 216 | } 217 | }, 218 | offset: function (curEle) {//获取偏移量； 219 | var par = curEle.offsetParent, 220 | left = curEle.offsetLeft, 221 | top = curEle.offsetTop; 222 | while (par) { 223 | left += par.offsetLeft; 224 | top += par.offsetTop; 225 | if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) { 226 | left += par.clientLeft; 227 | top += par.clientTop; 228 | } 229 | par = par.offsetParent; 230 | } 231 | return {left: left, top: top}; 232 | }, 233 | hasClassName: function (curEle,cName) {//判断是否有某个className； 234 | var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)"); 235 | return reg.test(curEle.className); 236 | }, 237 | addClassName: function (curEle,cName) {//增加某个className； 238 | if (!this.hasClassName(curEle,cName)) { 239 | curEle.className += (" " + cName); 240 | } 241 | }, 242 | removeClassName: function (curEle,cName) {//移除类样式的方法； 243 | var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g"); 244 | if (this.hasClassName(curEle,cName)) { 245 | curEle.className = curEle.className.replace(reg, " "); 246 | } 247 | } 248 | }; 249 | ~function () {//在DOM库上增加方法，同时不影响原来的方法；在类的原型上增加方法； 250 | var strPro = String.prototype, 251 | aryPro = Array.prototype, 252 | objPro = Object.prototype; 253 | aryPro.removeRepeat = function () {//数组去重； 254 | var obj = {}; 255 | for (var i = 0; i < this.length; i++) { 256 | var cur = this[i]; 257 | if (obj[cur] == cur) { 258 | this.splice(i, 1); 259 | i--; 260 | continue; 261 | } 262 | obj[cur] = cur; 263 | } 264 | obj = null; 265 | return this; 266 | }; 267 | aryPro.forEachPro = function (fn,context) {//forEach兼容性处理； 268 | var context = context || window; 269 | if (this.forEach) { 270 | this.forEach(fn, context); 271 | return this; 272 | } 273 | for (var i = 0; i < this.length; i++) { 274 | fn.call(context, this[i], i, this); 275 | } 276 | return this; 277 | }; 278 | objPro.myHasPubProperty = function (attr) {//是否为公有属性； 279 | return (attr in this) && !this.hasOwnProperty(attr); 280 | }; 281 | strPro.myTrim = function () {//去除首尾空格； 282 | return this.replace(/(^\s*|\s*$)/g, ""); 283 | }; 284 | strPro.mySub = function (len,isD) {//是不是有效的 285 | var len = len || 10, 286 | isD = isD || false, 287 | str = "", 288 | n = 0; 289 | for (var i = 0; i < this.length; i++) { 290 | var s = this.charAt(i); 291 | /[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++; 292 | if (n > len) { 293 | isD ? str += "..." : void 0; 294 | break; 295 | } 296 | str += s; 297 | } 298 | return str; 299 | }; 300 | strPro.myFormatTime = function (format) {//时间格式化； 301 | var reg = /^(\d{4})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:\s+)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})(?:-|\/|\.|:)(\d{1,2})$/g, 302 | ary = []; 303 | this.replace(reg, function () { 304 | ary = ([].slice.call(arguments)).slice(1, 7); 305 | }); 306 | var format = format || "{0}年{1}月{2}日 {3}:{4}:{5}"; 307 | return format.replace(/{(\d+)}/g, function () { 308 | var val = ary[arguments[1]]; 309 | return val.length === 1 ? "0" + val : val; 310 | }); 311 | }; 312 | strPro.myQueryURLParameter = function () {//是否是有效URL 313 | var reg = /([^?&=]+)=([^?&=]+)/g, obj = {}; 314 | this.replace(reg, function () { 315 | obj[arguments[1]] = arguments[2]; 316 | }); 317 | return obj; 318 | } 319 | }(); 320 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html,body,div,ul,li,a,img,span,p,h3,h6{padding: 0;margin: 0;} 2 | body{font-family: "微软雅黑", sans-serif;-webkit-user-select: none;} 3 | img{border: none;display: block} 4 | ul,li{ 5 | list-style: none; 6 | } 7 | /*头部区域开始*/ 8 | #header{ 9 | width: 1210px; 10 | height: 150px; 11 | } 12 | #header .logo{ 13 | position: absolute; 14 | left: 0; 15 | top: 50px; 16 | } 17 | #header .explain{ 18 | position: absolute; 19 | left: 261px; 20 | top: 61px; 21 | } 22 | #header .explain a.list1{ 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | #header .explain a.list2{ 28 | position: absolute; 29 | left: 85px; 30 | top: 0; 31 | } 32 | #header .explain a.list3{ 33 | position: absolute; 34 | left: 168px; 35 | top: 0; 36 | } 37 | #header .phone-nub{ 38 | position: absolute; 39 | right: 0px; 40 | top:50px; 41 | } 42 | #tooltip{padding: 1px;position: absolute;display: none;background: #ffffff;} 43 | /*头部区域结束*/ 44 | 45 | /*导航条开始*/ 46 | .nav-background{ 47 | width: 100%; 48 | height: 50px; 49 | background: #3c3c3c; 50 | position: relative; 51 | z-index: 2; 52 | } 53 | #nav{ 54 | width: 1210px; 55 | z-index: 2; 56 | } 57 | #nav ul{ 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: #3c3c3c; 62 | } 63 | #nav ul li{ 64 | color: #FFF; 65 | float: left; 66 | padding: 0 10px; 67 | cursor:pointer; 68 | } 69 | #nav ul li a{ 70 | color: #FFF; 71 | } 72 | #nav ul li:hover{ 73 | background: #101010; 74 | } 75 | #nav-div2{ 76 | position: absolute; 77 | height: 0; 78 | width: 100%; 79 | border:solid 1px #a9a9a9 ; 80 | border-top: none; 81 | border-bottom: none; 82 | background: #F9AF2A; 83 | cursor: pointer; 84 | display: none; 85 | z-index: 2; 86 | } 87 | #nav-div2 a{ 88 | position: relative; 89 | top: 20px; 90 | text-decoration: none; 91 | color: darkred; 92 | margin: 20px; 93 | border: 1px solid #F9AF2A; 94 | } 95 | #nav-div2 a:hover{ 96 | text-decoration: none; 97 | color: #FFF; 98 | border: 1px solid darkred; 99 | background:darkred ; 100 | } 101 | 102 | #nav #contactInformation{ 103 | width: 200px; 104 | height: 150px; 105 | position: absolute; 106 | left: 210px; 107 | display: none; 108 | } 109 | #nav #contactInformation a{ 110 | width: 220px; 111 | height: 50px; 112 | display: block; 113 | text-align: left; 114 | line-height: 50px; 115 | font-size:18px; 116 | padding-left: 10px; 117 | } 118 | #nav #contactInformation a.phone{ 119 | background:#162e2e; 120 | color: #1bbc9b; 121 | } 122 | #nav #contactInformation a.email{ 123 | background:#312e1f; 124 | color: #fdbd1f; 125 | } 126 | #nav #contactInformation a.advice{ 127 | background:#2f2123; 128 | color: #c54337; 129 | } 130 | /*导航条结束*/ 131 | /*商品展示区域开始*/ 132 | #myDisplay{ 133 | width: 1210px; 134 | height: 630px; 135 | margin-top: 38px; 136 | } 137 | #myDisplay #displayHeader{ 138 | position: absolute; 139 | top: 460px; 140 | } 141 | #myDisplay #displayHeader li{ 142 | float: left; 143 | width: 80px; 144 | height: 80px; 145 | margin-right: 12px; 146 | background: lightseagreen; 147 | cursor: pointer; 148 | } 149 | #myDisplay #displayBody li{ 150 | width: 449px; 151 | height: 449px; 152 | display: none; 153 | position: relative; 154 | } 155 | #myDisplay #displayBody li.select{ 156 | width: 449px; 157 | height: 449px; 158 | display: block; 159 | } 160 | /*放大镜效果的布局*/ 161 | #tab { position: relative; width: 450px; height: 450px; background: #CDE074; z-index: 1;} 162 | #mark { position: absolute; top: 0; left: 0; width: 140px; height: 140px; 163 | /*用图片会导致没有直接用颜色，在标准浏览器体验好;但是用这个，在加上边框可以兼容到低版本IE*/ 164 | background: url("../img/mark.png"); 165 | /*background:#c40000;*/ 166 | border: 1px solid #c40000 ; 167 | opacity: 0.5; filter: alpha(opacity=50); cursor: move; } 168 | #container{ position:absolute; height:450px; width:450px; background:pink; overflow:hidden;left: 480px;top: 0px;z-index: 2;} 169 | #bigImg{ position:absolute; display:block; border:none;} 170 | /*商品展示右侧区域*/ 171 | #myDisplay .right{ 172 | position: absolute; 173 | left: 500px; 174 | top: 0; 175 | } 176 | #myDisplay .right .title{ 177 | position: absolute; 178 | top: 19px; 179 | width: 710px; 180 | } 181 | #myDisplay .right .title span{ 182 | position: absolute; 183 | top: 34px; 184 | font-family: "Arial"; 185 | font-size: 12px; 186 | color: #c40000; 187 | } 188 | #myDisplay .right .price{ 189 | position: absolute; 190 | top: 109px; 191 | width: 710px; 192 | height: 98px; 193 | border-bottom: 1px solid #eeeeee; 194 | } 195 | #myDisplay .right .price .xiaoxi1{ 196 | display: none; 197 | position: absolute; 198 | top:0; 199 | left: 300px; 200 | width:333px; 201 | height:26px; 202 | line-height: 26px; 203 | background: url("../img/xiaoxikuang1.jpg") no-repeat 0 0 ; 204 | padding-left: 10px; 205 | } 206 | #myDisplay .right .price .mall-price{ 207 | position: absolute; 208 | top: 9px; 209 | left: 0; 210 | } 211 | #myDisplay .right .price .price-number{ 212 | position: absolute; 213 | left: 55px; 214 | top: -10px; 215 | color: #c40000; 216 | } 217 | #myDisplay .right .price .price-number b{ 218 | font-size: 32px; 219 | } 220 | #myDisplay .right .price #rent{ 221 | position: absolute; 222 | left: 224px; 223 | top: 7px; 224 | } 225 | #myDisplay .right .price .location{ 226 | position: absolute; 227 | left: 0px; 228 | top: 47px; 229 | } 230 | #myDisplay .right .price .location .city{ 231 | position: absolute; 232 | left: 71px; 233 | top: 0; 234 | display: block; 235 | width: 110px; 236 | height: 16px; 237 | font-size: 12px; 238 | background: #c40000; 239 | text-align: center; 240 | padding-top: 0px; 241 | color: #FFF; 242 | } 243 | #myDisplay .right .deliver-goods{ 244 | position: absolute; 245 | top: 207px; 246 | border-bottom: 1px solid #eeeeee; 247 | width: 710px; 248 | height: 100px; 249 | } 250 | #myDisplay .right .deliver-goods .one{ 251 | position: absolute; 252 | top: 26px; 253 | width: 700px; 254 | height: 16px; 255 | line-height: 16px; 256 | } 257 | #myDisplay .right .deliver-goods .one .destination div{ 258 | float: left; 259 | margin-right: 5px; 260 | } 261 | #myDisplay .right .deliver-goods .one .destination #distributionTime #xiaoxi2{ 262 | display: none; 263 | position: absolute; 264 | top:18px; 265 | left: -82px; 266 | width:219px; 267 | height:31px; 268 | text-align: center; 269 | line-height: 36px; 270 | background: url("../img/xiaoxikuang2.png") no-repeat 0 0 ; 271 | } 272 | #myDisplay .right .deliver-goods .two{ 273 | position: absolute; 274 | top: 63px; 275 | width: 300px; 276 | } 277 | #myDisplay .right .buy{ 278 | width: 710px; 279 | height: 240px; 280 | position: absolute; 281 | top: 307px; 282 | 283 | } 284 | #myDisplay .right .buy .one{ 285 | position: absolute; 286 | top: 26px; 287 | 288 | } 289 | #myDisplay .right .buy .one .introduces{ 290 | position: absolute; 291 | top: 7px; 292 | width: 40px; 293 | } 294 | #myDisplay .right .buy .one .web{ 295 | width: 138px; 296 | height: 23px; 297 | border: 2px solid #863177; 298 | text-align: center; 299 | line-height: 23px; 300 | cursor: pointer; 301 | } 302 | #myDisplay .right .buy .one .web img{ 303 | position: absolute; 304 | right: 0; 305 | bottom: 0; 306 | } 307 | #myDisplay .right .buy .two{ 308 | position: absolute; 309 | top: 77px; 310 | } 311 | #myDisplay .right .buy .two { 312 | position: absolute; 313 | top: 77px; 314 | } 315 | #myDisplay .right .buy .two .introduces{ 316 | position: absolute; 317 | top: 7px; 318 | width: 40px; 319 | } 320 | #myDisplay .right .buy .two #mallNum span{ 321 | float: left; 322 | } 323 | #myDisplay .right .buy .two #mallNum .mallNumStyle{ 324 | display: block; 325 | width: 24px; 326 | height: 24px; 327 | border: 1px solid #d9d9d9; 328 | text-align: center; 329 | line-height: 24px; 330 | cursor: pointer; 331 | } 332 | #myDisplay .right .buy .two #mallNum .content{ 333 | width: 38px; 334 | height: 24px; 335 | text-align: center; 336 | line-height: 24px; 337 | border-top:1px solid #d9d9d9; 338 | border-bottom:1px solid #d9d9d9; 339 | } 340 | #myDisplay .right .buy .three{ 341 | position: absolute; 342 | top: 135px; 343 | } 344 | #myDisplay .right .buy .three .flag{ 345 | color: #c40000; 346 | word-break:keep-all; /* 不换行 */ 347 | white-space:nowrap; /* 不换行 */ 348 | overflow:hidden; 349 | text-overflow:ellipsis; 350 | } 351 | #myDisplay .right .buyNowdiv{ 352 | position: absolute; 353 | top: 480px; 354 | width: 400px; 355 | } 356 | .buyNow{ 357 | display: block; 358 | width: 200px; 359 | height: 50px; 360 | line-height: 50px; 361 | text-align: center; 362 | font-size: 18px; 363 | color: #FFF; 364 | background:#c40000 ; 365 | } 366 | .buyNow:hover{ 367 | background:#d90000; 368 | } 369 | /*商品展示区域结束*/ 370 | 371 | /*第二个导航条开始*/ 372 | #twoNav{ 373 | width: 1210px; 374 | height: 57px; 375 | border-bottom: 3px solid #34383b; 376 | } 377 | #twoNav .nav{ 378 | display: block; 379 | width: 96px; 380 | height: 57px; 381 | text-align: center; 382 | line-height: 58px; 383 | float: left; 384 | } 385 | #twoNav .select{ 386 | background:#34383b; 387 | color: #FFF; 388 | } 389 | #twoNav .nav:hover{ 390 | background:#34383b; 391 | color: #FFF; 392 | } 393 | #twoNav .buyNowdiv{ 394 | position: absolute; 395 | right: 0; 396 | bottom: 0; 397 | } 398 | #twoNav .simple{ 399 | position: absolute; 400 | left: 706px; 401 | top: 29px; 402 | } 403 | #twoNav .simple .position span{ 404 | margin-right: 32px; 405 | } 406 | #twoNav .simple .wage{ 407 | position: absolute; 408 | left: 162px; 409 | top: 0; 410 | } 411 | #twoNav .simple .wage .price{ 412 | font-size: 30px; 413 | position: absolute; 414 | top: -18px; 415 | left: 5px; 416 | color: #666666; 417 | } 418 | /*第二个导航条结束*/ 419 | /*个人简介和技能书区域开始*/ 420 | #introduces{ 421 | width: 1210px; 422 | height: 658px; 423 | padding-top: 10px; 424 | } 425 | #introduces .left{ 426 | width: 594px; 427 | height: 657px; 428 | background: #8c0000; 429 | } 430 | #introduces .code-dog{ 431 | position: absolute; 432 | left: 63px; 433 | top: 45px; 434 | } 435 | #introduces .information{ 436 | position: absolute; 437 | left: 302px; 438 | top: 45px; 439 | } 440 | #introduces .left ul{ 441 | position: absolute; 442 | left: 63px; 443 | top: 201px; 444 | width: 470px; 445 | height: 300px; 446 | } 447 | #introduces .left ul li{ 448 | width: 470px; 449 | height: 59px; 450 | border-bottom: 1px solid #a9a9a9; 451 | position: relative; 452 | } 453 | 454 | #introduces .left ul li div{ 455 | width: 59px; 456 | height: 59px; 457 | } 458 | #introduces .left ul li .user{background: url("../img/ico.png") no-repeat 0 0;} 459 | #introduces .left ul li .local{background: url("../img/ico.png") no-repeat -236px 0;} 460 | #introduces .left ul li .edu{background: url("../img/ico.png") no-repeat -177px 0;} 461 | #introduces .left ul li .work{background: url("../img/ico.png") no-repeat -59px 0;} 462 | #introduces .left ul li .marry{background: url("../img/ico.png") no-repeat -118px 0;} 463 | #introduces .left ul li p{ 464 | position: absolute; 465 | left: 75px; 466 | top: 0; 467 | line-height:59px ; 468 | color: #FFF; 469 | } 470 | #introduces .left .github{ 471 | position: absolute; 472 | top: 548px; 473 | left: 63px; 474 | width: 193px; 475 | height: 60px; 476 | background: url("../img/github.jpg"); 477 | } 478 | #introduces .left .blog{ 479 | position: absolute; 480 | top: 548px; 481 | left: 340px; 482 | width: 193px; 483 | height: 60px; 484 | background: url("../img/blog.jpg"); 485 | } 486 | #introduces .left .select-github:hover{background: url("../img/github-select.jpg");} 487 | #introduces .left .select-blog:hover{background: url("../img/blog-select.jpg");} 488 | 489 | #introduces .right{ 490 | width: 606px; 491 | height: 657px; 492 | position: absolute; 493 | top: 10px; 494 | left: 604px; 495 | } 496 | #introduces .right p{ 497 | width: 606px; 498 | height: 50px; 499 | background: #3c3c3c; 500 | line-height: 50px; 501 | text-indent: 11px; 502 | color: #FFF; 503 | font-size: 24px; 504 | } 505 | #introduces .right ul{ 506 | width: 606px; 507 | height: 606px; 508 | position: absolute; 509 | top:50px; 510 | left:0; 511 | background: orange; 512 | } 513 | #introduces .right ul li{ 514 | width: 189px; 515 | height: 189px; 516 | background: #fff; 517 | float: left; 518 | line-height: 189px; 519 | text-align: center; 520 | cursor: move; 521 | margin:10px 0 0 10px; 522 | display:inline; 523 | } 524 | #introduces .right ul li:hover{ 525 | background: #7cbaf8; 526 | } 527 | 528 | /*个人简介和技能书区域结束*/ 529 | /*技能总结区域开始*/ 530 | #skillsSummaryBack{ 531 | width: 100%; 532 | height:1336px; 533 | background: #efefef; 534 | } 535 | #skillsSummary{ 536 | width: 1210px; 537 | height: 1326px; 538 | position: relative; 539 | top: 11px; 540 | } 541 | #skillsSummary .up .left{ 542 | position: absolute; 543 | left: 0; 544 | top: 0; 545 | width: 96px; 546 | height: 971px; 547 | background: #0099ff; 548 | } 549 | #skillsSummary .up .left p{ 550 | position: absolute; 551 | left: 33px; 552 | top: 385px; 553 | width: 30px; 554 | height: 30px; 555 | text-align: center; 556 | line-height: 60px; 557 | font-size: 30px; 558 | color: #FFF; 559 | } 560 | #skillsSummary .up .right{ 561 | position: absolute; 562 | left: 105px; 563 | top: 0; 564 | width: 1109px; 565 | height: 971px; 566 | } 567 | #skillsSummary .up .right li{ 568 | width: 1104px ; 569 | height:59px; 570 | line-height: 59px; 571 | background: #fff; 572 | text-indent: 10px; 573 | border-bottom: 1px solid #CCC; 574 | margin-bottom: 10px; 575 | transition: all 0.6s; 576 | cursor: pointer; 577 | } 578 | #skillsSummary .up .right li:hover { 579 | /*text-indent首行缩进的，效果的主要*/ 580 | text-indent: 30px; 581 | border-radius: 5px; 582 | color: #fff; 583 | text-shadow: 0 2px 1px #360; 584 | background-color: #393; 585 | /*下面是四套渐变的，没写欧朋的*/ 586 | background-image: -webkit-linear-gradient(top,#62c462,#51a351); 587 | background-image: -moz-linear-gradient(top,#62c462,#51a351); 588 | background-image: -ms-linear-gradient(top,#62c462,#51a351); 589 | background-image: linear-gradient(top,#62c462,#51a351); 590 | } 591 | #skillsSummary .down .left{ 592 | position: absolute; 593 | top: 982px; 594 | left: 0; 595 | width: 96px; 596 | height: 322px; 597 | background: #0099ff; 598 | } 599 | #skillsSummary .down .left p{ 600 | position: absolute; 601 | left: 33px; 602 | top: 38px; 603 | width: 30px; 604 | height: 207px; 605 | text-align: center; 606 | line-height: 60px; 607 | font-size: 30px; 608 | color: #FFF; 609 | } 610 | #skillsSummary .down .right{ 611 | position: absolute; 612 | left: 105px; 613 | top: 982px; 614 | width: 1109px; 615 | height: 323px; 616 | } 617 | #skillsSummary .down .right li{ 618 | width: 1104px; 619 | height: 99px; 620 | background: #FFF; 621 | position: relative; 622 | color: #999999; 623 | margin-bottom: 8px; 624 | display: inline-block; 625 | border-bottom: 1px solid #CCC; 626 | box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 627 | -webkit-transition: 0.3s all ease; 628 | -moz-transition: 0.3s all ease; 629 | -ms-transition: 0.3s all ease; 630 | transition: 0.3s all ease; 631 | overflow: hidden; 632 | cursor: pointer; 633 | } 634 | #skillsSummary .down .right li p{ 635 | position: absolute; 636 | font-size: 30px; 637 | top: 14px; 638 | left: 37px; 639 | } 640 | #skillsSummary .down .right li span{ 641 | position: absolute; 642 | top: 57px; 643 | left: 37px; 644 | font-size: 16px; 645 | } 646 | #skillsSummary .down .right li:hover { 647 | cursor:pointer; 648 | background: #E1F0FA; 649 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 650 | } 651 | #skillsSummary .down .right li:hover p { 652 | color: #0099ff; 653 | -webkit-animation: moveTop 300ms ease-in-out ; 654 | -moz-animation: moveTop 300ms ease-in-out ; 655 | -ms-animation: moveTop 300ms ease-in-out ; 656 | -o-animation: moveTop 300ms ease-in-out ; 657 | } 658 | #skillsSummary .down .right li:hover span { 659 | color: #000; 660 | -webkit-animation: moveBottom 300ms ease-in-out; 661 | -moz-animation: moveBottom 300ms ease-in-out; 662 | -ms-animation: moveBottom 300ms ease-in-out; 663 | } 664 | /*-webkit-transition;是动画出现的过度状态，0.3s all ease;代表0.3秒， 所有 安逸的*/ 665 | /*-webkit-是谷歌跟苹果浏览器的私有前缀；moz是火狐浏览器的私有前缀，ms是IE，o是欧鹏浏览器*/ 666 | /*动画效果*/ 667 | @-webkit-keyframes moveTop { 668 | from { 669 | opacity: 0; 670 | -webkit-transform: translateY(-200%); 671 | } 672 | to { 673 | opacity: 1; 674 | -webkit-transform: translateY(0%); 675 | } 676 | } 677 | @-moz-keyframes moveTop { 678 | from { 679 | opacity: 0; 680 | -moz-transform: translateY(-200%); 681 | } 682 | to { 683 | opacity: 1; 684 | -moz-transform: translateY(0%); 685 | } 686 | } 687 | @-ms-keyframes moveTop { 688 | from { 689 | opacity: 0; 690 | -ms-transform: translateY(-200%); 691 | } 692 | to { 693 | opacity: 1; 694 | -ms-transform: translateY(0%); 695 | } 696 | } 697 | @-webkit-keyframes moveBottom { 698 | from { 699 | opacity: 0; 700 | -webkit-transform: translateY(200%); 701 | } 702 | to { 703 | opacity: 1; 704 | -webkit-transform: translateY(0%); 705 | } 706 | } 707 | @-moz-keyframes moveBottom { 708 | from { 709 | opacity: 0; 710 | -moz-transform: translateY(200%); 711 | } 712 | to { 713 | opacity: 1; 714 | -moz-transform: translateY(0%); 715 | } 716 | } 717 | @-ms-keyframes moveBottom { 718 | from { 719 | opacity: 0; 720 | -ms-transform: translateY(200%); 721 | } 722 | to { 723 | opacity: 1; 724 | -ms-transform: translateY(0%); 725 | } 726 | } 727 | /*技能总结区域结束*/ 728 | 729 | /*作品展示区域开始*/ 730 | .demo-list { 731 | width: 1210px; 732 | height: 760px; 733 | background: #dddddd; 734 | position: relative; 735 | top: 8px; 736 | left: 50%; 737 | margin-left: -605px; 738 | margin-bottom: 15px; 739 | } 740 | .online{ 741 | width: 1210px; 742 | height: 260px; 743 | } 744 | 745 | .demo-list li { 746 | position: relative; 747 | width: 230px; 748 | height: 240px; 749 | background: #FFF; 750 | margin: 10px 0 0 10px; 751 | float: left; 752 | display: inline; 753 | } 754 | .demo-list li a { 755 | color: #fff; 756 | } 757 | 758 | .demo-list li a .hot_info { 759 | display: none; 760 | position: absolute; 761 | left: 0; 762 | top: 0; 763 | background: #0d9572; 764 | filter: alpha(Opacity=80); 765 | opacity: 0.8; 766 | width: 230px; 767 | height: 240px; 768 | cursor: pointer; 769 | } 770 | 771 | .demo-list li a .hot_info h2 { 772 | font-size: 20px; 773 | margin: 6px 8px; 774 | /*font-weight: normal;*/ 775 | text-align: center; 776 | width: 214px; 777 | height: 30px; 778 | border-bottom: 5px solid #FFF; 779 | } 780 | .demo-list li a .hot_info p { 781 | margin: 8px 13px; 782 | } 783 | /*工作经历区域开始*/ 784 | #menu { 785 | position: relative; 786 | margin-top: 50px; 787 | border-top: 2px solid #999; 788 | border-bottom: 1px solid #dddddd; 789 | } 790 | #menu .menuTop { 791 | background: #F7F7F7; 792 | padding-left: 8px; 793 | height: 50px; 794 | line-height: 50px; 795 | } 796 | 797 | #menu .menu-child { 798 | width: 100%; 799 | } 800 | 801 | #menu .menu-child h3 { 802 | position: relative; 803 | padding: 0 6px 0 36px; 804 | height: 50px; 805 | line-height: 50px; 806 | border: 1px solid #dddddd; 807 | cursor: pointer; 808 | font-weight: normal; 809 | } 810 | 811 | #menu .menu-child h3 span { 812 | display: block; 813 | position: absolute; 814 | top: 15px; 815 | left: 10px; 816 | width: 16px; 817 | height: 16px; 818 | } 819 | 820 | #menu .menu-child h3 span.bg1 { 821 | background: #999; 822 | background-position: -42px -28px; 823 | } 824 | 825 | #menu .menu-child h3 span.bg2 { 826 | background: #dddddd; 827 | background-position: -59px -28px; 828 | } 829 | #menu .menu-child .menu-child-body{ 830 | overflow: hidden; 831 | border: 1px solid #dddddd; 832 | border-top:none ; 833 | height: 100px; 834 | display: none; 835 | padding: 10px 10px 30px 36px; 836 | } 837 | #menu .menu-child .select{ 838 | display: block; 839 | } 840 | #menu .menu-child .menu-child-body p{ 841 | font-size: 14px; 842 | } 843 | /*工作经历区域结束*/ 844 | 845 | /*自我评价区域开始*/ 846 | #evaluation{ 847 | position: relative; 848 | top: 50px; 849 | width: 100%; 850 | height: 300px; 851 | background: #1f1f1f; 852 | } 853 | #evaluation .middle{ 854 | width: 1230px; 855 | height: 280px; 856 | position: relative; 857 | } 858 | #evaluation .middle li { 859 | width: 390px; 860 | height: 200px; 861 | color: #FFF; 862 | float: left; 863 | margin-top: 50px; 864 | margin-right: 18px; 865 | } 866 | #evaluation .middle li div{ 867 | position: relative; 868 | top: 20px; 869 | } 870 | #evaluation .middle li a{ 871 | display: block; 872 | margin-bottom: 10px; 873 | color: #CCC; 874 | cursor: pointer; 875 | text-align:justify; 876 | } 877 | #evaluation .middle li a:hover{ 878 | color: #E58994; 879 | } 880 | /*自我评价区域结束*/ 881 | 882 | 883 | 884 | /*默认的全局使用样式*/ 885 | a{ 886 | text-decoration: none; 887 | color: #000; 888 | } 889 | .clear{ 890 | clear: both; 891 | } 892 | .introduces{ 893 | font-size: 12px; 894 | color: #999999; 895 | } 896 | /*下面是商品详情页的附加字样式*/ 897 | .blue-font{ 898 | font-size: 12px; 899 | color: #6388cc; 900 | position: relative; 901 | cursor: pointer; 902 | } 903 | .blue-font a{ 904 | width: 12px; 905 | text-align: center; 906 | height: 12px; 907 | line-height: 12px; 908 | display: block; 909 | background: #6388cc; 910 | color: #FFF; 911 | font-size: 10px; 912 | position: absolute; 913 | top: 2px; 914 | left: 58px; 915 | } 916 | .little-font{ 917 | font-size: 12px; 918 | } 919 | .right-right{ 920 | position: absolute; 921 | top: 0; 922 | left: 54px; 923 | width: 600px; 924 | } 925 | /*兼容的居中布局*/ 926 | .middle{ 927 | position: relative; 928 | width: 1210px; 929 | left: 50%; 930 | margin-left: -605px; 931 | } 932 | /*兼容60px的标示*/ 933 | .middle-clear-flag{ 934 | position:relative; 935 | width: 1210px; 936 | height: 60px; 937 | } 938 | .title-flag{ 939 | width: 1210px; 940 | height: 72px; 941 | text-align: center; 942 | line-height: 72px; 943 | position: relative; 944 | left: 50%; 945 | margin-left: -605px; 946 | background: #3c3c3c; 947 | color: #FFF; 948 | font-size: 30px; 949 | } -------------------------------------------------------------------------------- /0备份存档/V0.01/css/style.css: -------------------------------------------------------------------------------- 1 | html,body,div,ul,li,a,img,span,p,h3,h6{padding: 0;margin: 0;} 2 | body{font-family: "微软雅黑", sans-serif;-webkit-user-select: none;} 3 | img{border: none;display: block} 4 | ul,li{ 5 | list-style: none; 6 | } 7 | /*头部区域开始*/ 8 | #header{ 9 | width: 1210px; 10 | height: 150px; 11 | } 12 | #header .logo{ 13 | position: absolute; 14 | left: 0; 15 | top: 50px; 16 | } 17 | #header .explain{ 18 | position: absolute; 19 | left: 261px; 20 | top: 61px; 21 | } 22 | #header .explain a.list1{ 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | #header .explain a.list2{ 28 | position: absolute; 29 | left: 85px; 30 | top: 0; 31 | } 32 | #header .explain a.list3{ 33 | position: absolute; 34 | left: 168px; 35 | top: 0; 36 | } 37 | #header .phone-nub{ 38 | position: absolute; 39 | right: 0px; 40 | top:50px; 41 | } 42 | #tooltip{padding: 1px;position: absolute;display: none;background: #ffffff;} 43 | /*头部区域结束*/ 44 | 45 | /*导航条开始*/ 46 | .nav-background{ 47 | width: 100%; 48 | height: 50px; 49 | background: #3c3c3c; 50 | position: relative; 51 | z-index: 2; 52 | } 53 | #nav{ 54 | width: 1210px; 55 | z-index: 2; 56 | } 57 | #nav ul{ 58 | width: 100%; 59 | height: 50px; 60 | line-height: 50px; 61 | background: #3c3c3c; 62 | } 63 | #nav ul li{ 64 | color: #FFF; 65 | float: left; 66 | padding: 0 10px; 67 | cursor:pointer; 68 | } 69 | #nav ul li a{ 70 | color: #FFF; 71 | } 72 | #nav ul li:hover{ 73 | background: #101010; 74 | } 75 | #nav-div2{ 76 | position: absolute; 77 | height: 0; 78 | width: 100%; 79 | border:solid 1px #a9a9a9 ; 80 | border-top: none; 81 | border-bottom: none; 82 | background: #F9AF2A; 83 | cursor: pointer; 84 | display: none; 85 | z-index: 2; 86 | } 87 | #nav-div2 a{ 88 | position: relative; 89 | top: 20px; 90 | text-decoration: none; 91 | color: darkred; 92 | margin: 20px; 93 | border: 1px solid #F9AF2A; 94 | } 95 | #nav-div2 a:hover{ 96 | text-decoration: none; 97 | color: #FFF; 98 | border: 1px solid darkred; 99 | background:darkred ; 100 | } 101 | 102 | #nav #contactInformation{ 103 | width: 200px; 104 | height: 150px; 105 | position: absolute; 106 | left: 210px; 107 | display: none; 108 | } 109 | #nav #contactInformation a{ 110 | width: 220px; 111 | height: 50px; 112 | display: block; 113 | text-align: left; 114 | line-height: 50px; 115 | font-size:18px; 116 | padding-left: 10px; 117 | } 118 | #nav #contactInformation a.phone{ 119 | background:#162e2e; 120 | color: #1bbc9b; 121 | } 122 | #nav #contactInformation a.email{ 123 | background:#312e1f; 124 | color: #fdbd1f; 125 | } 126 | #nav #contactInformation a.advice{ 127 | background:#2f2123; 128 | color: #c54337; 129 | } 130 | /*导航条结束*/ 131 | /*商品展示区域开始*/ 132 | #myDisplay{ 133 | width: 1210px; 134 | height: 630px; 135 | margin-top: 38px; 136 | } 137 | #myDisplay #displayHeader{ 138 | position: absolute; 139 | top: 460px; 140 | } 141 | #myDisplay #displayHeader li{ 142 | float: left; 143 | width: 80px; 144 | height: 80px; 145 | margin-right: 12px; 146 | background: lightseagreen; 147 | cursor: pointer; 148 | } 149 | #myDisplay #displayBody li{ 150 | width: 449px; 151 | height: 449px; 152 | display: none; 153 | position: relative; 154 | } 155 | #myDisplay #displayBody li.select{ 156 | width: 449px; 157 | height: 449px; 158 | display: block; 159 | } 160 | /*放大镜效果的布局*/ 161 | #tab { position: relative; width: 450px; height: 450px; background: #CDE074; z-index: 1;} 162 | #mark { position: absolute; top: 0; left: 0; width: 140px; height: 140px; 163 | /*用图片会导致没有直接用颜色，在标准浏览器体验好;但是用这个，在加上边框可以兼容到低版本IE*/ 164 | background: url("../img/mark.png"); 165 | /*background:#c40000;*/ 166 | border: 1px solid #c40000 ; 167 | opacity: 0.5; filter: alpha(opacity=50); cursor: move; } 168 | #container{ position:absolute; height:450px; width:450px; background:pink; overflow:hidden;left: 480px;top: 0px;z-index: 2;} 169 | #bigImg{ position:absolute; display:block; border:none;} 170 | /*商品展示右侧区域*/ 171 | #myDisplay .right{ 172 | position: absolute; 173 | left: 500px; 174 | top: 0; 175 | } 176 | #myDisplay .right .title{ 177 | position: absolute; 178 | top: 19px; 179 | width: 710px; 180 | } 181 | #myDisplay .right .title span{ 182 | position: absolute; 183 | top: 34px; 184 | font-family: "Arial"; 185 | font-size: 12px; 186 | color: #c40000; 187 | } 188 | #myDisplay .right .price{ 189 | position: absolute; 190 | top: 109px; 191 | width: 710px; 192 | height: 98px; 193 | border-bottom: 1px solid #eeeeee; 194 | } 195 | #myDisplay .right .price .xiaoxi1{ 196 | display: none; 197 | position: absolute; 198 | top:0; 199 | left: 300px; 200 | width:333px; 201 | height:26px; 202 | line-height: 26px; 203 | background: url("../img/xiaoxikuang1.jpg") no-repeat 0 0 ; 204 | padding-left: 10px; 205 | } 206 | #myDisplay .right .price .mall-price{ 207 | position: absolute; 208 | top: 9px; 209 | left: 0; 210 | } 211 | #myDisplay .right .price .price-number{ 212 | position: absolute; 213 | left: 55px; 214 | top: -10px; 215 | color: #c40000; 216 | } 217 | #myDisplay .right .price .price-number b{ 218 | font-size: 32px; 219 | } 220 | #myDisplay .right .price #rent{ 221 | position: absolute; 222 | left: 224px; 223 | top: 7px; 224 | } 225 | #myDisplay .right .price .location{ 226 | position: absolute; 227 | left: 0px; 228 | top: 47px; 229 | } 230 | #myDisplay .right .price .location .city{ 231 | position: absolute; 232 | left: 71px; 233 | top: 0; 234 | display: block; 235 | width: 110px; 236 | height: 16px; 237 | font-size: 12px; 238 | background: #c40000; 239 | text-align: center; 240 | padding-top: 0px; 241 | color: #FFF; 242 | } 243 | #myDisplay .right .deliver-goods{ 244 | position: absolute; 245 | top: 207px; 246 | border-bottom: 1px solid #eeeeee; 247 | width: 710px; 248 | height: 100px; 249 | } 250 | #myDisplay .right .deliver-goods .one{ 251 | position: absolute; 252 | top: 26px; 253 | width: 700px; 254 | height: 16px; 255 | line-height: 16px; 256 | } 257 | #myDisplay .right .deliver-goods .one .destination div{ 258 | float: left; 259 | margin-right: 5px; 260 | } 261 | #myDisplay .right .deliver-goods .one .destination #distributionTime #xiaoxi2{ 262 | display: none; 263 | position: absolute; 264 | top:18px; 265 | left: -82px; 266 | width:219px; 267 | height:31px; 268 | text-align: center; 269 | line-height: 36px; 270 | background: url("../img/xiaoxikuang2.png") no-repeat 0 0 ; 271 | } 272 | #myDisplay .right .deliver-goods .two{ 273 | position: absolute; 274 | top: 63px; 275 | width: 300px; 276 | } 277 | #myDisplay .right .buy{ 278 | width: 710px; 279 | height: 240px; 280 | position: absolute; 281 | top: 307px; 282 | 283 | } 284 | #myDisplay .right .buy .one{ 285 | position: absolute; 286 | top: 26px; 287 | 288 | } 289 | #myDisplay .right .buy .one .introduces{ 290 | position: absolute; 291 | top: 7px; 292 | width: 40px; 293 | } 294 | #myDisplay .right .buy .one .web{ 295 | width: 138px; 296 | height: 23px; 297 | border: 2px solid #863177; 298 | text-align: center; 299 | line-height: 23px; 300 | cursor: pointer; 301 | } 302 | #myDisplay .right .buy .one .web img{ 303 | position: absolute; 304 | right: 0; 305 | bottom: 0; 306 | } 307 | #myDisplay .right .buy .two{ 308 | position: absolute; 309 | top: 77px; 310 | } 311 | #myDisplay .right .buy .two { 312 | position: absolute; 313 | top: 77px; 314 | } 315 | #myDisplay .right .buy .two .introduces{ 316 | position: absolute; 317 | top: 7px; 318 | width: 40px; 319 | } 320 | #myDisplay .right .buy .two #mallNum span{ 321 | float: left; 322 | } 323 | #myDisplay .right .buy .two #mallNum .mallNumStyle{ 324 | display: block; 325 | width: 24px; 326 | height: 24px; 327 | border: 1px solid #d9d9d9; 328 | text-align: center; 329 | line-height: 24px; 330 | cursor: pointer; 331 | } 332 | #myDisplay .right .buy .two #mallNum .content{ 333 | width: 38px; 334 | height: 24px; 335 | text-align: center; 336 | line-height: 24px; 337 | border-top:1px solid #d9d9d9; 338 | border-bottom:1px solid #d9d9d9; 339 | } 340 | #myDisplay .right .buy .three{ 341 | position: absolute; 342 | top: 135px; 343 | } 344 | #myDisplay .right .buy .three .flag{ 345 | color: #c40000; 346 | word-break:keep-all; /* 不换行 */ 347 | white-space:nowrap; /* 不换行 */ 348 | overflow:hidden; 349 | text-overflow:ellipsis; 350 | } 351 | #myDisplay .right .buyNowdiv{ 352 | position: absolute; 353 | top: 480px; 354 | width: 400px; 355 | } 356 | .buyNow{ 357 | display: block; 358 | width: 200px; 359 | height: 50px; 360 | line-height: 50px; 361 | text-align: center; 362 | font-size: 18px; 363 | color: #FFF; 364 | background:#c40000 ; 365 | } 366 | .buyNow:hover{ 367 | background:#d90000; 368 | } 369 | /*商品展示区域结束*/ 370 | 371 | /*第二个导航条开始*/ 372 | #twoNav{ 373 | width: 1210px; 374 | height: 57px; 375 | border-bottom: 3px solid #34383b; 376 | } 377 | #twoNav .nav{ 378 | display: block; 379 | width: 96px; 380 | height: 57px; 381 | text-align: center; 382 | line-height: 58px; 383 | float: left; 384 | } 385 | #twoNav .select{ 386 | background:#34383b; 387 | color: #FFF; 388 | } 389 | #twoNav .nav:hover{ 390 | background:#34383b; 391 | color: #FFF; 392 | } 393 | #twoNav .buyNowdiv{ 394 | position: absolute; 395 | right: 0; 396 | bottom: 0; 397 | } 398 | #twoNav .simple{ 399 | position: absolute; 400 | left: 706px; 401 | top: 29px; 402 | } 403 | #twoNav .simple .position span{ 404 | margin-right: 32px; 405 | } 406 | #twoNav .simple .wage{ 407 | position: absolute; 408 | left: 162px; 409 | top: 0; 410 | } 411 | #twoNav .simple .wage .price{ 412 | font-size: 30px; 413 | position: absolute; 414 | top: -18px; 415 | left: 5px; 416 | color: #666666; 417 | } 418 | /*第二个导航条结束*/ 419 | /*个人简介和技能书区域开始*/ 420 | #introduces{ 421 | width: 1210px; 422 | height: 658px; 423 | padding-top: 10px; 424 | } 425 | #introduces .left{ 426 | width: 594px; 427 | height: 657px; 428 | background: #8c0000; 429 | } 430 | #introduces .code-dog{ 431 | position: absolute; 432 | left: 63px; 433 | top: 45px; 434 | } 435 | #introduces .information{ 436 | position: absolute; 437 | left: 302px; 438 | top: 45px; 439 | } 440 | #introduces .left ul{ 441 | position: absolute; 442 | left: 63px; 443 | top: 201px; 444 | width: 470px; 445 | height: 300px; 446 | } 447 | #introduces .left ul li{ 448 | width: 470px; 449 | height: 59px; 450 | border-bottom: 1px solid #a9a9a9; 451 | position: relative; 452 | } 453 | 454 | #introduces .left ul li div{ 455 | width: 59px; 456 | height: 59px; 457 | } 458 | #introduces .left ul li .user{background: url("../img/ico.png") no-repeat 0 0;} 459 | #introduces .left ul li .local{background: url("../img/ico.png") no-repeat -236px 0;} 460 | #introduces .left ul li .edu{background: url("../img/ico.png") no-repeat -177px 0;} 461 | #introduces .left ul li .work{background: url("../img/ico.png") no-repeat -59px 0;} 462 | #introduces .left ul li .marry{background: url("../img/ico.png") no-repeat -118px 0;} 463 | #introduces .left ul li p{ 464 | position: absolute; 465 | left: 75px; 466 | top: 0; 467 | line-height:59px ; 468 | color: #FFF; 469 | } 470 | #introduces .left .github{ 471 | position: absolute; 472 | top: 548px; 473 | left: 63px; 474 | width: 193px; 475 | height: 60px; 476 | background: url("../img/github.jpg"); 477 | } 478 | #introduces .left .blog{ 479 | position: absolute; 480 | top: 548px; 481 | left: 340px; 482 | width: 193px; 483 | height: 60px; 484 | background: url("../img/blog.jpg"); 485 | } 486 | #introduces .left .select-github:hover{background: url("../img/github-select.jpg");} 487 | #introduces .left .select-blog:hover{background: url("../img/blog-select.jpg");} 488 | 489 | #introduces .right{ 490 | width: 606px; 491 | height: 657px; 492 | position: absolute; 493 | top: 10px; 494 | left: 604px; 495 | } 496 | #introduces .right p{ 497 | width: 606px; 498 | height: 50px; 499 | background: #3c3c3c; 500 | line-height: 50px; 501 | text-indent: 11px; 502 | color: #FFF; 503 | font-size: 24px; 504 | } 505 | #introduces .right ul{ 506 | width: 606px; 507 | height: 606px; 508 | position: absolute; 509 | top:50px; 510 | left:0; 511 | background: orange; 512 | } 513 | #introduces .right ul li{ 514 | width: 189px; 515 | height: 189px; 516 | background: #fff; 517 | float: left; 518 | line-height: 189px; 519 | text-align: center; 520 | cursor: move; 521 | margin:10px 0 0 10px; 522 | display:inline; 523 | } 524 | #introduces .right ul li:hover{ 525 | background: #7cbaf8; 526 | } 527 | 528 | /*个人简介和技能书区域结束*/ 529 | /*技能总结区域开始*/ 530 | #skillsSummaryBack{ 531 | width: 100%; 532 | height:1336px; 533 | background: #efefef; 534 | } 535 | #skillsSummary{ 536 | width: 1210px; 537 | height: 1326px; 538 | position: relative; 539 | top: 11px; 540 | } 541 | #skillsSummary .up .left{ 542 | position: absolute; 543 | left: 0; 544 | top: 0; 545 | width: 96px; 546 | height: 971px; 547 | background: #0099ff; 548 | } 549 | #skillsSummary .up .left p{ 550 | position: absolute; 551 | left: 33px; 552 | top: 385px; 553 | width: 30px; 554 | height: 30px; 555 | text-align: center; 556 | line-height: 60px; 557 | font-size: 30px; 558 | color: #FFF; 559 | } 560 | #skillsSummary .up .right{ 561 | position: absolute; 562 | left: 105px; 563 | top: 0; 564 | width: 1109px; 565 | height: 971px; 566 | } 567 | #skillsSummary .up .right li{ 568 | width: 1104px ; 569 | height:59px; 570 | line-height: 59px; 571 | background: #fff; 572 | text-indent: 10px; 573 | border-bottom: 1px solid #CCC; 574 | margin-bottom: 10px; 575 | transition: all 0.6s; 576 | cursor: pointer; 577 | } 578 | #skillsSummary .up .right li:hover { 579 | /*text-indent首行缩进的，效果的主要*/ 580 | text-indent: 30px; 581 | border-radius: 5px; 582 | color: #fff; 583 | text-shadow: 0 2px 1px #360; 584 | background-color: #393; 585 | /*下面是四套渐变的，没写欧朋的*/ 586 | background-image: -webkit-linear-gradient(top,#62c462,#51a351); 587 | background-image: -moz-linear-gradient(top,#62c462,#51a351); 588 | background-image: -ms-linear-gradient(top,#62c462,#51a351); 589 | background-image: linear-gradient(top,#62c462,#51a351); 590 | } 591 | #skillsSummary .down .left{ 592 | position: absolute; 593 | top: 982px; 594 | left: 0; 595 | width: 96px; 596 | height: 322px; 597 | background: #0099ff; 598 | } 599 | #skillsSummary .down .left p{ 600 | position: absolute; 601 | left: 33px; 602 | top: 38px; 603 | width: 30px; 604 | height: 207px; 605 | text-align: center; 606 | line-height: 60px; 607 | font-size: 30px; 608 | color: #FFF; 609 | } 610 | #skillsSummary .down .right{ 611 | position: absolute; 612 | left: 105px; 613 | top: 982px; 614 | width: 1109px; 615 | height: 323px; 616 | } 617 | #skillsSummary .down .right li{ 618 | width: 1104px; 619 | height: 99px; 620 | background: #FFF; 621 | position: relative; 622 | color: #999999; 623 | margin-bottom: 8px; 624 | display: inline-block; 625 | border-bottom: 1px solid #CCC; 626 | box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 627 | -webkit-transition: 0.3s all ease; 628 | -moz-transition: 0.3s all ease; 629 | -ms-transition: 0.3s all ease; 630 | transition: 0.3s all ease; 631 | overflow: hidden; 632 | cursor: pointer; 633 | } 634 | #skillsSummary .down .right li p{ 635 | position: absolute; 636 | font-size: 30px; 637 | top: 14px; 638 | left: 37px; 639 | } 640 | #skillsSummary .down .right li span{ 641 | position: absolute; 642 | top: 57px; 643 | left: 37px; 644 | font-size: 16px; 645 | } 646 | #skillsSummary .down .right li:hover { 647 | cursor:pointer; 648 | background: #E1F0FA; 649 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 650 | } 651 | #skillsSummary .down .right li:hover p { 652 | color: #0099ff; 653 | -webkit-animation: moveTop 300ms ease-in-out ; 654 | -moz-animation: moveTop 300ms ease-in-out ; 655 | -ms-animation: moveTop 300ms ease-in-out ; 656 | -o-animation: moveTop 300ms ease-in-out ; 657 | } 658 | #skillsSummary .down .right li:hover span { 659 | color: #000; 660 | -webkit-animation: moveBottom 300ms ease-in-out; 661 | -moz-animation: moveBottom 300ms ease-in-out; 662 | -ms-animation: moveBottom 300ms ease-in-out; 663 | } 664 | /*-webkit-transition;是动画出现的过度状态，0.3s all ease;代表0.3秒， 所有 安逸的*/ 665 | /*-webkit-是谷歌跟苹果浏览器的私有前缀；moz是火狐浏览器的私有前缀，ms是IE，o是欧鹏浏览器*/ 666 | /*动画效果*/ 667 | @-webkit-keyframes moveTop { 668 | from { 669 | opacity: 0; 670 | -webkit-transform: translateY(-200%); 671 | } 672 | to { 673 | opacity: 1; 674 | -webkit-transform: translateY(0%); 675 | } 676 | } 677 | @-moz-keyframes moveTop { 678 | from { 679 | opacity: 0; 680 | -moz-transform: translateY(-200%); 681 | } 682 | to { 683 | opacity: 1; 684 | -moz-transform: translateY(0%); 685 | } 686 | } 687 | @-ms-keyframes moveTop { 688 | from { 689 | opacity: 0; 690 | -ms-transform: translateY(-200%); 691 | } 692 | to { 693 | opacity: 1; 694 | -ms-transform: translateY(0%); 695 | } 696 | } 697 | @-webkit-keyframes moveBottom { 698 | from { 699 | opacity: 0; 700 | -webkit-transform: translateY(200%); 701 | } 702 | to { 703 | opacity: 1; 704 | -webkit-transform: translateY(0%); 705 | } 706 | } 707 | @-moz-keyframes moveBottom { 708 | from { 709 | opacity: 0; 710 | -moz-transform: translateY(200%); 711 | } 712 | to { 713 | opacity: 1; 714 | -moz-transform: translateY(0%); 715 | } 716 | } 717 | @-ms-keyframes moveBottom { 718 | from { 719 | opacity: 0; 720 | -ms-transform: translateY(200%); 721 | } 722 | to { 723 | opacity: 1; 724 | -ms-transform: translateY(0%); 725 | } 726 | } 727 | /*技能总结区域结束*/ 728 | 729 | /*作品展示区域开始*/ 730 | .demo-list { 731 | width: 1210px; 732 | height: 760px; 733 | background: #dddddd; 734 | position: relative; 735 | top: 8px; 736 | left: 50%; 737 | margin-left: -605px; 738 | margin-bottom: 15px; 739 | } 740 | .online{ 741 | width: 1210px; 742 | height: 260px; 743 | } 744 | 745 | .demo-list li { 746 | position: relative; 747 | width: 230px; 748 | height: 240px; 749 | background: #FFF; 750 | margin: 10px 0 0 10px; 751 | float: left; 752 | display: inline; 753 | } 754 | .demo-list li a { 755 | color: #fff; 756 | } 757 | 758 | .demo-list li a .hot_info { 759 | display: none; 760 | position: absolute; 761 | left: 0; 762 | top: 0; 763 | background: #0d9572; 764 | filter: alpha(Opacity=80); 765 | opacity: 0.8; 766 | width: 230px; 767 | height: 240px; 768 | cursor: pointer; 769 | } 770 | 771 | .demo-list li a .hot_info h2 { 772 | font-size: 20px; 773 | margin: 6px 8px; 774 | /*font-weight: normal;*/ 775 | text-align: center; 776 | width: 214px; 777 | height: 30px; 778 | border-bottom: 5px solid #FFF; 779 | } 780 | .demo-list li a .hot_info p { 781 | margin: 8px 13px; 782 | } 783 | /*工作经历区域开始*/ 784 | #menu { 785 | position: relative; 786 | margin-top: 50px; 787 | border-top: 2px solid #999; 788 | border-bottom: 1px solid #dddddd; 789 | } 790 | #menu .menuTop { 791 | background: #F7F7F7; 792 | padding-left: 8px; 793 | height: 50px; 794 | line-height: 50px; 795 | } 796 | 797 | #menu .menu-child { 798 | width: 100%; 799 | } 800 | 801 | #menu .menu-child h3 { 802 | position: relative; 803 | padding: 0 6px 0 36px; 804 | height: 50px; 805 | line-height: 50px; 806 | border: 1px solid #dddddd; 807 | cursor: pointer; 808 | font-weight: normal; 809 | } 810 | 811 | #menu .menu-child h3 span { 812 | display: block; 813 | position: absolute; 814 | top: 15px; 815 | left: 10px; 816 | width: 16px; 817 | height: 16px; 818 | } 819 | 820 | #menu .menu-child h3 span.bg1 { 821 | background: #999; 822 | background-position: -42px -28px; 823 | } 824 | 825 | #menu .menu-child h3 span.bg2 { 826 | background: #dddddd; 827 | background-position: -59px -28px; 828 | } 829 | #menu .menu-child .menu-child-body{ 830 | overflow: hidden; 831 | border: 1px solid #dddddd; 832 | border-top:none ; 833 | height: 100px; 834 | display: none; 835 | padding: 10px 10px 30px 36px; 836 | } 837 | #menu .menu-child .select{ 838 | display: block; 839 | } 840 | #menu .menu-child .menu-child-body p{ 841 | font-size: 14px; 842 | } 843 | /*工作经历区域结束*/ 844 | 845 | /*自我评价区域开始*/ 846 | #evaluation{ 847 | position: relative; 848 | top: 50px; 849 | width: 100%; 850 | height: 300px; 851 | background: #1f1f1f; 852 | } 853 | #evaluation .middle{ 854 | width: 1230px; 855 | height: 280px; 856 | position: relative; 857 | } 858 | #evaluation .middle li { 859 | width: 390px; 860 | height: 200px; 861 | color: #FFF; 862 | float: left; 863 | margin-top: 50px; 864 | margin-right: 18px; 865 | } 866 | #evaluation .middle li div{ 867 | position: relative; 868 | top: 20px; 869 | } 870 | #evaluation .middle li a{ 871 | display: block; 872 | margin-bottom: 10px; 873 | color: #CCC; 874 | cursor: pointer; 875 | text-align:justify; 876 | } 877 | #evaluation .middle li a:hover{ 878 | color: #E58994; 879 | } 880 | /*自我评价区域结束*/ 881 | 882 | 883 | 884 | /*默认的全局使用样式*/ 885 | a{ 886 | text-decoration: none; 887 | color: #000; 888 | } 889 | .clear{ 890 | clear: both; 891 | } 892 | .introduces{ 893 | font-size: 12px; 894 | color: #999999; 895 | } 896 | /*下面是商品详情页的附加字样式*/ 897 | .blue-font{ 898 | font-size: 12px; 899 | color: #6388cc; 900 | position: relative; 901 | cursor: pointer; 902 | } 903 | .blue-font a{ 904 | width: 12px; 905 | text-align: center; 906 | height: 12px; 907 | line-height: 12px; 908 | display: block; 909 | background: #6388cc; 910 | color: #FFF; 911 | font-size: 10px; 912 | position: absolute; 913 | top: 2px; 914 | left: 58px; 915 | } 916 | .little-font{ 917 | font-size: 12px; 918 | } 919 | .right-right{ 920 | position: absolute; 921 | top: 0; 922 | left: 54px; 923 | width: 600px; 924 | } 925 | /*兼容的居中布局*/ 926 | .middle{ 927 | position: relative; 928 | width: 1210px; 929 | left: 50%; 930 | margin-left: -605px; 931 | } 932 | /*兼容60px的标示*/ 933 | .middle-clear-flag{ 934 | position:relative; 935 | width: 1210px; 936 | height: 60px; 937 | border: 1px solid red; 938 | } 939 | .title-flag{ 940 | width: 1210px; 941 | height: 72px; 942 | text-align: center; 943 | line-height: 72px; 944 | position: relative; 945 | left: 50%; 946 | margin-left: -605px; 947 | background: #3c3c3c; 948 | color: #FFF; 949 | font-size: 30px; 950 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 我用原生JS写的一套电子商务风格的WEB前端简历，兼容到了IE56789，使用了优雅降级,按需加载等方案；分享给大家，欢迎star！ 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 22 |
23 | 43 |
44 | 45 | 46 | 47 |
48 |
49 |
    50 |
    • 51 |
    • 52 |
    • 53 |
    • 54 |
    • 55 |
56 |
    57 |
  • 58 | 59 | 63 |
    • 64 |
  • 我的图片第2张
    • 65 |
  • 我的图片第3张
    • 66 |
  • 我的图片第4张
    • 67 |
  • 我的图片第5张
    • 68 |
69 |
70 |
71 |
72 |

WEB前端开发 JavaScript基础扎实 有nodejs开发经验 / 平面设计经验 / 电子商务运营经验

73 | 目标公司类型：电子商务型公司（平台型或第三方服务商） 或者 可以加速提高英语口语和阅读能力的公司 74 |
75 |
76 |

价格

77 |
¥12000.00
78 |
79 | /每月租金 80 | ? 81 |
82 |
此费用为商品的每月租金,使用时请按时续费。
83 |
84 |

商品所在地

85 |

上海市 · 浦东新区

86 |
87 |
88 |
89 |
90 |

配送

91 |
92 |
上海
93 |
至
94 |
95 | 96 | 97 | 98 |
99 |
有货
100 |
101 | /配送时间 102 | ? 103 |
约定时间发货，如有意外，会提前通知
104 |
105 |
106 |
107 |
108 | 运费 109 |
免运费　(上海以外地区不发货)
110 |
111 |
112 |
113 |
114 |

属性

115 |

WEB前端开发

116 |
117 |
118 |

数量

119 |
120 | - 121 | 1 122 | + 123 |
124 |
125 |
126 |

备注

127 |

促销商品，仅一件，多拍不发货！

128 |
129 |
130 |
131 |
132 | 立即购买 133 |
134 |
135 | 136 |
137 | 138 | 139 | 140 |
141 | 个人简介 142 | 技能总结 143 | 前端演示 144 | 工作经历 145 |
146 |
147 | 朱安邦 148 | WEB前端开发 149 |
150 |
151 |

¥

152 |

12000

153 |
154 |
155 |
156 | 立即购买 157 |
158 |
159 | 160 | 161 | 162 |
163 |
164 | 我是一名程序员 165 | 信息介绍 166 |
    167 |
  • 168 |
    169 |

    朱安邦 / 男 / 1990年

    170 |
    • 171 |
  • 172 |
    173 |

    上海市浦东新区（目前所在地）

    174 |
    • 175 |
  • 176 |
    177 |

    普招大专 / 学信号：1306 0120 1106 0008 22

    178 |
    • 179 |
  • 180 |
    181 |

    2010年6月参加工作

    182 |
    • 183 |
  • 184 |
    185 |

    已婚

    186 |
    • 187 |
188 | 189 | 190 |
191 |
192 |

技能树/工具

193 |
    194 |
  • 11
    • 195 |
    • 196 |
    • 197 |
    • 198 |
    • 199 |
    • 200 |
    • 201 |
    • 202 |
    • 203 |
204 |
205 |
206 | 207 | 208 |
209 |
210 |
211 |
212 |

个人总结

213 |
    214 |
  • 掌握html，手写符合w3c标准的代码；用div+CSS布局常见页面，高度还原设计搞；
    • 215 |
  • 熟练处理IE6+及chrome浏览器的兼容性问题，CSS和JS代码可兼容至IE6；
    • 216 |
  • 熟练掌握JS继承模式的原理以及JS面向对象中的继承，封装，单例模式，工厂模式，原型模式；
    • 217 |
  • 有个人开发JS类库的经验；曾封装过DOM库，动画库，事件库，AJAX库；
    • 218 |
  • 掌握模块化开发的思路和原理，提高代码的复用性，可针对项目实际进行模块化开发，具备工程化的思维和实践经验；
    • 219 |
  • JS基础扎实，掌握常用的插件以提高工作效率；可用原生JS封装针对特定逻辑的类库；不借助第三方类库和框架可进行项目开发；
    • 220 |
  • 熟练使用jQuery；研读过jQuery源码，不仅熟悉jQuery的使用，而且知道代码背后的逻辑和原理；
    • 221 |
  • 有使用AJAX技术与后台数据交互的经验，，根据接口文档和后台进行交互；
    • 222 |
  • 熟悉HTTP协议,了解浏览器和服务器交互机制
    • 223 |
  • 对Web前端技术有浓厚的兴趣，善用搜索引擎，较强的自学能力和对新技术的追求精神，乐于分享；
    • 224 |
  • 熟悉网站性能优化，优化Web加载、执行和渲染时间；
    • 225 |
  • 有AngulaJs开发单页应用经验；
    • 226 |
  • 有使用HTML5+CSS3进行移动端WEB页面的开发经验和案例；
    • 227 |
  • 使用git工具进行团队合作,使用npm，bower包管理工具
    • 228 |
229 |
230 |
231 |

其它技能

232 |
    233 |
  • 234 |

    Node开发

    235 | 有运用Node.js开发项目的实战经验；(NodeJs是通过在QQ课堂报在线培训班学习的，项目是根据老师的讲义写出来的) 236 |
    • 237 |
  • 238 |

    平面设计

    239 | 对平面设计和网页设计有很深的理解，有日常工作中需要的设计能力，可以与设计师愉快的的玩耍和技术交流 240 |
    • 241 |
  • 242 |

    运营方面

    243 | 业务员/电商行业出身；发表的运营文章曾被多家网站转载；2012年底-2016年在电商行业创业，负责公司业务运营 244 |
    • 245 |
246 |
247 |
248 |
249 | 250 | 251 | 252 |
253 |
254 |
前端作品演示
255 | 407 |
NodeJS作品
408 | 460 |
平面设计作品
461 | 513 |
电商运营的文章
514 | 566 |
567 | 568 | 569 | 570 | 601 | 602 | 603 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | -------------------------------------------------------------------------------- /0备份存档/V0.01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 我用原生JS写的一套电子商务风格的WEB前端简历，兼容到了IE56789，使用了优雅降级,按需加载等方案；分享给大家，欢迎star！ 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 22 |
23 | 43 |
44 | 45 | 46 | 47 |
48 |
49 |
    50 |
    • 51 |
    • 52 |
    • 53 |
    • 54 |
    • 55 |
56 |
    57 |
  • 58 | 59 | 63 |
    • 64 |
  • 我的图片第2张
    • 65 |
  • 我的图片第3张
    • 66 |
  • 我的图片第4张
    • 67 |
  • 我的图片第5张
    • 68 |
69 |
70 |
71 |
72 |

WEB前端开发 JavaScript基础扎实 有nodejs开发经验 / 平面设计经验 / 电子商务运营经验

73 | 目标公司类型：电子商务型公司（平台型或第三方服务商） 或者 可以加速提高英语口语和阅读能力的公司 74 |
75 |
76 |

价格

77 |
¥12000.00
78 |
79 | /每月租金 80 | ? 81 |
82 |
此费用为商品的每月租金,使用时请按时续费。
83 |
84 |

商品所在地

85 |

上海市 · 浦东新区

86 |
87 |
88 |
89 |
90 |

配送

91 |
92 |
上海
93 |
至
94 |
95 | 96 | 97 | 98 |
99 |
有货
100 |
101 | /配送时间 102 | ? 103 |
约定时间发货，如有意外，会提前通知
104 |
105 |
106 |
107 |
108 | 运费 109 |
免运费　(上海以外地区不发货)
110 |
111 |
112 |
113 |
114 |

属性

115 |

WEB前端开发

116 |
117 |
118 |

数量

119 |
120 | - 121 | 1 122 | + 123 |
124 |
125 |
126 |

备注

127 |

促销商品，仅一件，多拍不发货！

128 |
129 |
130 |
131 |
132 | 立即购买 133 |
134 |
135 | 136 |
137 | 138 | 139 | 140 |
141 | 个人简介 142 | 技能总结 143 | 前端演示 144 | 工作经历 145 |
146 |
147 | 朱安邦 148 | WEB前端开发 149 |
150 |
151 |

¥

152 |

12000

153 |
154 |
155 |
156 | 立即购买 157 |
158 |
159 | 160 | 161 | 162 |
163 |
164 | 我是一名程序员 165 | 信息介绍 166 |
    167 |
  • 168 |
    169 |

    朱安邦 / 男 / 1990年

    170 |
    • 171 |
  • 172 |
    173 |

    上海市浦东新区（目前所在地）

    174 |
    • 175 |
  • 176 |
    177 |

    普招大专 / 学信号：1306 0120 1106 0008 22

    178 |
    • 179 |
  • 180 |
    181 |

    2010年6月参加工作

    182 |
    • 183 |
  • 184 |
    185 |

    已婚

    186 |
    • 187 |
188 | 189 | 190 |
191 |
192 |

技能树/工具

193 |
    194 |
  • 11
    • 195 |
    • 196 |
    • 197 |
    • 198 |
    • 199 |
    • 200 |
    • 201 |
    • 202 |
    • 203 |
204 |
205 |
206 | 207 | 208 |
209 |
210 |
211 |
212 |

个人总结

213 |
    214 |
  • 掌握html，手写符合w3c标准的代码；用div+CSS布局常见页面，高度还原设计搞；
    • 215 |
  • 熟练处理IE6+及chrome浏览器的兼容性问题，CSS和JS代码可兼容至IE6；
    • 216 |
  • 熟练掌握JS继承模式的原理以及JS面向对象中的继承，封装，单例模式，工厂模式，原型模式；
    • 217 |
  • 有个人开发JS类库的经验；曾封装过DOM库，动画库，事件库，AJAX库；
    • 218 |
  • 掌握模块化开发的思路和原理，提高代码的复用性，可针对项目实际进行模块化开发，具备工程化的思维和实践经验；
    • 219 |
  • JS基础扎实，掌握常用的插件以提高工作效率；可用原生JS封装针对特定逻辑的类库；不借助第三方类库和框架可进行项目开发；
    • 220 |
  • 熟练使用jQuery；研读过jQuery源码，不仅熟悉jQuery的使用，而且知道代码背后的逻辑和原理；
    • 221 |
  • 有使用AJAX技术与后台数据交互的经验，，根据接口文档和后台进行交互；
    • 222 |
  • 熟悉HTTP协议,了解浏览器和服务器交互机制
    • 223 |
  • 对Web前端技术有浓厚的兴趣，善用搜索引擎，较强的自学能力和对新技术的追求精神，乐于分享；
    • 224 |
  • 熟悉网站性能优化，优化Web加载、执行和渲染时间；
    • 225 |
  • 有AngulaJs开发单页应用经验；
    • 226 |
  • 有使用HTML5+CSS3进行移动端WEB页面的开发经验和案例；
    • 227 |
  • 使用git工具进行团队合作,使用npm，bower包管理工具
    • 228 |
229 |
230 |
231 |

其它技能

232 |
    233 |
  • 234 |

    Node开发

    235 | 有运用Node.js开发项目的实战经验；(NodeJs是通过在QQ课堂报在线培训班学习的，项目是根据老师的讲义写出来的) 236 |
    • 237 |
  • 238 |

    平面设计

    239 | 对平面设计和网页设计有很深的理解，有日常工作中需要的设计能力，可以与设计师愉快的的玩耍和技术交流 240 |
    • 241 |
  • 242 |

    运营方面

    243 | 业务员/电商行业出身；发表的运营文章曾被多家网站转载；2012年底-2016年在电商行业创业，负责公司业务运营 244 |
    • 245 |
246 |
247 |
248 |
249 | 250 | 251 | 252 |
253 |
254 |
前端作品演示
255 | 407 |
NodeJS作品
408 | 460 |
平面设计作品
461 | 513 |
电商运营的文章
514 | 566 |
567 | 568 | 569 | 570 | 601 | 602 | 603 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | --------------------------------------------------------------------------------