├── 2侧边栏 ├── images │ └── mini.png ├── font │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.css ├── js │ ├── left-side-menu.js │ └── jquery.slimscroll.min.js ├── css │ └── left-side-menu.css └── 侧边栏.html ├── 4拖动滑块拼图验证 ├── img │ ├── 111.jpg │ ├── 222.jpg │ ├── 333.jpg │ └── 444.jpg ├── 拖动滑块拼图验证.html ├── css │ └── img_smooth_check.css └── js │ └── img_smooth_check.js ├── 5图片转正验证 ├── img │ ├── 111.jpg │ ├── 222.jpg │ ├── 333.jpg │ └── 444.jpg ├── 图片转正验证.html └── js │ └── jqRotateVerify.js ├── 8转盘抽奖 ├── img │ ├── binggan.jpg │ ├── dangao.jpg │ ├── huoguo.jpg │ ├── jianfei.jpg │ ├── latiao.jpg │ ├── naicha.jpg │ ├── paomian.jpg │ ├── bingqilin.jpg │ ├── bg_lottery.png │ ├── bg_lottery_f.png │ ├── btn_lottery.png │ └── icon_point.png ├── 转盘抽奖.html ├── js │ ├── app │ │ └── lottery.js │ └── lib │ │ └── anime.min.js └── css │ └── index.css ├── 3分页按钮样式 ├── images │ ├── page_bg.png │ └── page_bg_hover.png ├── 分页按钮.html ├── css │ └── page.css └── js │ └── jquery.z-pager.js ├── 1商城分类导航 ├── statics │ ├── images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── menu.png │ │ ├── banner01.jpg │ │ ├── banner02.jpg │ │ ├── banner03.jpg │ │ ├── banner_r01.png │ │ └── banner_r02.png │ ├── css │ │ └── style.css │ └── js │ │ └── jquery.SuperSlide.2.1.3.js └── 商城分类导航.html ├── 7数字百分比进度条加载 ├── 数字百分比进度条.html └── css │ └── style.css └── 6loading文字加载特效 ├── css └── style.css └── loading文字加载动画.html /2侧边栏/images/mini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/2侧边栏/images/mini.png -------------------------------------------------------------------------------- /4拖动滑块拼图验证/img/111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/4拖动滑块拼图验证/img/111.jpg -------------------------------------------------------------------------------- /4拖动滑块拼图验证/img/222.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/4拖动滑块拼图验证/img/222.jpg -------------------------------------------------------------------------------- /4拖动滑块拼图验证/img/333.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/4拖动滑块拼图验证/img/333.jpg -------------------------------------------------------------------------------- /4拖动滑块拼图验证/img/444.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/4拖动滑块拼图验证/img/444.jpg -------------------------------------------------------------------------------- /5图片转正验证/img/111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/5图片转正验证/img/111.jpg -------------------------------------------------------------------------------- /5图片转正验证/img/222.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/5图片转正验证/img/222.jpg -------------------------------------------------------------------------------- /5图片转正验证/img/333.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/5图片转正验证/img/333.jpg -------------------------------------------------------------------------------- /5图片转正验证/img/444.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/5图片转正验证/img/444.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/binggan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/binggan.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/dangao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/dangao.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/huoguo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/huoguo.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/jianfei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/jianfei.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/latiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/latiao.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/naicha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/naicha.jpg -------------------------------------------------------------------------------- /8转盘抽奖/img/paomian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/paomian.jpg -------------------------------------------------------------------------------- /2侧边栏/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/2侧边栏/font/iconfont.eot -------------------------------------------------------------------------------- /2侧边栏/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/2侧边栏/font/iconfont.ttf -------------------------------------------------------------------------------- /2侧边栏/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/2侧边栏/font/iconfont.woff -------------------------------------------------------------------------------- /8转盘抽奖/img/bingqilin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/bingqilin.jpg -------------------------------------------------------------------------------- /3分页按钮样式/images/page_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/3分页按钮样式/images/page_bg.png -------------------------------------------------------------------------------- /8转盘抽奖/img/bg_lottery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/bg_lottery.png -------------------------------------------------------------------------------- /8转盘抽奖/img/bg_lottery_f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/bg_lottery_f.png -------------------------------------------------------------------------------- /8转盘抽奖/img/btn_lottery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/btn_lottery.png -------------------------------------------------------------------------------- /8转盘抽奖/img/icon_point.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/8转盘抽奖/img/icon_point.png -------------------------------------------------------------------------------- /1商城分类导航/statics/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/1.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/2.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/3.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/4.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/5.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/6.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/7.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/8.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/9.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/10.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/11.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/12.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/13.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/menu.png -------------------------------------------------------------------------------- /3分页按钮样式/images/page_bg_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/3分页按钮样式/images/page_bg_hover.png -------------------------------------------------------------------------------- /1商城分类导航/statics/images/banner01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/banner01.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/banner02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/banner02.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/banner03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/banner03.jpg -------------------------------------------------------------------------------- /1商城分类导航/statics/images/banner_r01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/banner_r01.png -------------------------------------------------------------------------------- /1商城分类导航/statics/images/banner_r02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanyoki/jquerytexiao/HEAD/1商城分类导航/statics/images/banner_r02.png -------------------------------------------------------------------------------- /3分页按钮样式/分页按钮.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 分页按钮 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /7数字百分比进度条加载/数字百分比进度条.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Loading加载 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

loading

17 |

0%

18 |
19 |
20 |
21 | 22 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /6loading文字加载特效/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | html { 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialiased; 5 | } 6 | 7 | * { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | min-height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | background: #151924; 17 | padding:0; 18 | margin:0; 19 | } 20 | 21 | .loading { 22 | --color: #F5F9FF; 23 | --duration: 2000ms; 24 | font-family: Roboto, Arial; 25 | font-size: 24px; 26 | position: relative; 27 | white-space: nowrap; 28 | user-select: none; 29 | color: var(--color); 30 | } 31 | .loading span { 32 | --x: 0; 33 | --y: 0; 34 | --move-y: 0; 35 | --move-y-s: 0; 36 | --delay: 0ms; 37 | display: block; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 1px; 42 | text-indent: calc(var(--x) * -1); 43 | overflow: hidden; 44 | transform: translate(var(--x), var(--y)); 45 | } 46 | .loading.start div { 47 | opacity: 0; 48 | } 49 | .loading.start span { 50 | animation: move var(--duration) ease-in-out var(--delay); 51 | } 52 | 53 | @keyframes move { 54 | 30% { 55 | transform: translate(var(--x), var(--move-y)); 56 | } 57 | 82% { 58 | transform: translate(var(--x), var(--move-y-s)); 59 | } 60 | } -------------------------------------------------------------------------------- /5图片转正验证/图片转正验证.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery拖动滑块图片转正验证代码 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 |
23 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /7数字百分比进度条加载/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100); 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | } 7 | 8 | h1, p, h2, h3, h4, ul, li, div { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | body { 14 | padding: 0; 15 | width: 100vw; 16 | height: 100vh; 17 | overflow: hidden; 18 | display: -webkit-box; 19 | display: flex; 20 | font-family: Roboto; 21 | } 22 | 23 | .loading-page { 24 | background: #0d0d0d; 25 | width: 100vw; 26 | height: 100vh; 27 | display: -webkit-box; 28 | display: flex; 29 | -webkit-box-pack: center; 30 | justify-content: center; 31 | -webkit-box-align: center; 32 | align-items: center; 33 | } 34 | .loading-page .counter { 35 | text-align: center; 36 | } 37 | .loading-page .counter p { 38 | font-size: 40px; 39 | font-weight: 100; 40 | color: #f60d54; 41 | } 42 | .loading-page .counter h1 { 43 | color: white; 44 | font-size: 60px; 45 | margin-top: -10px; 46 | } 47 | .loading-page .counter hr { 48 | background: #f60d54; 49 | border: none; 50 | height: 1px; 51 | } 52 | .loading-page .counter { 53 | position: relative; 54 | width: 200px; 55 | } 56 | .loading-page .counter h1.abs { 57 | position: absolute; 58 | top: 0; 59 | width: 100%; 60 | } 61 | .loading-page .counter .color { 62 | width: 0px; 63 | overflow: hidden; 64 | color: #f60d54; 65 | } -------------------------------------------------------------------------------- /4拖动滑块拼图验证/拖动滑块拼图验证.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery图片拼图验证 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 |
点击刷新
35 | 36 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /6loading文字加载特效/loading文字加载动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery+CSS3 loading文字加载动画特效 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
Loading
14 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /8转盘抽奖/转盘抽奖.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 转盘抽奖 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 泡面 18 | 19 | 20 | 辣条 21 | 22 | 23 | 饼干 24 | 25 | 26 | 火锅 27 | 28 | 29 | 减肥 30 | 31 | 32 | 蛋糕 33 | 34 | 35 | 奶茶 36 | 37 | 38 | 冰淇淋 39 | 40 |
41 | 立即抽奖 42 |
43 | 44 | 45 | 46 | 47 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /4拖动滑块拼图验证/css/img_smooth_check.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0;padding:0; 3 | } 4 | .widgets__img_check_box{ 5 | position:relative; 6 | text-align:center; 7 | } 8 | .widgets__img_display{ 9 | position:relative; 10 | padding:16px 16px 7px; 11 | border:1px solid #ddd; 12 | background:#f2ece1; 13 | border-radius:16px; 14 | overflow:hidden;margin:auto 15 | } 16 | .widgets__img_cnt{ 17 | position:relative; 18 | } 19 | 20 | .widgets__img_src, .widgets__img_fragment_hollow{ 21 | position:absolute; 22 | left:0px; 23 | top:0px; 24 | z-index:10; 25 | } 26 | .widgets__img_src{ 27 | position:relative; 28 | box-shadow: 0px 0px 6px 0px #73706e; 29 | } 30 | .widgets__img_fragment_cnt{ 31 | top:0px; 32 | left:-50px; 33 | position:absolute; 34 | } 35 | .widgets__img_fragment_cnt .widgets__img_fragment_content 36 | , .widgets__img_fragment_cnt .widgets__img_fragment{ 37 | position:absolute; 38 | z-index:20; 39 | } 40 | .widgets__smooth_cnt{ 41 | position:relative; 42 | background-color:aqua; 43 | height:50px; 44 | width:80%; 45 | margin:auto; 46 | margin-top:20px; 47 | border-left:20px solid #f2ece1; 48 | border-right:20px solid #f2ece1; 49 | border-radius:24px; 50 | background-color:#f2ece1; 51 | } 52 | .widgets__smooth_bar,.widgets__smooth_circle{ 53 | position:relative; 54 | top:50%; 55 | transform:translateY(-50%); 56 | } 57 | .widgets__smooth_bar{ 58 | width:100%; 59 | height:10px; 60 | background-color:#f27171; 61 | border-radius:24px; 62 | } 63 | .widgets__smooth_circle{ 64 | position:absolute; 65 | width:30px; 66 | height:30px; 67 | background-color:#827878; 68 | border-radius:50%; 69 | box-shadow:0px 0px 6px 0px #73706e; 70 | cursor:pointer; 71 | } 72 | 73 | .widgets__icon_refresh{ 74 | display:block; 75 | position:relative; 76 | width:16px; 77 | height:16px; 78 | padding:2px; 79 | border: 4px solid transparent; 80 | cursor:pointer; 81 | } 82 | 83 | .widgets__icon_refresh:before{ 84 | position:absolute; 85 | content:""; 86 | display:block; 87 | width:calc(100% - 4px); 88 | height:calc(100% - 4px); 89 | border-radius:100%; 90 | border:2px solid #b7b7b7; 91 | border-top:2px solid transparent; 92 | -webkit-transform: rotate(45deg); 93 | } 94 | .widgets__icon_refresh:after{ 95 | position:absolute; 96 | content:""; 97 | display:block; 98 | border: 7px solid transparent; 99 | border-left: 7px solid #b7b7b7; 100 | left:50%; 101 | top:-3.5px; 102 | } -------------------------------------------------------------------------------- /8转盘抽奖/js/app/lottery.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 4 | 5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 6 | 7 | var aniLottery = anime({ 8 | targets: '.lottery-wrap' 9 | }); 10 | 11 | var Turntable = (function () { 12 | function Turntable(opts) { 13 | _classCallCheck(this, Turntable); 14 | 15 | this.opts = $.extend(true, { 16 | target: '.lottery-wrap', // 旋转对象 17 | easing: 'easeInOutSine', // anime.js 动画曲线 18 | isplay: false, // 动画是否在播放 19 | duration: 3000, // 动画时长 20 | rotateNum: 5, // 旋转圈数 21 | total: 8, // 奖励个数 22 | offset: 0 }, // 旋转偏移值 23 | opts); 24 | 25 | this.opts.angle = 360 / this.opts.total; // 旋转角度 26 | } 27 | 28 | _createClass(Turntable, [{ 29 | key: 'start', 30 | value: function start(index, cb) { 31 | this.opts.isplay = true; 32 | 33 | var self = this, 34 | opt = this.opts, 35 | angle = opt.angle, 36 | off = (opt.total - index) * angle - angle / 2 - opt.offset; 37 | 38 | aniLottery = anime({ 39 | targets: this.opts.target, 40 | easing: this.opts.easing, 41 | autoplay: false, 42 | duration: this.opts.duration, 43 | rotate: opt.rotateNum * 360 + off, 44 | complete: function complete() { 45 | $(self.opts.target).css({ 46 | '-webkit-transform': 'rotate(' + off + 'deg)', 47 | 'transform': 'rotate(' + off + 'deg)' 48 | }); 49 | self.stop(); 50 | cb && cb(index); 51 | } 52 | }); 53 | aniLottery.restart(); 54 | } 55 | }, { 56 | key: 'stop', 57 | value: function stop() { 58 | this.opts.isplay = false; 59 | aniLottery.pause(); 60 | } 61 | }], [{ 62 | key: 'create', 63 | value: function create(opts) { 64 | return new Turntable(opts); 65 | } 66 | }]); 67 | 68 | return Turntable; 69 | })(); -------------------------------------------------------------------------------- /3分页按钮样式/css/page.css: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | clear: both; 3 | } 4 | .clearfix:after { 5 | clear: both; 6 | content: ""; 7 | display: block; 8 | height: 0; 9 | visibility: hidden; 10 | } 11 | .fl { 12 | float: left; 13 | } 14 | 15 | .fr { 16 | float: right; 17 | } 18 | 19 | .pager { 20 | max-width: 800px; 21 | text-align: center; 22 | margin-bottom: 30px; 23 | display: inline-block; 24 | } 25 | 26 | .pager a { 27 | cursor: pointer; 28 | } 29 | 30 | .pager a, 31 | .pager span { 32 | /* 按钮内数字 */ 33 | width: 45px; 34 | height: 40px; 35 | border: 1px solid #EBEBEB; 36 | margin-left: -1px; 37 | color: #8a8a8a; 38 | display: inline-block; 39 | line-height: 40px; 40 | float: left; 41 | font-size: 15px; 42 | text-decoration: none; 43 | margin: 0 2px; 44 | border-radius: 6px; 45 | } 46 | .pager a:hover, 47 | .pager span:hover { 48 | border-color: #3897cd; 49 | color: #3897cd; 50 | position: relative; 51 | z-index: 1; 52 | } 53 | 54 | .pager span.current { 55 | background-color: #222A35; 56 | color: #fff; 57 | border-color: #EBEBEB; 58 | position: relative; 59 | z-index: 1; 60 | } 61 | 62 | .pager .pg-first, 63 | .pager .pg-prev, 64 | .pager .pg-next, 65 | .pager .pg-last { 66 | background: url(../images/page_bg.png) 8px 7px no-repeat; 67 | } 68 | 69 | .pager .pg-first:hover, 70 | .pager .pg-prev:hover, 71 | .pager .pg-next:hover, 72 | .pager .pg-last:hover { 73 | background: url(../images/page_bg_hover.png) 8px 7px no-repeat; 74 | } 75 | 76 | .pager .pg-prev, 77 | .pager .pg-prev:hover { 78 | background-position: 7px -21px; 79 | } 80 | 81 | .pager .pg-next, 82 | .pager .pg-next:hover { 83 | background-position: -21px -21px; 84 | } 85 | 86 | .pager .pg-last, 87 | .pager .pg-last:hover { 88 | background-position: -21px 7px; 89 | } 90 | 91 | .pager .pg-prev[disabled='true'], 92 | .pager .pg-prev[disabled='true']:hover { 93 | cursor: default; 94 | background-image: url(../images/page_bg.png); 95 | } 96 | 97 | .pager .pg-next[disabled='true'], 98 | .pager .pg-next[disabled='true']:hover { 99 | cursor: default; 100 | background-image: url(../images/page_bg.png); 101 | } 102 | 103 | .pager .pg-prev[disabled='true'], 104 | .pager .pg-next[disabled='true'] { 105 | border-color: #eeeeee; 106 | } 107 | 108 | .pager span.els { 109 | border-color: transparent; 110 | } 111 | 112 | .pagerHtmlWrap { 113 | width: 800px; 114 | margin: 30px auto; 115 | } 116 | 117 | .pagerHtmlWrap .cc_cells { 118 | width: 100%; 119 | height: 35px; 120 | padding: 5px 0; 121 | border-bottom: 1px #cccccc solid; 122 | } 123 | 124 | .pagerHtmlWrap .cc_cells a { 125 | color: #454545; 126 | font-size: 14px; 127 | line-height: 35px; 128 | text-decoration: none; 129 | } 130 | 131 | .pagerHtmlWrap .cc_cells a span { 132 | display: inline-block; 133 | width: 25%; 134 | text-align: left; 135 | margin: 0; 136 | } 137 | 138 | 139 | -------------------------------------------------------------------------------- /2侧边栏/js/left-side-menu.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('.lsm-scroll').slimscroll({ 3 | height: 'auto', 4 | position: 'right', 5 | railOpacity: 1, 6 | size: "5px", 7 | opacity: .4, 8 | color: '#fffafa', 9 | wheelStep: 5, 10 | touchScrollStep: 50 11 | }); 12 | $('.lsm-container ul ul').css("display", "none"); 13 | // lsm-sidebar收缩展开 14 | $('.lsm-sidebar a').on('click',function(){ 15 | $('.lsm-scroll').slimscroll({ 16 | height: 'auto', 17 | position: 'right', 18 | size: "8px", 19 | color: '#9ea5ab', 20 | wheelStep: 5, 21 | touchScrollStep: 50 22 | }); 23 | if (!$('.left-side-menu').hasClass('lsm-mini')) { 24 | $(this).parent("li").siblings("li.lsm-sidebar-item").children('ul').slideUp(200); 25 | if ($(this).next().css('display') == "none") { 26 | //展开未展开 27 | // $('.lsm-sidebar-item').children('ul').slideUp(300); 28 | $(this).next('ul').slideDown(200); 29 | $(this).parent('li').addClass('lsm-sidebar-show').siblings('li').removeClass('lsm-sidebar-show'); 30 | }else{ 31 | //收缩已展开 32 | $(this).next('ul').slideUp(200); 33 | //$('.lsm-sidebar-item.lsm-sidebar-show').removeClass('lsm-sidebar-show'); 34 | $(this).parent('li').removeClass('lsm-sidebar-show'); 35 | } 36 | } 37 | }); 38 | //lsm-mini 39 | $('.lsm-mini-btn svg').on('click',function(){ 40 | if ($('.lsm-mini-btn input[type="checkbox"]').prop("checked")) { 41 | $('.lsm-sidebar-item.lsm-sidebar-show').removeClass('lsm-sidebar-show'); 42 | $('.lsm-container ul').removeAttr('style'); 43 | $('.left-side-menu').addClass('lsm-mini'); 44 | $('.left-side-menu').stop().animate({width : 60},200); 45 | }else{ 46 | $('.left-side-menu').removeClass('lsm-mini'); 47 | $('.lsm-container ul ul').css("display", "none"); 48 | $('.left-side-menu').stop().animate({width: 240},200); 49 | } 50 | 51 | }); 52 | 53 | $(document).on('mouseover','.lsm-mini .lsm-container ul:first>li',function(){ 54 | $(".lsm-popup.third").hide(); 55 | $(".lsm-popup.second").length == 0 && ($(".lsm-container").append("
")); 56 | $(".lsm-popup.second>div").html($(this).html()); 57 | $(".lsm-popup.second").show(); 58 | $(".lsm-popup.third").hide(); 59 | var top = $(this).offset().top; 60 | var d = $(window).height() - $(".lsm-popup.second>div").height(); 61 | if(d - top <= 0 ){ 62 | top = d >= 0 ? d - 8 : 0; 63 | } 64 | $(".lsm-popup.second").stop().animate({"top":top}, 100); 65 | }); 66 | 67 | $(document).on('mouseover','.second.lsm-popup.lsm-sidebar > div > ul > li',function(){ 68 | if(!$(this).hasClass("lsm-sidebar-item")){ 69 | $(".lsm-popup.third").hide(); 70 | return; 71 | } 72 | $(".lsm-popup.third").length == 0 && ($(".lsm-container").append("
")); 73 | $(".lsm-popup.third>div").html($(this).html()); 74 | $(".lsm-popup.third").show(); 75 | var top = $(this).offset().top; 76 | var d = $(window).height() - $(".lsm-popup.third").height(); 77 | if(d - top <= 0 ){ 78 | top = d >= 0 ? d - 8 : 0; 79 | } 80 | $(".lsm-popup.third").stop().animate({"top":top}, 100); 81 | }); 82 | 83 | $(document).on('mouseleave','.lsm-mini .lsm-container ul:first, .lsm-mini .slimScrollBar,.second.lsm-popup ,.third.lsm-popup',function(){ 84 | $(".lsm-popup.second").hide(); 85 | $(".lsm-popup.third").hide(); 86 | }); 87 | 88 | $(document).on('mouseover','.lsm-mini .slimScrollBar,.second.lsm-popup',function(){ 89 | $(".lsm-popup.second").show(); 90 | }); 91 | $(document).on('mouseover','.third.lsm-popup',function(){ 92 | $(".lsm-popup.second").show(); 93 | $(".lsm-popup.third").show(); 94 | }); 95 | }); 96 | -------------------------------------------------------------------------------- /2侧边栏/js/jquery.slimscroll.min.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2011 Piotr Rochala (http://rocha.la) 2 | * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 3 | * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 4 | * 5 | * Version: 1.3.8 6 | * 7 | */ 8 | (function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event; 9 | var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0=b.outerHeight()?k=!0:(c.stop(!0, 11 | !0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height", 12 | h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("
").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden", 13 | width:a.width,height:a.height});var m=e("
").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("
").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius, 14 | WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll", 15 | function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)}); 16 | x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery); -------------------------------------------------------------------------------- /2侧边栏/css/left-side-menu.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 以下实际使用若已初始化可删除 .lsm-sidebar height父级需逐级设置为100%*/ 3 | body,html{height: 100%;background: #E2E2E2} 4 | body,ul{margin:0;padding:0} 5 | body{font:14px "微软雅黑","宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%;} 6 | li{list-style:none} 7 | a{text-decoration:none;} 8 | /* 以上实际使用若已初始化可删除 */ 9 | 10 | /* lsm-sidebar */ 11 | .left-side-menu,.lsm-popup.lsm-sidebar ul li, .lsm-container.lsm-mini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul{ 12 | background: #3b3e47; 13 | } 14 | 15 | 16 | .left-side-menu {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; } 17 | .left-side-menu{height: calc(100% - 80px);width: 220px;} 18 | .lsm-expand-btn{height: 65px;} 19 | .lsm-container {height: calc(100% - 65px); transition: all .3s;z-index: 100} 20 | 21 | .lsm-container li>a.active{ background: #c55b03; color: #fff; } 22 | 23 | 24 | .lsm-sidebar a{display: block;overflow: hidden;padding-left: 20px;line-height: 40px;max-height: 40px;color: #b2b8be;transition: all .3s;} 25 | .lsm-container ul:first-child > li> a, .lsm-container ul:first-child > li> a span{ line-height: 55px;max-height: 55px; } 26 | .lsm-sidebar a span{margin-left: 30px;} 27 | .lsm-sidebar .lsm-sidebar-item .lsm-sidebar-item >ul>li a span{margin-left: 60px;} 28 | .lsm-sidebar-item{position: relative;} 29 | .lsm-sidebar-item.lsm-sidebar-show{border-bottom: none;} 30 | .lsm-sidebar-item ul{display: none;background: rgba(0,0,0,.1);} 31 | .lsm-sidebar-item.lsm-sidebar-show ul{display: block;} 32 | .lsm-sidebar-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 40px;background: #34A0CE;opacity:0;transition: all .3s;} 33 | .lsm-container ul:first-child>li.lsm-sidebar-item>a:before{height: 55px;} 34 | .lsm-sidebar .lsm-sidebar-icon{font-size: 20px;position: absolute;margin-left:-1px;} 35 | /* 此处修改导航图标 可自定义iconfont 替换*/ 36 | .icon_1::after{content: "\e62b";} 37 | .icon_2::after{content: "\e669";} 38 | .icon_3::after{content: "\e61d";} 39 | .icon_3::after{content: "\e698";} 40 | 41 | .lsm-sidebar-more{float:right;margin-right: 20px;font-size: 12px;transition: transform .3s;} 42 | 43 | /* 导航右侧箭头 换用其他字体需要替换*/ 44 | .lsm-sidebar-more::after{content: "\e621";} 45 | 46 | 47 | .lsm-sidebar-show > a > i.my-icon.lsm-sidebar-more{transform:rotate(90deg);} 48 | .lsm-sidebar-show,.lsm-sidebar-item>a:hover{color: #FFF;background: rgba(0, 0, 0, 0.2);} 49 | .lsm-sidebar-show>a:before,.lsm-sidebar-item>a:hover:before{opacity:1;} 50 | .lsm-sidebar-item li>a:hover,.lsm-popup>div>ul>li>a:hover{color: #FFF; background: #6e809c;} 51 | .lsm-mini-btn{height: 70px;width: 70px;} 52 | .lsm-mini-btn svg{margin: -10px 0 0 -10px;} 53 | .lsm-mini-btn input[type="checkbox"]{display: none;} 54 | 55 | .lsm-mini-btn path { 56 | fill: none; 57 | stroke: #ffffff; 58 | stroke-width: 3; 59 | stroke-linecap: round; 60 | stroke-linejoin: round; 61 | --length: 24; 62 | --offset: -38; 63 | stroke-dasharray: var(--length) var(--total-length); 64 | stroke-dashoffset: var(--offset); 65 | transition: all .8s cubic-bezier(.645, .045, .355, 1); 66 | } 67 | 68 | .lsm-mini-btn circle {fill: #fff3;opacity: 0;} 69 | .lsm-mini-btn label {top: 0; right: 0;} 70 | .lsm-mini-btn label:hover circle {opacity: 1;} 71 | .lsm-mini-btn input:checked+svg .line--1, .lsm-mini-btn input:checked+svg .line--3 {--length: 8.602325267;} 72 | .lsm-mini-btn .line--1, .lsm-mini-btn .line--3 {--total-length: 126.38166809082031;} 73 | .lsm-mini-btn .line--2 {--total-length: 80;} 74 | .lsm-mini-btn input:checked+svg .line--1, .lsm-mini-btn input:checked+svg .line--3 {--offset: -109.1770175568;} 75 | 76 | .lsm-mini .lsm-container, .lsm-mini .lsm-container{width: 60px;} 77 | .lsm-container.lsm-mini .lsm-sidebar .lsm-sidebar-icon{/* margin-left:-2px; */} 78 | .left-side-menu.lsm-mini ul:first-child>li.lsm-sidebar-item>a span{display: none;} 79 | .left-side-menu.lsm-mini ul:first-child>li.lsm-sidebar-item>a> i.lsm-sidebar-more{margin-right: -20px;} 80 | 81 | .lsm-container.lsm-mini .lsm-sidebar>ul>li.lsm-sidebar-item>ul>li.lsm-sidebar-item>ul{ 82 | display:none; 83 | position: absolute;top:0px;left:180px;width: 180px;z-index: 99; 84 | bottom: 0px; 85 | top: 0px; 86 | overflow: hidden; 87 | } 88 | .left-side-menu.lsm-mini ul:first-child > li > ul{ 89 | display: none; 90 | } 91 | .transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 92 | .lsm-popup div{background: #05161f;} 93 | .lsm-popup{ 94 | display: block; 95 | position: absolute; 96 | border: 3px solid rgba(60, 71, 76, 0); 97 | } 98 | 99 | .lsm-popup > div > a > i.my-icon.lsm-sidebar-more{ 100 | transform:rotate(90deg); 101 | } 102 | 103 | .lsm-popup.second{ 104 | left: 60px; 105 | } 106 | .lsm-popup.third{ 107 | left: 243px; 108 | } 109 | .lsm-popup.third.lsm-sidebar > div > ul { 110 | display: block; 111 | } 112 | .lsm-popup div { 113 | border-radius: 5px; 114 | } 115 | .lsm-popup .lsm-sidebar-icon{ 116 | display: none; 117 | } 118 | .lsm-popup.lsm-sidebar a span{ 119 | margin-left: 0px; 120 | } 121 | .lsm-popup.lsm-sidebar > div > ul > li.lsm-sidebar-item>ul{position: absolute;top:0px;left:180px;width: 180px;z-index: 99;} 122 | 123 | .lsm-popup.lsm-sidebar ul { 124 | width: 180px; 125 | } 126 | .lsm-popup.lsm-sidebar ul li{ 127 | width: 180px; 128 | } 129 | .lsm-popup.lsm-sidebar ul li:last-child, .lsm-popup>div>ul>li:last-child>a{ 130 | border-radius: 0 0 5px 5px ; 131 | } 132 | 133 | -------------------------------------------------------------------------------- /8转盘抽奖/css/index.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*.keyframes(Breath,{ 3 | 0% { 4 | .transition(scale(0.8,0.8)); 5 | } 6 | 100% { 7 | .transition(scale(1.1,1.1)); 8 | } 9 | });*/ 10 | /*.animation(Breath 0.8s ease-in-out alternate infinite);*/ 11 | /* CSS Document */ 12 | html, 13 | body, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | div, 21 | dl, 22 | dt, 23 | dd, 24 | ul, 25 | ol, 26 | li, 27 | p, 28 | blockquote, 29 | pre, 30 | hr, 31 | figure, 32 | table, 33 | caption, 34 | th, 35 | td, 36 | form, 37 | fieldset, 38 | legend, 39 | input, 40 | button, 41 | textarea, 42 | menu { 43 | margin: 0; 44 | padding: 0; 45 | } 46 | html, 47 | body, 48 | fieldset, 49 | img, 50 | iframe, 51 | abbr { 52 | border: 0; 53 | } 54 | li { 55 | list-style: none; 56 | } 57 | textarea { 58 | overflow: auto; 59 | resize: none; 60 | } 61 | a, 62 | button { 63 | cursor: pointer; 64 | } 65 | h1, 66 | h2, 67 | h3, 68 | h4, 69 | h5, 70 | h6, 71 | em, 72 | strong, 73 | b { 74 | font-weight: bold; 75 | } 76 | a, 77 | a:hover { 78 | text-decoration: none; 79 | } 80 | body, 81 | html { 82 | width: 100%; 83 | font-weight: normal; 84 | display: -webkit-box; 85 | -webkit-box-align: center; 86 | -webkit-box-orient: horizontal; 87 | } 88 | html { 89 | -ms-text-size-adjust: 100%; 90 | -webkit-text-size-adjust: 100%; 91 | font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif; 92 | } 93 | body { 94 | background: #fff; 95 | opacity: 1; 96 | -webkit-transition: opacity 500ms ease-in; 97 | transition: opacity 500ms ease-in; 98 | } 99 | a { 100 | text-decoration: none; 101 | } 102 | input { 103 | -webkit-appearance: none; 104 | } 105 | * { 106 | outline: none; 107 | -webkit-tap-highlight-color: transparent; 108 | -webkit-touch-callout: none; 109 | -webkit-focus-ring-color: rgba(0, 0, 0, 0); 110 | } 111 | body { 112 | padding: 0; 113 | margin: 0; 114 | background: #000000; 115 | } 116 | html, 117 | body, 118 | fieldset, 119 | img, 120 | iframe, 121 | abbr { 122 | border: 0; 123 | } 124 | li { 125 | list-style: none; 126 | } 127 | textarea { 128 | overflow: auto; 129 | resize: none; 130 | } 131 | a, 132 | button { 133 | cursor: pointer; 134 | } 135 | h1, 136 | h2, 137 | h3, 138 | h4, 139 | h5, 140 | h6, 141 | em, 142 | strong, 143 | b { 144 | font-weight: 700; 145 | } 146 | a, 147 | a:hover { 148 | text-decoration: none; 149 | } 150 | html, 151 | body { 152 | width: 100%; 153 | font-family: 'Microsoft Yahei'; 154 | } 155 | body { 156 | font-family: "Microsoft YaHei", simSun, "Lucida Grande", "Lucida Sans Unicode", Arial; 157 | font-size: 12px; 158 | } 159 | textarea { 160 | font-size: 24px; 161 | } 162 | a { 163 | color: #434343; 164 | } 165 | .commSet { 166 | min-width: 1200px; 167 | max-width: 1920px; 168 | width: 100%; 169 | margin: 0 auto 0; 170 | position: relative; 171 | } 172 | .overflow { 173 | overflow: hidden; 174 | } 175 | .hide { 176 | display: none; 177 | } 178 | .hidetxt { 179 | text-indent: -9999em; 180 | } 181 | html, 182 | body { 183 | min-width: 1200px; 184 | max-width: 1920px; 185 | width: 100%; 186 | margin: 0 auto 0; 187 | position: relative; 188 | } 189 | body { 190 | background-color: #1b1b1b; 191 | } 192 | .hover:hover { 193 | opacity: 0.8; 194 | } 195 | .cont { 196 | position: relative; 197 | width: 1200px; 198 | margin: 0 auto 0; 199 | padding-top: 1px; 200 | } 201 | .box-lottery { 202 | position: relative; 203 | margin: 0 auto 0; 204 | width: 615px; 205 | height: 615px; 206 | background: url('../img/bg_lottery.png') center no-repeat; 207 | } 208 | .lottery-wrap { 209 | position: relative; 210 | width: 100%; 211 | height: 100%; 212 | background: url('../img/bg_lottery_f.png') center no-repeat; 213 | } 214 | .lottery-wrap img { 215 | width: 85px; 216 | height: 70px; 217 | } 218 | .lottery-wrap span { 219 | box-sizing: border-box; 220 | position: absolute; 221 | top: 0; 222 | left: 32.7%; 223 | width: 214px; 224 | height: 50%; 225 | color: #fff; 226 | -webkit-transform-origin: 50% 100%; 227 | -moz-transform-origin: 50% 100%; 228 | -ms-transform-origin: 50% 100%; 229 | transform-origin: 50% 100%; 230 | text-align: center; 231 | } 232 | .lottery-wrap span.lottery-span1 { 233 | -webkit-transform: rotate(22.5deg); 234 | -moz-transform: rotate(22.5deg); 235 | -ms-transform: rotate(22.5deg); 236 | transform: rotate(22.5deg); 237 | } 238 | .lottery-wrap span.lottery-span2 { 239 | -webkit-transform: rotate(67.5deg); 240 | -moz-transform: rotate(67.5deg); 241 | -ms-transform: rotate(67.5deg); 242 | transform: rotate(67.5deg); 243 | } 244 | .lottery-wrap span.lottery-span3 { 245 | -webkit-transform: rotate(112.5deg); 246 | -moz-transform: rotate(112.5deg); 247 | -ms-transform: rotate(112.5deg); 248 | transform: rotate(112.5deg); 249 | } 250 | .lottery-wrap span.lottery-span4 { 251 | -webkit-transform: rotate(157.5deg); 252 | -moz-transform: rotate(157.5deg); 253 | -ms-transform: rotate(157.5deg); 254 | transform: rotate(157.5deg); 255 | } 256 | .lottery-wrap span.lottery-span5 { 257 | -webkit-transform: rotate(202.5deg); 258 | -moz-transform: rotate(202.5deg); 259 | -ms-transform: rotate(202.5deg); 260 | transform: rotate(202.5deg); 261 | } 262 | .lottery-wrap span.lottery-span5 img { 263 | width: 85px; 264 | height: 71px; 265 | } 266 | .lottery-wrap span.lottery-span6 { 267 | -webkit-transform: rotate(247.5deg); 268 | -moz-transform: rotate(247.5deg); 269 | -ms-transform: rotate(247.5deg); 270 | transform: rotate(247.5deg); 271 | } 272 | .lottery-wrap span.lottery-span6 img { 273 | width: 85px; 274 | height: 71px; 275 | } 276 | .lottery-wrap span.lottery-span7 { 277 | -webkit-transform: rotate(292.5deg); 278 | -moz-transform: rotate(292.5deg); 279 | -ms-transform: rotate(292.5deg); 280 | transform: rotate(292.5deg); 281 | } 282 | .lottery-wrap span.lottery-span8 { 283 | -webkit-transform: rotate(337.5deg); 284 | -moz-transform: rotate(337.5deg); 285 | -ms-transform: rotate(337.5deg); 286 | transform: rotate(337.5deg); 287 | } 288 | .lottery-wrap span.lottery-span8 img { 289 | width: 85px; 290 | height: 71px; 291 | } 292 | .lottery-wrap i { 293 | display: block; 294 | width: 100%; 295 | height: 60px; 296 | font-style: normal; 297 | font-size: 22px; 298 | line-height: 32px; 299 | color: #fee1e1; 300 | margin: 48px 0 12px; 301 | } 302 | .lottery-wrap img { 303 | max-width: 100%; 304 | } 305 | .lottery-btn { 306 | position: absolute; 307 | left: 50%; 308 | top: 50%; 309 | text-indent: -999em; 310 | z-index: 11; 311 | -webkit-transform: translate(-50%, -50%); 312 | -moz-transform: translate(-50%, -50%); 313 | -ms-transform: translate(-50%, -50%); 314 | transform: translate(-50%, -50%); 315 | width: 161px; 316 | height: 161px; 317 | } 318 | .lottery-btn i { 319 | position: absolute; 320 | top: -30px; 321 | left: 50%; 322 | margin-left: -20.5px; 323 | width: 41px; 324 | height: 39px; 325 | background: url('../img/icon_point.png') center no-repeat; 326 | -webkit-transform-origin: 50% 102.5px; 327 | -moz-transform-origin: 50% 102.5px; 328 | -ms-transform-origin: 50% 102.5px; 329 | transform-origin: 50% 102.5px; 330 | } 331 | .lottery-btn:after { 332 | content: ''; 333 | position: absolute; 334 | top: 0; 335 | left: 0; 336 | width: 100%; 337 | height: 100%; 338 | background: url('../img/btn_lottery.png') center no-repeat; 339 | } 340 | -------------------------------------------------------------------------------- /1商城分类导航/statics/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | border: 0; 6 | outline: 0; 7 | font-family: '微软雅黑' 8 | } 9 | ul { 10 | list-style: none 11 | } 12 | a { 13 | text-decoration: none; 14 | color: #333 15 | } 16 | a:hover { 17 | color: #e62318!important 18 | } 19 | .clearfix:after { 20 | content: '.'; 21 | display: block; 22 | height: 0; 23 | clear: both; 24 | visibility: hidden 25 | } 26 | .none { 27 | display: none 28 | } 29 | .Left { 30 | float: left 31 | } 32 | .header { 33 | background-color: #fff 34 | } 35 | .header .menu-bar { 36 | height: 36px 37 | } 38 | .view { 39 | width: 1200px; 40 | margin: 0 auto 41 | } 42 | .header .menu-bar .category { 43 | width: 200px; 44 | position: relative; 45 | float: left; 46 | cursor: pointer; 47 | z-index: 100 48 | } 49 | .header .menu-bar .category h2 { 50 | font-weight: 400; 51 | background: #e62318; 52 | height: 36px; 53 | line-height: 36px; 54 | text-align: center; 55 | color: #fff; 56 | font-size: 15px 57 | } 58 | .category-option { 59 | width: 200px; 60 | padding: 9px 0 9px; 61 | background: rgba(75, 74, 74, 0.644); 62 | position: absolute; 63 | z-index: 101; 64 | display: block; 65 | } 66 | .category-option .cat-item { 67 | height: 34px; 68 | line-height: 34px; 69 | vertical-align: top; 70 | transition: .2s ease-in-out 71 | } 72 | .category-option .cat-item .sub-cat { 73 | overflow: hidden; 74 | display: none; 75 | width: 616px; 76 | height: 427px; 77 | padding: 9px 30px 25px 0; 78 | left: 200px; 79 | top: 0; 80 | background: rgba(255,255,255,.95); 81 | z-index: 10000; 82 | position: absolute; 83 | line-height: 20px 84 | } 85 | .category-option .cat-item.top-cat .sub-cat { 86 | width: 750px 87 | } 88 | .category-option .top-cat .sub-cat .sub-cat-links { 89 | width: 544px 90 | } 91 | .category-option .sub-cat .sub-cat-links .sub-group { 92 | padding-top: 16px 93 | } 94 | .category-option .sub-cat .sub-cat-links .sub-title { 95 | width: 93px; 96 | font-size: 13px; 97 | font-weight: 700 98 | } 99 | .category-option .sub-cat .sub-cat-links .sub-title .i-t { 100 | overflow: hidden; 101 | width: 5px; 102 | height: 5px; 103 | float: left; 104 | background: url(../images/menu.png) -285px 0 no-repeat; 105 | margin: 8px 4px 0 10px 106 | } 107 | .category-option .sub-cat .sub-cat-links .sub-content { 108 | font-size: 12px; 109 | width: 299px; 110 | padding-bottom: 16px; 111 | border-bottom: 1px dotted #afacb1 112 | } 113 | .category-option .cat-item.top-cat .sub-cat .sub-cat-links .sub-content { 114 | width: 433px 115 | } 116 | .category-option .sub-cat .sub-cat-links .sub-content a { 117 | margin-right: 16px; 118 | display: inline-block; 119 | color: #666 120 | } 121 | .category-option .sub-cat .sub-cat-brand { 122 | width: 190px; 123 | padding-left: 16px 124 | } 125 | .category-option .sub-cat .sub-cat-brand h6 { 126 | font-size: 14px; 127 | padding: 16px 0 12px; 128 | color: #333 129 | } 130 | .category-option .sub-cat .sub-cat-brand .tag { 131 | margin-bottom: 25px; 132 | font-size: 12px; 133 | height: 88px; 134 | overflow: hidden 135 | } 136 | .category-option .sub-cat .sub-cat-brand .tag a { 137 | margin-right: 16px; 138 | display: inline-block; 139 | color: #666; 140 | line-height: 22px 141 | } 142 | .category-option .cat-item.top-cat .icon { 143 | opacity: 1; 144 | } 145 | .category-option .cat-item .icon { 146 | float: left; 147 | width: 20px; 148 | height: 20px; 149 | margin: 8px 10px 0 15px; 150 | background: url(../images/menu.png) no-repeat; 151 | opacity: .65 152 | } 153 | .category-option .cat-item .txt { 154 | color: #c8c8c8; 155 | margin-right: 10px; 156 | float: left; 157 | font-size: 13px 158 | } 159 | .category-option .cat-item.top-cat .txt { 160 | color: #fff; 161 | font-size: 14px 162 | } 163 | .category-option .cat-item .icon.i0 { 164 | background-position: -21px -168px 165 | } 166 | .category-option .cat-item .icon.i1 { 167 | background-position: -21px -147px 168 | } 169 | .category-option .cat-item .icon.i2 { 170 | background-position: -21px -126px 171 | } 172 | .category-option .cat-item .icon.i3 { 173 | background-position: -21px -231px 174 | } 175 | .category-option .cat-item .icon.i4 { 176 | background-position: -21px -210px 177 | } 178 | .category-option .cat-item .icon.i5 { 179 | background-position: -21px -189px 180 | } 181 | .category-option .cat-item .icon.i6 { 182 | background-position: -21px -264px 183 | } 184 | .category-option .cat-item .icon.i7 { 185 | background-position: -21px -42px 186 | } 187 | .category-option .cat-item .icon.i8 { 188 | background-position: -21px -21px 189 | } 190 | .category-option .cat-item .icon.i9 { 191 | background-position: -21px 0 192 | } 193 | .category-option .cat-item .icon.i10 { 194 | background-position: -21px -105px 195 | } 196 | .category-option .cat-item .icon.i11 { 197 | background-position: -21px -84px 198 | } 199 | .category-option .cat-item .icon.i12 { 200 | background-position: -21px -63px 201 | } 202 | .category-option .cat-item.hover .icon.i0 { 203 | background-position: 0 -168px; 204 | opacity: 1 205 | } 206 | .category-option .cat-item.hover .icon.i1 { 207 | background-position: 0 -147px; 208 | opacity: 1 209 | } 210 | .category-option .cat-item.hover .icon.i2 { 211 | background-position: 0 -126px; 212 | opacity: 1 213 | } 214 | .category-option .cat-item.hover .icon.i3 { 215 | background-position: 0 -231px; 216 | opacity: 1 217 | } 218 | .category-option .cat-item.hover .icon.i4 { 219 | background-position: 0 -210px; 220 | opacity: 1 221 | } 222 | .category-option .cat-item.hover .icon.i5 { 223 | background-position: 0 -189px; 224 | opacity: 1 225 | } 226 | .category-option .cat-item.hover .icon.i6 { 227 | background-position: 0 -264px; 228 | opacity: 1 229 | } 230 | .category-option .cat-item.hover .icon.i7 { 231 | background-position: 0 -42px; 232 | opacity: 1 233 | } 234 | .category-option .cat-item.hover .icon.i8 { 235 | background-position: 0 -21px; 236 | opacity: 1 237 | } 238 | .category-option .cat-item.hover .icon.i9 { 239 | background-position: 0 0; 240 | opacity: 1 241 | } 242 | .category-option .cat-item.hover .icon.i10 { 243 | background-position: 0 -105px; 244 | opacity: 1 245 | } 246 | .category-option .cat-item.hover .icon.i11 { 247 | background-position: 0 -84px; 248 | opacity: 1 249 | } 250 | .category-option .cat-item.hover .icon.i12 { 251 | background-position: 0 -63px; 252 | opacity: 1 253 | } 254 | .category-option .cat-item.hover { 255 | background: #fff; 256 | background: rgba(255,255,255,.9); 257 | padding-left: 5px 258 | } 259 | .category-option .cat-item.hover a { 260 | color: #333!important 261 | } 262 | .category-option .cat-item.hover a:hover { 263 | color: #e62318!important 264 | } 265 | .category-option .cat-item:hover .sub-cat { 266 | display: block; 267 | opacity: 1; 268 | padding-left: 10px; 269 | animation: subcat .3s ease-in-out 270 | } 271 | @keyframes subcat { 272 | from { 273 | padding-left:0 274 | } 275 | to { 276 | padding-left:10px 277 | } 278 | } 279 | .header .menu-bar .navigator { 280 | margin-left: 200px; 281 | height: 36px 282 | } 283 | .header .menu-bar .navigator li { 284 | padding: 0 15px; 285 | height: 36px; 286 | line-height: 36px; 287 | float: left; 288 | position: relative 289 | } 290 | .header .menu-bar .navigator li a { 291 | font-size: 16px 292 | } 293 | .header .menu-bar .navigator li.current a { 294 | color: #e62318 295 | } 296 | .scroll-banner { 297 | position: relative; 298 | z-index: 0; 299 | overflow: hidden; 300 | height: 460px 301 | } 302 | .scroll-banner .scroll-content { 303 | height: 460px 304 | } 305 | .scroll-banner .scroll-content li { 306 | position: absolute; 307 | height: 460px; 308 | width: 100% 309 | } 310 | .scroll-banner .scroll-item { 311 | position: absolute; 312 | width: 100%; 313 | top: 0; 314 | left: 0; 315 | text-align: center; 316 | display: none 317 | } 318 | .scroll-banner .scroll-item .banner_r { 319 | position: absolute; 320 | right: 0; 321 | top: 20px 322 | } 323 | .scroll-banner .scroll-item .banner_r a { 324 | display: block; 325 | position: absolute; 326 | right: 0; 327 | width: 180px; 328 | height: 200px; 329 | background-color: rgba(255,255,255,.7); 330 | transition: background-color .4s 331 | } 332 | .scroll-banner .scroll-item .banner_r a:last-child { 333 | top: 220px 334 | } 335 | .scroll-banner .scroll-item .banner_r a img { 336 | vertical-align: middle; 337 | width: 100% 338 | } 339 | .scroll-banner .scroll-item .banner_r a:hover { 340 | background-color: #fff 341 | } 342 | .scroll-banner .scroll-index { 343 | position: relative; 344 | -webkit-filter: inherit; 345 | filter: inherit; 346 | width: 1200px; 347 | height: 460px; 348 | margin: 0 auto 349 | } 350 | .scroll-banner .scroll-item .sc-big { 351 | position: relative 352 | } 353 | .fadeInR { 354 | animation-name: fadeInR; 355 | animation-duration: 1.5s; 356 | animation-timing-function: linear 357 | } 358 | @keyframes fadeInR { 359 | from { 360 | left:-20px 361 | } 362 | to { 363 | opacity:1; 364 | filter:alpha(opacity=100); 365 | left:0 366 | } 367 | } 368 | .scroll-btn { 369 | position: absolute; 370 | overflow: hidden; 371 | bottom: 30px; 372 | z-index: 3; 373 | width: 100%; 374 | text-align: center 375 | } 376 | .scroll-btn span { 377 | display: inline-block; 378 | width: 30px; 379 | height: 5px; 380 | margin: 0 1px; 381 | cursor: pointer; 382 | background: #fff 383 | } 384 | .scroll-btn span.current { 385 | background: #333 386 | } 387 | -------------------------------------------------------------------------------- /3分页按钮样式/js/jquery.z-pager.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | var methods = { 3 | pageInit: function(options){ 4 | /** 5 | * [opts this plug propertys] 6 | * @type {Obeject} 7 | */ 8 | var opts = $.extend({},$.fn.zPager.defaults,options); 9 | return $(this).each(function(k,v){ 10 | var _v = $(v); 11 | _v.data("options",opts); 12 | methods.pageData(_v, opts.current); 13 | }) 14 | }, 15 | pageData: function(_v, _current){ 16 | /** 17 | * [opts this plug propertys] 18 | * @type {Obeject} 19 | */ 20 | var opts = _v.data("options"); 21 | var t = opts.totalData, p = opts.pageData, ajaxOpts = null; 22 | if(opts.ajaxSetData&&(typeof(opts.ajaxSetData)==='boolean')){ 23 | if(opts.url!=='' && typeof(opts.url)==='string'){ 24 | ajaxOpts = methods.ajaxData(opts.url, _current); 25 | t = opts.totalData = ajaxOpts.total; 26 | if(ajaxOpts.rows.length>0){ 27 | var ishasDataRender = (opts.dataRender && typeof(opts.dataRender)==='function'); 28 | ishasDataRender ? opts.dataRender(ajaxOpts.rows) : methods.dataRender(_v, ajaxOpts.rows); 29 | } 30 | }else{ 31 | $.pageError(2); 32 | } 33 | } 34 | if(t%p === 0){ 35 | opts.pageCount = parseInt(t/p); 36 | }else{ 37 | opts.pageCount = parseInt(t/p)+1; 38 | } 39 | if(opts.pageCount>0){ 40 | _v.data("options",opts); 41 | methods.pageRender(_v, _current); 42 | } 43 | }, 44 | dataRender: function(_v, _data){ 45 | var opts = _v.data("options"); 46 | var cells = ''; 47 | for(var i=0;i<_data.length;i++){ 48 | cells += '
'+_data[i].id+'-'+Math.random()+''; 49 | cells += ''+_data[i].title+''; 50 | cells += ''+_data[i].starttime+''; 51 | cells += ''+_data[i].endtime+''; 52 | cells += '
'; 53 | } 54 | if(opts.htmlBox===''||(typeof(opts.htmlBox)!=='Obeject')){ 55 | var abx = _v.prev(); 56 | if(!abx.hasClass('pagerHtmlWrap')){ 57 | var d = '
'; 58 | _v.before(d); 59 | } 60 | _v.prev().html(cells); 61 | }else{ 62 | opts.htmlBox.html(cells); 63 | } 64 | }, 65 | pageRender: function(_v, _current){ 66 | /** 67 | * [o this plug propertys] 68 | * @type {Obeject} 69 | */ 70 | var o = _v.data("options"); 71 | var _page = o.pageCount; 72 | 73 | var _middle = parseInt(o.pageStep/2); 74 | var _tep = _middle-2; 75 | var _html = ''; 76 | if(_page>o.pageStep&&_current<=_page){ 77 | _html += methods.setPrevNext(o, 'prev'); 78 | if(_current<=_middle){ 79 | _html += methods.forEach(1, o.pageStep, _current, o.active); 80 | _html += methods.elliPsis(); 81 | }else if(_current>_middle&&_current<(_page-_tep)){ 82 | _html += methods.pageBtn(1); 83 | _html += methods.elliPsis(); 84 | _html += methods.forEach(_current-_tep, _current-(-_tep)-(-1), _current, o.active); 85 | _html += methods.elliPsis(); 86 | }else if(_current>=(_page-_tep)){ 87 | _html += methods.pageBtn(1); 88 | _html += methods.elliPsis(); 89 | _html += methods.forEach(_page-2*_tep-1, _page-(-1), _current, o.active); 90 | } 91 | _html += methods.setPrevNext(o, 'next'); 92 | }else if(_page<=o.pageStep){ 93 | if(_page>o.minPage){ 94 | _html += methods.setPrevNext(o, 'prev'); 95 | } 96 | _html += methods.forEach(1, _page-(-1), _current, o.active); 97 | if(_page>o.minPage){ 98 | _html += methods.setPrevNext(o, 'next'); 99 | } 100 | } 101 | _v.html(_html); 102 | methods.bindEvent(_v); 103 | }, 104 | bindEvent: function(_v){ 105 | /** 106 | * [o this plug propertys] 107 | * @type {Obeject} 108 | */ 109 | var o = _v.data("options"); 110 | var _a = _v.find("a"); 111 | $.each(_a,function(index,item){ 112 | var _this = $(this); 113 | _this.on("click",function(){ 114 | if(_this.attr("disabled")){ 115 | return false; 116 | } 117 | var _p = _this.attr("page-id"); 118 | o.current = _p; 119 | _v.data("options",o); 120 | // methods.options.current = _p; 121 | methods.pageData(_v, _p); 122 | }) 123 | }) 124 | }, 125 | forEach: function(_start,length,_current,curclass){ 126 | /** 127 | * [s page elements] 128 | * @type {String} 129 | */ 130 | var s = ''; 131 | for(var i = _start;i'+_id+''; 146 | }, 147 | elliPsis: function(){ 148 | /** 149 | * [class ellipses...] 150 | * @type {String} 151 | */ 152 | return '...'; 153 | }, 154 | pageBtn: function(_id){ 155 | /** 156 | * [id page id] 157 | * @type {String} 158 | */ 159 | return ''+_id+''; 160 | }, 161 | addBtn: function(_property, _page, _count){ 162 | /** 163 | * [disabled is it can click button] 164 | * @type {Boolean} 165 | */ 166 | var disabled = ''; 167 | if(_count){ 168 | disabled = (_page === 0 || _page === _count-(-1)) ? 'disabled="true"':''; 169 | } 170 | return ''; 171 | }, 172 | setPrevNext: function(_o, _type){ 173 | /** 174 | * [s string create prev or next buttons elements] 175 | * @type {String} 176 | */ 177 | var s = ''; 178 | function prev(){ 179 | if(_o.btnShow){ 180 | s += methods.addBtn(_o.firstBtn, 1); 181 | } 182 | if(_o.btnBool){ 183 | s += methods.addBtn(_o.prevBtn, _o.current-1, _o.pageCount); 184 | } 185 | return s; 186 | } 187 | function next(){ 188 | if(_o.btnBool){ 189 | s += methods.addBtn(_o.nextBtn, _o.current-(-1), _o.pageCount); 190 | } 191 | if(_o.btnShow){ 192 | s += methods.addBtn(_o.lastBtn, _o.pageCount); 193 | } 194 | return s; 195 | } 196 | return _type==='prev'? prev(): next(); 197 | }, 198 | ajaxData: function(_url, _current){ 199 | /** 200 | * [ajax get data and pagenumber] 201 | * @param {Object} ){ var parms [ajax url,current page number] 202 | * @return {[type]} [obj total rows] 203 | */ 204 | var _total = $.fn.zPager.defaults.totalData; 205 | return (function(){ 206 | var parms = {'total':_total,'rows':[]}; 207 | $.ajax({ 208 | url: _url, 209 | type: 'get', 210 | data: {"page":_current}, 211 | dataType: 'json', 212 | cache : false, 213 | async : false, 214 | success: function(data) { 215 | if(data.total && (data.total!==0)){ 216 | parms['total'] = data.total; 217 | parms['rows'] = data.rows; 218 | }else{ 219 | $.pageError(3); 220 | } 221 | }, 222 | error: function(XMLHttpRequest,textStatus,errorThrown) { 223 | var msg = ''; 224 | switch(XMLHttpRequest.readyState){ 225 | case 0: 226 | msg = '（未初始化）还没有调用send()方法'; 227 | break; 228 | case 1: 229 | msg = '（载入）已调用send()方法，正在发送请求'; 230 | break; 231 | case 2: 232 | msg = '（载入完成）send()方法执行完成，已经接收到全部响应内容'; 233 | break; 234 | case 3: 235 | msg = '（交互）正在解析响应内容'; 236 | break; 237 | case 4: 238 | msg = '（完成）响应内容解析完成，可以在客户端调用了'; 239 | break; 240 | } 241 | console.log(textStatus+'：'+XMLHttpRequest.readyState+'-'+msg); 242 | } 243 | }) 244 | return parms; 245 | })(); 246 | } 247 | } 248 | 249 | $.extend({ 250 | pageError:function(type){ 251 | /** 252 | * [switch error type] 253 | * @param {[type]} type [no this function] 254 | * @return {[type]} [ajax error] 255 | */ 256 | switch(type){ 257 | case 1: 258 | console.log('method'+method+'dose not exist on jQuery.zPager'); 259 | break; 260 | case 2: 261 | console.log('no ajax'); 262 | break; 263 | case 3: 264 | console.log('no data'); 265 | break; 266 | default: 267 | console.log('default error'); 268 | } 269 | } 270 | }) 271 | 272 | $.fn.extend({ 273 | zPager:function(method){ 274 | /** 275 | * [if has this method] 276 | * @param {[type]} methods[method] [apply this method] 277 | * @return {[type]} [return property] 278 | */ 279 | if(methods[method]){ 280 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 281 | }else if(typeof method === 'object' || !method){ 282 | return methods.pageInit.apply(this, arguments); 283 | }else{ 284 | $.pageError(1); 285 | } 286 | } 287 | }) 288 | 289 | $.fn.zPager.defaults = { 290 | totalData: 10, //数据总条数 291 | pageData: 5, //每页数据条数 292 | pageCount: 1, //总页数 293 | current: 1, //当前页码数 294 | pageStep: 8, //当前可见最多页码个数 295 | minPage: 5, //最小页码数，页码小于此数值则不显示上下分页按钮 296 | active: 'current', //当前页码样式 297 | prevBtn: 'pg-prev', //上一页按钮 298 | nextBtn: 'pg-next', //下一页按钮 299 | btnBool: true, //是否显示上一页下一页 300 | firstBtn: 'pg-first', //第一页按钮 301 | lastBtn: 'pg-last', //最后一页按钮 302 | btnShow: true, //是否显示第一页和最后一页按钮 303 | disabled: true, //按钮失效样式 304 | ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空 305 | url: '', //ajax路由 306 | htmlBox: '' //ajax数据写入容器 307 | } 308 | 309 | })(jQuery); -------------------------------------------------------------------------------- /1商城分类导航/statics/js/jquery.SuperSlide.2.1.3.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SuperSlide v2.1.3 3 | * 轻松解决网站大部分特效展示问题 4 | * 详尽信息请看官网：http://www.SuperSlide2.com/ 5 | * 6 | * Copyright 2011-至今, 大话主席 7 | * 8 | * 请尊重原创，保留头部版权 9 | * 在保留版权的前提下可应用于个人或商业用途 10 | 11 | * v2.1.3：处理Jquery已经弃用的API，兼容最新版本的Jquery，目前是jquery3.3.1，日后如果发现插件不兼容新版本的jquery，请联系我 305491515@qq.com 12 | 13 | */ 14 | !function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1},this.each(function(){var t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,$,_,ab,bb,cb,db,eb,fb,gb,hb,ib,jb,kb,lb,mb,nb,c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.length,l=a(c.mainCell,d),m=l.children().length,n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);if(parseInt(c.triggerTime),t=parseInt(c.scroll),u="false"==c.autoPlay||0==c.autoPlay?!1:!0,v="false"==c.opp||0==c.opp?!1:!0,w="false"==c.autoPage||0==c.autoPage?!1:!0,x="false"==c.pnLoop||0==c.pnLoop?!1:!0,y="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,z="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,A="false"==c.returnDefault||0==c.returnDefault?!1:!0,B=isNaN(c.vis)?1:parseInt(c.vis),C=!-[1]&&!window.XMLHttpRequest,D=0,E=0,F=0,G=0,H=c.easing,I=null,J=null,K=null,L=c.titOnClassName,M=j.index(d.find("."+L)),N=p=-1==M?p:M,O=p,P=p,Q=m>=B?0!=m%t?m%t:t:0,S="leftMarquee"==e||"topMarquee"==e?!0:!1,T=function(){a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)},U=function(){a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)},V=function(){j.removeClass(L),z&&j.eq(O).addClass(L)},"menu"==c.type)return z&&j.removeClass(L).eq(p).addClass(L),j.hover(function(){R=a(this).find(c.targetCell);var b=j.index(a(this));J=setTimeout(function(){switch(p=b,j.removeClass(L).eq(p).addClass(L),T(),e){case"fade":R.stop(!0,!0).animate({opacity:"show"},q,H,U);break;case"slideDown":R.stop(!0,!0).animate({height:"show"},q,H,U)}},c.triggerTime)},function(){switch(clearTimeout(J),e){case"fade":R.animate({opacity:"hide"},q,H);break;case"slideDown":R.animate({height:"hide"},q,H)}}),A&&d.hover(function(){clearTimeout(K)},function(){K=setTimeout(V,q)}),void 0;if(0==k&&(k=m),S&&(k=2),w){if(m>=B?"leftLoop"==e||"topLoop"==e?k=0!=m%t?(0^m/t)+1:m/t:(W=m-B,k=1+parseInt(0!=W%t?W/t+1:W/t),0>=k&&(k=1)):k=1,j.html(""),X="",1==c.autoPage||"true"==c.autoPage)for(Y=0;k>Y;Y++)X+="
  • "+(Y+1)+"
    • ";else for(Y=0;k>Y;Y++)X+=c.autoPage.replace("$",Y+1);j.html(X),j=j.children()}if(m>=B)switch(l.children().each(function(){a(this).width()>F&&(F=a(this).width(),E=a(this).outerWidth(!0)),a(this).height()>G&&(G=a(this).height(),D=a(this).outerHeight(!0))}),Z=l.children(),$=function(){var a;for(a=0;B>a;a++)Z.eq(a).clone().addClass("clone").appendTo(l);for(a=0;Q>a;a++)Z.eq(m-a-1).clone().addClass("clone").prependTo(l)},e){case"fold":l.css({position:"relative",width:E,height:D}).children().css({position:"absolute",width:F,left:0,top:0,display:"none"});break;case"top":l.wrap('
    ').css({top:-(p*t)*D,position:"relative",padding:"0",margin:"0"}).children().css({height:G});break;case"left":l.wrap('
    ').css({width:m*E,left:-(p*t)*E,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",width:F});break;case"leftLoop":case"leftMarquee":$(),l.wrap('
    ').css({width:(m+B+Q)*E,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(Q+p*t)*E}).children().css({"float":"left",width:F});break;case"topLoop":case"topMarquee":$(),l.wrap('
    ').css({height:(m+B+Q)*D,position:"relative",padding:"0",margin:"0",top:-(Q+p*t)*D}).children().css({height:G})}_=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},ab=function(b){var d,f,g,h,c=function(c){for(var d=c;B+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var c,d,b=a(this);if(b.attr("src",b.attr(n)).removeAttr(n),l.find(".clone")[0])for(c=l.children(),d=0;d=1?p=1:0>=p&&(p=0):(P=p,p>=k?p=0:0>p&&(p=k-1)),T(),null!=n&&ab(l.children()),o[0]&&(R=o.eq(p),null!=n&&ab(o),"slideDown"==e?(o.not(R).stop(!0,!0).slideUp(q),R.slideDown(q,H,function(){l[0]||U()})):(o.not(R).stop(!0,!0).hide(),R.animate({opacity:"show"},q,function(){l[0]||U()}))),m>=B)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,H,function(){U()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,H,function(){U()}).siblings().animate({opacity:"hide"},q,H);break;case"top":l.stop(!0,!1).animate({top:-p*t*D},q,H,function(){U()});break;case"left":l.stop(!0,!1).animate({left:-p*t*E},q,H,function(){U()});break;case"leftLoop":b=P,l.stop(!0,!0).animate({left:-(_(P)+Q)*E},q,H,function(){-1>=b?l.css("left",-(Q+(k-1)*t)*E):b>=k&&l.css("left",-Q*E),U()});break;case"topLoop":b=P,l.stop(!0,!0).animate({top:-(_(P)+Q)*D},q,H,function(){-1>=b?l.css("top",-(Q+(k-1)*t)*D):b>=k&&l.css("top",-Q*D),U()});break;case"leftMarquee":c=l.css("left").replace("px",""),0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*E)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+Q)*E&&l.css("left",-Q*E)});break;case"topMarquee":d=l.css("top").replace("px",""),0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*D)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+Q)*D&&l.css("top",-Q*D)})}j.removeClass(L).eq(p).addClass(L),N=p,x||(g.removeClass("nextStop"),f.removeClass("prevStop"),0==p&&f.addClass("prevStop"),p==k-1&&g.addClass("nextStop")),h.html(""+(p+1)+"/"+k)}},z&&bb(!0),A&&d.hover(function(){clearTimeout(K)},function(){K=setTimeout(function(){p=O,z?bb():"slideDown"==e?R.slideUp(q,V):R.animate({opacity:"hide"},q,V),N=p},300)}),cb=function(a){I=setInterval(function(){v?p--:p++,bb()},a?a:r)},db=function(a){I=setInterval(bb,a?a:r)},eb=function(){y||!u||i.hasClass("pauseState")||(clearInterval(I),cb())},fb=function(){(x||p!=k-1)&&(p++,bb(),S||eb())},gb=function(){(x||0!=p)&&(p--,bb(),S||eb())},hb=function(){clearInterval(I),S?db():cb(),i.removeClass("pauseState")},ib=function(){clearInterval(I),i.addClass("pauseState")},u?S?(v?p--:p++,db(),y&&l.hover(ib,hb)):(cb(),y&&d.hover(ib,hb)):(S&&(v?p--:p++),i.addClass("pauseState")),i.click(function(){i.hasClass("pauseState")?hb():ib()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);J=setTimeout(function(){p=a,bb(),eb()},c.triggerTime)},function(){clearTimeout(J)}):j.click(function(){p=j.index(this),bb(),eb()}),S?(g.mousedown(fb),f.mousedown(gb),x&&(kb=function(){jb=setTimeout(function(){clearInterval(I),db(0^r/10)},150)},lb=function(){clearTimeout(jb),clearInterval(I),db()},g.mousedown(kb),g.mouseup(lb),f.mousedown(kb),f.mouseup(lb)),"mouseover"==c.trigger&&(g.hover(fb,function(){}),f.hover(gb,function(){}))):(g.click(fb),f.click(gb)),"auto"!=c.vis||1!=t||"left"!=e&&"leftLoop"!=e||(nb=function(){C&&(l.width("auto"),l.children().width("auto")),l.parent().width("auto"),E=l.parent().width(),C&&l.parent().width(E),l.children().width(E),"left"==e?(l.width(E*m),l.stop(!0,!1).animate({left:-p*E},0)):(l.width(E*(m+2)),l.stop(!0,!1).animate({left:-(p+1)*E},0)),C||E==l.parent().width()||nb()},a(window).resize(function(){clearTimeout(mb),mb=setTimeout(nb,100)}),nb())})}}(jQuery),jQuery.easing["jswing"]=jQuery.easing["swing"],jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return 0==b?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;return 0==b?c:1==(b/=e)?c+d:(g||(g=.3*e),hb?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c)},easeInBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeInOutBounce:function(a,b,c,d,e){return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}}); -------------------------------------------------------------------------------- /4拖动滑块拼图验证/js/img_smooth_check.js: -------------------------------------------------------------------------------- 1 | var WIDGETS = { 2 | imgSmoothCheck: undefined, 3 | } 4 | var _widgets = { default: { noop: function () { } } } 5 | WIDGETS.imgSmoothCheck = function (options) { 6 | options = $.extend({ 7 | selector: ".widgets__img_check_box", 8 | imgSrc: [], 9 | imgWidth: undefined, 10 | imgHeight: undefined, 11 | imgFragmentW: undefined, 12 | imgFragmentH: undefined, 13 | allowableErrorValue: 4, 14 | success: _widgets.default.noop, 15 | error: _widgets.default.noop, 16 | }, options || {}); 17 | 18 | var $sel = $(options.selector); 19 | if (!$sel) return; 20 | var _data = options.data[0]; 21 | 22 | 23 | function _getRandomChoosingImg(imgData) { 24 | var index = Math.floor(imgData.length * Math.random()); 25 | return imgData[index]; 26 | } 27 | 28 | 29 | function _initImgSrc($srcImg, strSrc) { 30 | $srcImg.attr("src", strSrc); 31 | if (options.imgWidth) 32 | $srcImg.attr("width", options.imgWidth); 33 | if (options.imgHeight) 34 | $srcImg.attr("height", options.imgHeight); 35 | } 36 | 37 | function _getRandomStartPosition(numW, numH, numClipW, numClipH, numCurveR) { 38 | var minX = numClipW + numCurveR; 39 | var maxX = numW - numClipW - 20; 40 | var minY = numCurveR, maxY = numH - numClipH - numCurveR; 41 | var position = {}; 42 | position.x = Math.random() * (maxX - minX) + minX; 43 | position.y = Math.random() * (maxY - minY) + minY; 44 | return position; 45 | } 46 | 47 | function _calBestClipWidth(numW) { 48 | return numW / 6; 49 | } 50 | 51 | function _canvasDrawPath(ctx, numStartX, numStartY, numClipWidth, numClipHeight, numCurveR) { 52 | ctx.beginPath(); 53 | ctx.strokeStyle = "rgba(0,0,0,0)"; 54 | 55 | ctx.moveTo(numStartX, numStartY); 56 | ctx.lineTo(numStartX + (numClipWidth / 2) - numCurveR, numStartY); 57 | ctx.bezierCurveTo(numStartX + (numClipWidth / 2) - numCurveR, numStartY - numCurveR, numStartX + (numClipWidth / 2) + numCurveR, numStartY - numCurveR, numStartX + (numClipWidth / 2) + numCurveR, numStartY); 58 | ctx.lineTo(numStartX + numClipWidth, numStartY); 59 | 60 | ctx.lineTo(numStartX + numClipWidth, numStartY + (numClipHeight / 2) - numCurveR); 61 | ctx.bezierCurveTo(numStartX + numClipWidth - numCurveR, numStartY + (numClipHeight / 2) - numCurveR, numStartX + numClipWidth - numCurveR, numStartY + (numClipHeight / 2) + numCurveR, numStartX + numClipWidth, numStartY + (numClipHeight / 2) + numCurveR); 62 | ctx.lineTo(numStartX + numClipWidth, numStartY + numClipHeight); 63 | 64 | ctx.lineTo(numStartX, numStartY + numClipHeight); 65 | ctx.closePath(); 66 | } 67 | 68 | function _drawCanvas(canvasOption) { 69 | 70 | var numClipWidth = canvasOption.clipW, numClipHeight = canvasOption.clipH; 71 | var numCurveR = numClipWidth / 3 / 2; 72 | var position = canvasOption.position; 73 | var numStartX = position.x, numStartY = position.y; 74 | var sImgSrc = canvasOption.img 75 | 76 | var $cavImgFramentHollow = $sel.find("canvas.widgets__img_fragment_hollow"); 77 | var $cavImgFramentContent = $sel.find("canvas.widgets__img_fragment_content"); 78 | var $cavImgFramentShadow = $sel.find("canvas.widgets__img_fragment_shadow"); 79 | var ctxImgFramentHollow = $cavImgFramentHollow[0].getContext("2d"); 80 | var ctxImgFramentContent = $cavImgFramentContent[0].getContext("2d"); 81 | var ctxImgFramentShadow = $cavImgFramentShadow[0].getContext("2d"); 82 | $cavImgFramentHollow.attr("width", numImgWidth + "px"); 83 | $cavImgFramentHollow.attr("height", numImgHeight + "px"); 84 | $cavImgFramentContent.attr("width", numImgWidth + "px"); 85 | $cavImgFramentContent.attr("height", numImgHeight + "px"); 86 | $cavImgFramentShadow.attr("width", numImgWidth + "px"); 87 | $cavImgFramentShadow.attr("height", numImgHeight + "px"); 88 | $sel.find(".widgets__img_cnt").css("width", numImgWidth + "px"); 89 | $sel.find(".widgets__img_display").css("width", numImgWidth + "px"); 90 | $sel.find(".widgets__smooth_cnt").css("width", numImgWidth + "px"); 91 | 92 | _canvasDrawPath(ctxImgFramentHollow, numStartX, numStartY, numClipWidth, numClipHeight, numCurveR); 93 | ctxImgFramentHollow.globalCompositeOperation = "xor"; 94 | ctxImgFramentHollow.shadowBlur = 10; 95 | ctxImgFramentHollow.shadowColor = "#fff"; 96 | ctxImgFramentHollow.shadowOffsetX = 3; 97 | ctxImgFramentHollow.shadowOffsetY = 3; 98 | ctxImgFramentHollow.strokeStyle = "rgba(0,0,0,0.5)"; 99 | ctxImgFramentHollow.fillStyle = "rgba(0,0,0,0.3)"; 100 | ctxImgFramentHollow.fill(); 101 | ctxImgFramentHollow.stroke(); 102 | 103 | $sel.find(".widgets__img_fragment_cnt").css("left", -position.x); 104 | 105 | _canvasDrawPath(ctxImgFramentContent, numStartX, numStartY, numClipWidth, numClipHeight, numCurveR); 106 | ctxImgFramentContent.stroke(); 107 | ctxImgFramentContent.clip(); 108 | 109 | _canvasDrawPath(ctxImgFramentShadow, numStartX, numStartY, numClipWidth, numClipHeight, numCurveR); 110 | ctxImgFramentShadow.shadowBlur = 18; 111 | ctxImgFramentShadow.shadowColor = "black"; 112 | ctxImgFramentShadow.fill(); 113 | ctxImgFramentShadow.stroke(); 114 | 115 | var img = new Image(); 116 | img.onload = function (e) { 117 | ctxImgFramentContent.drawImage(img, 0, 0, numImgWidth, numImgHeight); 118 | } 119 | img.src = sImgSrc; 120 | return position; 121 | } 122 | 123 | var $srcImg = $sel.find("img.widgets__img_src");//ԭͼ 124 | var sSrcImgSrc = _getRandomChoosingImg(options.data); 125 | _initImgSrc($srcImg, sSrcImgSrc); 126 | var numImgWidth = $srcImg.width(); 127 | var numImgHeight = $srcImg.height(); 128 | 129 | var numClipWidth = options.imgFragmentW === undefined ? _calBestClipWidth(numImgWidth) : options.imgFragmentW;//���еĿ��� 130 | var numClipHeight = options.imgFragmentW === undefined ? _calBestClipWidth(numImgWidth) : options.imgFragmentH; 131 | var numCurveR = numClipWidth / 3 / 2; 132 | var position = _getRandomStartPosition(numImgWidth, numImgHeight, numClipWidth, numClipWidth, numCurveR); 133 | var numStartX = position.x, numStartY = position.y; 134 | var canvasOption = { 135 | position: position, 136 | clipW: numClipWidth, 137 | clipH: numClipHeight, 138 | width: numImgWidth, 139 | height: numImgHeight, 140 | img: sSrcImgSrc 141 | }; 142 | 143 | _drawCanvas(canvasOption); 144 | var blnIsMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); 145 | 146 | var $smoothCir = $sel.find(".widgets__smooth_circle"); 147 | var $imgFragmentCnt = $sel.find(".widgets__img_fragment_cnt"); 148 | var flag = false; 149 | var strDefualtLeft = $smoothCir.css("left"); 150 | var numDefaultLeft = parseFloat(strDefualtLeft.substring(0, strDefualtLeft.lastIndexOf("px"))); 151 | var strImgFragmentCntDefaultLeft = $imgFragmentCnt.css("left"); 152 | var numImgFragmentCntDefaultLeft = parseFloat(strImgFragmentCntDefaultLeft.substring(0, strImgFragmentCntDefaultLeft.lastIndexOf("px"))); 153 | var numStartPointLeft = -1; 154 | 155 | var sSmoothStart = "mousedown"; 156 | var sSmoothMove = "mousemove"; 157 | var sSmoothEnd = "mouseup"; 158 | if (blnIsMobile) { 159 | sSmoothStart = "touchstart"; 160 | sSmoothMove = "touchmove"; 161 | sSmoothEnd = "touchend"; 162 | } 163 | 164 | 165 | var _numMoveLength = -1; 166 | $smoothCir.on(sSmoothStart, function () { 167 | var strLeft = $smoothCir.css("left"); 168 | var numCurrentLeft = parseFloat(strLeft.substring(0, strLeft.lastIndexOf("px"))); 169 | if (flag === false && numCurrentLeft == numDefaultLeft) 170 | flag = true; 171 | }); 172 | 173 | $smoothCir.on(sSmoothEnd, function () { 174 | _dealAfterSmoothEnd(); 175 | }); 176 | 177 | var $smoothCnt = $sel.find(".widgets__smooth_cnt"); 178 | $smoothCnt.on(sSmoothMove, function (evt) { 179 | evt.preventDefault(); 180 | var strLeft = $smoothCir.css("left"); 181 | var numCurrentLeft = parseFloat(strLeft.substring(0, strLeft.lastIndexOf("px")));//��ȡ������ť��߾��� 182 | if (flag === true) { 183 | 184 | var numPageX = blnIsMobile ? evt.targetTouches[0].pageX : evt.pageX; 185 | var numMoveLength = 0; 186 | if (numCurrentLeft === numDefaultLeft) { 187 | numStartPointLeft = numPageX; 188 | numMoveLength = numDefaultLeft + 0.1;//��һ�δ����ƶ���Ĭ�ϻ���0.1������,��ֹÿ�λ�ȡ��ǰ����߾඼����Ĭ������� 189 | } else { 190 | numMoveLength = numPageX - numStartPointLeft; 191 | } 192 | _numMoveLength = numMoveLength; 193 | if (numMoveLength < numDefaultLeft) return;//��������Ĭ��ֵ 194 | if (numMoveLength + numClipWidth>= numImgWidth) {//�ƶ����벻�ܴ�����Ƭ 195 | _dealAfterSmoothEnd(); 196 | return; 197 | } 198 | $smoothCir.css("left", numMoveLength + "px"); 199 | $imgFragmentCnt.css("left", numMoveLength + numImgFragmentCntDefaultLeft + "px"); 200 | } 201 | }); 202 | $smoothCnt.on("mouseleave", function () { 203 | _dealAfterSmoothEnd(); 204 | }); 205 | $smoothCnt.on("mouseup", function () { 206 | _dealAfterSmoothEnd(); 207 | }); 208 | 209 | //ˢ�� 210 | $sel.find(".widgets__icon_refresh").on("click", function () { 211 | _refresh(); 212 | }); 213 | 214 | function _dealAfterSmoothEnd() { 215 | if (flag === true) { 216 | flag = false; 217 | if (_checkImgCheckIsSuccess()) 218 | options.success(); 219 | else if(_numMoveLength > 1) {// 220 | options.error("��֤ʧ��"); 221 | _refresh(); 222 | //$imgFragmentCnt.animate({ left: -position.x }, 300); 223 | //$smoothCir.animate({ left: numDefaultLeft }, 300); 224 | } else { 225 | $imgFragmentCnt.css("left", -position.x); 226 | $smoothCir.css("left", numDefaultLeft + "px"); 227 | numImgFragmentCntDefaultLeft = -position.x; 228 | } 229 | } 230 | } 231 | function _checkImgCheckIsSuccess() {//���ͼƬ��֤�Ƿ�ɹ� 232 | var numAllowableError = options.allowableErrorValue;//������� 233 | var sLeft = $imgFragmentCnt.css("left"); 234 | var numLeft = parseFloat(sLeft.substring(0, sLeft.lastIndexOf("px"))); 235 | if (numLeft < numAllowableError && numLeft > -numAllowableError) 236 | return true; 237 | return false; 238 | } 239 | function _refresh() { 240 | var $srcImg = $sel.find("img.widgets__img_src");//ԭͼ 241 | var strImgSrc = _getRandomChoosingImg(options.data); 242 | $srcImg.attr("src", strImgSrc); 243 | position = _getRandomStartPosition(numImgWidth, numImgHeight, numClipWidth, numClipHeight, numCurveR) 244 | canvasOption.img = strImgSrc; 245 | canvasOption.position = position; 246 | _drawCanvas(canvasOption);//��ͼ 247 | $imgFragmentCnt.css("left", -position.x); 248 | $smoothCir.css("left", numDefaultLeft + "px"); 249 | numImgFragmentCntDefaultLeft = -position.x; 250 | flag = false; 251 | } 252 | 253 | this.refresh = function () { 254 | _refresh(); 255 | } 256 | return this; 257 | 258 | }; -------------------------------------------------------------------------------- /2侧边栏/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "my-icon"; 3 | src: url('iconfont.eot?t=1507649649871'); /* IE9*/ 4 | src: url('iconfont.eot?t=1507649649871#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1507649649871') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1507649649871#my-icon') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .my-icon { 11 | font-family:"my-icon" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-touxiang:before { content: "\e62c"; } 19 | 20 | .icon-crmtubiaohuaban35fuben3773:before { content: "\e85f"; } 21 | 22 | .icon-shengyuliuliang:before { content: "\e650"; } 23 | 24 | .icon-user:before { content: "\e61a"; } 25 | 26 | .icon-mianfeishiyong:before { content: "\e618"; } 27 | 28 | .icon-tuichu:before { content: "\e60b"; } 29 | 30 | .icon-iconset0253:before { content: "\e698"; } 31 | 32 | .icon-iconset0308:before { content: "\e6cf"; } 33 | 34 | .icon-chongzhi:before { content: "\e600"; } 35 | 36 | .icon-chongzhi1:before { content: "\e676"; } 37 | 38 | .icon-dunpai:before { content: "\e620"; } 39 | 40 | .icon-chongzhi-copy:before { content: "\e78e"; } 41 | 42 | .icon-chongzhi4:before { content: "\e6b4"; } 43 | 44 | .icon-shezhichilun:before { content: "\e62b"; } 45 | 46 | .icon-chongzhi2:before { content: "\e6c7"; } 47 | 48 | .icon-caidanlanaipinpai:before { content: "\e68f"; } 49 | 50 | .icon-chongzhi5:before { content: "\e67a"; } 51 | 52 | .icon-alarm:before { content: "\e604"; } 53 | 54 | .icon-power:before { content: "\e65c"; } 55 | 56 | .icon-users:before { content: "\e685"; } 57 | 58 | .icon-worldwide:before { content: "\e690"; } 59 | 60 | .icon-5daqu:before { content: "\e669"; } 61 | 62 | .icon-touxiang1:before { content: "\e60e"; } 63 | 64 | .icon-yonghu:before { content: "\e616"; } 65 | 66 | .icon-daochuExcelbiaoge:before { content: "\e61d"; } 67 | 68 | .icon-chilun:before { content: "\e611"; } 69 | 70 | .icon-qunzu:before { content: "\e696"; } 71 | 72 | .icon-shousuodaohangicon:before { content: "\e6bc"; } 73 | 74 | .icon-jiantou:before { content: "\e612"; } 75 | 76 | .icon-jiantouxiangyou:before { content: "\e621"; } 77 | 78 | .icon-jiantouxiangshang:before { content: "\e622"; } 79 | 80 | .icon-jiantouxiangzuo:before { content: "\e623"; } 81 | 82 | -------------------------------------------------------------------------------- /8转盘抽奖/js/lib/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp={scope:{}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(e,r,p){if(p.get||p.set)throw new TypeError("ES3 does not support getters and setters.");e!=Array.prototype&&e!=Object.prototype&&(e[r]=p.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_"; 6 | $jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.symbolCounter_=0;$jscomp.Symbol=function(e){return $jscomp.SYMBOL_PREFIX+(e||"")+$jscomp.symbolCounter_++}; 7 | $jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var e=$jscomp.global.Symbol.iterator;e||(e=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[e]&&$jscomp.defineProperty(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(e){var r=0;return $jscomp.iteratorPrototype(function(){return rb&&(b+=1);1b?c:b<2/3?a+(c-a)*(2/3-b)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a);a=parseInt(d[1])/360;var b=parseInt(d[2])/100,f=parseInt(d[3])/100,d=d[4]||1;if(0==b)f=b=a=f;else{var n=.5>f?f*(1+b):f+b-f*b,k=2*f-n,f=c(k,n,a+1/3),b=c(k,n,a);a=c(k,n,a-1/3)}return"rgba("+ 13 | 255*f+","+255*b+","+255*a+","+d+")"}function y(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a))return a[2]}function V(a){if(-1=g.currentTime)for(var G=0;G=w||!k)g.began||(g.began=!0,f("begin")),f("run");if(q>n&&q=k&&r!==k||!k)b(k),x||e();f("update");a>=k&&(g.remaining?(t=h,"alternate"===g.direction&&(g.reversed=!g.reversed)):(g.pause(),g.completed||(g.completed=!0,f("complete"),"Promise"in window&&(p(),m=c()))),l=0)}a=void 0===a?{}:a;var h,t,l=0,p=null,m=c(),g=fa(a);g.reset=function(){var a=g.direction,c=g.loop;g.currentTime= 25 | 0;g.progress=0;g.paused=!0;g.began=!1;g.completed=!1;g.reversed="reverse"===a;g.remaining="alternate"===a&&1===c?2:c;b(0);for(a=g.children.length;a--;)g.children[a].reset()};g.tick=function(a){h=a;t||(t=h);k((l+h-t)*q.speed)};g.seek=function(a){k(d(a))};g.pause=function(){var a=v.indexOf(g);-1=c&&0<=b&&1>=b){var e=new Float32Array(11);if(c!==d||b!==f)for(var k=0;11>k;++k)e[k]=a(.1*k,c,b);return function(k){if(c===d&&b===f)return k;if(0===k)return 0;if(1===k)return 1;for(var h=0,l=1;10!==l&&e[l]<=k;++l)h+=.1;--l;var l=h+(k-e[l])/(e[l+1]-e[l])*.1,n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(.001<=n){for(h=0;4>h;++h){n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(0===n)break;var m=a(l,c,b)-k,l=l-m/n}k=l}else if(0=== 29 | n)k=l;else{var l=h,h=h+.1,g=0;do m=l+(h-l)/2,n=a(m,c,b)-k,0++g);k=m}return a(k,d,f)}}}}(),Q=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var c="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25, 30 | .46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},b={linear:A(.25,.25,.75,.75)},f={},e;for(e in d)f.type=e,d[f.type].forEach(function(a){return function(d,f){b["ease"+a.type+c[f]]=h.fnc(d)? 31 | d:A.apply($jscomp$this,d)}}(f)),f={type:f.type};return b}(),ha={css:function(a,c,d){return a.style[c]=d},attribute:function(a,c,d){return a.setAttribute(c,d)},object:function(a,c,d){return a[c]=d},transform:function(a,c,d,b,f){b[f]||(b[f]=[]);b[f].push(c+"("+d+")")}},v=[],B=0,ia=function(){function a(){B=requestAnimationFrame(c)}function c(c){var b=v.length;if(b){for(var d=0;db&&(c.duration=d.duration);c.children.push(d)});c.seek(0);c.reset();c.autoplay&&c.restart();return c};return c};q.random=function(a,c){return Math.floor(Math.random()*(c-a+1))+a};return q}); -------------------------------------------------------------------------------- /2侧边栏/侧边栏.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 侧边栏 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |
    17 | 26 | 27 |
    28 |
    29 |
    30 |
    31 |
    32 | 374 |
    375 |
    376 |
    377 | 378 |
    379 | 380 | 381 | 382 | 383 | 384 | -------------------------------------------------------------------------------- /5图片转正验证/js/jqRotateVerify.js: -------------------------------------------------------------------------------- 1 | ;(function(undefined) { 2 | "use strict" 3 | var _global; 4 | 5 | //判断是否为 数组 6 | function isArray(o){ 7 | return Object.prototype.toString.call(o)=='[object Array]'; 8 | } 9 | //随机数 10 | function getRandomNumber(a,b) { 11 | return Math.round(Math.random()*(b- a) + a) 12 | } 13 | //获取随机图片 14 | function getRandomImg(imgArr) { 15 | return imgArr[getRandomNumber(0,imgArr.length-1)] 16 | } 17 | //判断 是否处于动画状态 18 | function ifAnimate(ele) { 19 | if(ele.is(":animated")){ 20 | return true 21 | }else{ 22 | return false 23 | } 24 | } 25 | //获取元素的left值 26 | function getEleCssLeft($ele) { 27 | return parseInt($ele.css('left')); 28 | } 29 | 30 | var RotateVerify = function (ele,opt) { 31 | this.$ele = $(ele); 32 | //默认参数 33 | this.defaults = { 34 | initText:'滑动将图片转正', 35 | slideImage:'', 36 | slideAreaNum:10, 37 | getSucessState:function(){ 38 | 39 | } 40 | } 41 | this.settings = $.extend({}, this.defaults, opt); 42 | this.init(); 43 | } 44 | RotateVerify.prototype = { 45 | constructor: this, 46 | init:function () { 47 | this.verifyState = false; 48 | this.disLf = 0; 49 | this.initDom(); 50 | this.initCanvasImg(); 51 | this.initMouse(); 52 | this._touchstart(); 53 | this._touchend(); 54 | }, 55 | initDom:function () { 56 | var slideDom = $('
    '+ 57 | '
    '+ 58 | ''+ 59 | '
    '+ 60 | '
    '+ 61 | '
    '+ 62 | '
    '+ 63 | '

    '+ this.settings.initText +'

    '+ 64 | '
    '+ 65 | '
    '+ 66 | '
    '+ 67 | ''+ 68 | '
    '+ 69 | '
    '+ 70 | '
    '); 71 | this.$ele.append(slideDom); 72 | this.statusBg = this.$ele.find('.statusBg'); 73 | this.$slideDragWrap = this.$ele.find('.slideDragWrap'); 74 | this.$slideDragBtn = this.$ele.find('.slideDragBtn'); 75 | this.rotateCan = this.$ele.find('.rotateCan'); 76 | this.cTipsTxt = this.$ele.find('.cTipsTxt'); 77 | this.controlBorWrap = this.$ele.find('.controlBorWrap'); 78 | this.xPos = this.rotateCan[0].width/2; 79 | this.yPos = this.rotateCan[0].height/2; 80 | this.aveRot = Math.round((360/(this.$slideDragWrap.width() - this.$slideDragBtn.outerWidth())) * 100 )/100; 81 | this.rotateImgCan = this.rotateCan[0].getContext('2d'); 82 | this.slideImage = document.createElement('img'); 83 | this.setAttrSrc(); 84 | }, 85 | initCanvasImg:function () { 86 | this.randRot = getRandomNumber(30,270); 87 | this.sucLenMin = (360 - this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360; 88 | this.sucLenMax = (360 + this.settings.slideAreaNum - this.randRot) * (this.$slideDragWrap.width() - this.$slideDragBtn.width())/360; 89 | this.disLf = 0; 90 | this.initImgSrc(); 91 | }, 92 | initImgSrc:function(){ 93 | var _this = this; 94 | _this.slideImage.src = _this.slideImage.getAttribute('data-src'); 95 | _this.setAttrSrc(); 96 | _this.slideImage.onload = function(){ 97 | _this.slideImage.style.width = '200px'; 98 | _this.slideImage.style.height = '200px'; 99 | _this.drawImgCan(); 100 | } 101 | }, 102 | drawImgCan:function(val){ 103 | var _this = this; 104 | _this.rotateImgCan.beginPath(); 105 | _this.rotateImgCan.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false ); 106 | _this.rotateImgCan.closePath(); 107 | _this.rotateImgCan.clip(); 108 | _this.rotateImgCan.save(); 109 | _this.rotateImgCan.clearRect(0,0,200,200); 110 | _this.rotateImgCan.translate(_this.xPos, _this.yPos); 111 | _this.rotateImgCan.rotate(this.randRot * Math.PI / 180 + _this.disLf * _this.aveRot * Math.PI / 180); 112 | _this.rotateImgCan.translate(-_this.xPos, -_this.yPos); 113 | _this.rotateImgCan.drawImage( _this.slideImage, _this.xPos - 200 / 2, _this.yPos - 200 / 2,200,200); 114 | _this.rotateImgCan.restore(); 115 | }, 116 | initMouse:function () { 117 | var _this = this ; 118 | var ifThisMousedown = false; 119 | _this.$slideDragBtn.on('mousedown',function (e) { 120 | if(_this.verifyState){ 121 | return false; 122 | } 123 | if(_this.dragTimerState){ 124 | return false; 125 | } 126 | if(ifAnimate(_this.$slideDragBtn)){ 127 | return false; 128 | } 129 | ifThisMousedown = true; 130 | var positionDiv = $(this).offset(); 131 | var distenceX = e.pageX - positionDiv.left; 132 | var disPageX = e.pageX; 133 | _this.$slideDragBtn.addClass('control-btn-active'); 134 | _this.controlBorWrap.addClass('control-bor-active'); 135 | $(document).mousemove(function (e) { 136 | if(!ifThisMousedown){ 137 | return false; 138 | } 139 | var x = e.pageX - disPageX; 140 | if(x<0){ 141 | x=0; 142 | }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){ 143 | x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth(); 144 | } 145 | _this.$slideDragBtn.css({ 146 | 'left':x + 'px' 147 | }) 148 | _this.controlBorWrap.css({ 149 | 'width':x + _this.$slideDragBtn.width() + 'px' 150 | }) 151 | _this.disLf = x; 152 | _this.drawImgCan(); 153 | e.preventDefault(); 154 | }) 155 | }); 156 | $(document).on('mouseup',function(){ 157 | if(!ifThisMousedown){ 158 | return false; 159 | } 160 | ifThisMousedown = false; 161 | if(_this.verifyState){ 162 | return false; 163 | } 164 | $(document).off('mousemove'); 165 | _this.$slideDragBtn.removeClass('control-btn-active'); 166 | _this.controlBorWrap.removeClass('control-bor-active'); 167 | if(_this.sucLenMin <= _this.disLf && _this.disLf <= _this.sucLenMax){ 168 | _this.$slideDragBtn.addClass('control-btn-suc'); 169 | _this.controlBorWrap.addClass('control-bor-suc'); 170 | _this.statusBg.fadeIn(); 171 | _this.statusBg.addClass('suc-bg'); 172 | _this.verifyState = true; 173 | _this.cTipsTxt.text(""); 174 | if(_this.settings.getSuccessState){ 175 | _this.settings.getSuccessState(_this.verifyState); 176 | } 177 | }else{ 178 | _this.$slideDragBtn.addClass('control-btn-err'); 179 | _this.controlBorWrap.addClass('control-bor-err'); 180 | _this.$slideDragWrap.addClass('control-horizontal'); 181 | _this.dragTimerState = true; 182 | _this.verifyState = false;; 183 | _this.statusBg.fadeIn(); 184 | _this.statusBg.addClass('err-bg'); 185 | _this.$slideDragBtn.delay(700).animate({ 186 | left:'0px' 187 | },function(){ 188 | _this.dragTimerState = false; 189 | _this.$slideDragWrap.removeClass('control-horizontal'); 190 | _this.$slideDragBtn.removeClass('control-btn-err'); 191 | _this.statusBg.removeClass('err-bg'); 192 | _this.statusBg.fadeOut(); 193 | _this.refreshSlide(); 194 | }) 195 | _this.controlBorWrap.delay(700).animate({ 196 | width:_this.$slideDragBtn.width() + 'px' 197 | },function(){ 198 | _this.controlBorWrap.removeClass('control-bor-err'); 199 | }); 200 | } 201 | }); 202 | }, 203 | _touchstart:function(){ 204 | var _this = this; 205 | _this.$slideDragBtn.on('touchstart',function(e){ 206 | _this.$slideDragBtn.css('pointer-events','none'); 207 | setTimeout(function(){_this.$slideDragBtn.css('pointer-events','all')},400) 208 | if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn) || _this.verifyState){ 209 | return false; 210 | } 211 | if(getEleCssLeft(_this.$slideDragBtn) == 0){ 212 | _this.touchX = e.originalEvent.targetTouches[0].pageX; 213 | _this.$slideDragBtn.addClass('control-btn-active'); 214 | _this.controlBorWrap.addClass('control-bor-active'); 215 | _this._touchmove(); 216 | } 217 | }) 218 | }, 219 | _touchmove:function(){ 220 | var _this = this; 221 | _this.$slideDragBtn.on('touchmove',function(e){ 222 | e.preventDefault(); 223 | if(_this.dragTimerState || ifAnimate(_this.$slideDragBtn)){ 224 | return false; 225 | }else{ 226 | var x = e.originalEvent.targetTouches[0].pageX - _this.touchX; 227 | if(x<0){ 228 | x=0; 229 | }else if(x >=(_this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth())){ 230 | x = _this.$slideDragWrap.width()-_this.$slideDragBtn.outerWidth(); 231 | } 232 | _this.$slideDragBtn.css({ 233 | 'left':x + 'px' 234 | }) 235 | _this.controlBorWrap.css({ 236 | 'width':x + _this.$slideDragBtn.width() + 'px' 237 | }) 238 | _this.disLf = x; 239 | _this.drawImgCan(); 240 | } 241 | }) 242 | }, 243 | _touchend:function(){ 244 | var _this = this; 245 | _this.$slideDragBtn.on('touchend',function(){ 246 | _this.$slideDragBtn.off('touchmove'); 247 | _this.$slideDragBtn.removeClass('control-btn-active'); 248 | _this.controlBorWrap.removeClass('control-bor-active'); 249 | if((_this.sucLenMin) <= _this.disLf && _this.disLf <= (_this.sucLenMax)){ 250 | _this.verifyState = true; 251 | _this.$slideDragBtn.addClass('control-btn-suc'); 252 | _this.controlBorWrap.addClass('control-bor-suc'); 253 | _this.statusBg.fadeIn(); 254 | _this.statusBg.addClass('suc-bg'); 255 | _this.cTipsTxt.text(""); 256 | if(_this.settings.getSuccessState){ 257 | _this.settings.getSuccessState(_this.verifyState); 258 | } 259 | }else{ 260 | if(!ifAnimate(_this.$slideDragBtn)){ 261 | _this.dragTimerState = true; 262 | _this.verifyState = false; 263 | _this.statusBg.fadeIn(); 264 | _this.statusBg.addClass('err-bg'); 265 | _this.$slideDragBtn.addClass('control-btn-err'); 266 | _this.controlBorWrap.addClass('control-bor-err'); 267 | _this.$slideDragWrap.addClass('control-horizontal'); 268 | _this.$slideDragBtn.delay(700).animate({ 269 | left:'0px' 270 | },function(){ 271 | _this.$slideDragWrap.removeClass('control-horizontal'); 272 | _this.$slideDragBtn.removeClass('control-btn-err'); 273 | _this.statusBg.removeClass('err-bg'); 274 | _this.statusBg.fadeOut(); 275 | _this.dragTimerState = false; 276 | _this.refreshSlide(); 277 | }) 278 | _this.controlBorWrap.delay(700).animate({ 279 | width:_this.$slideDragBtn.width() + 'px' 280 | },function(){ 281 | _this.controlBorWrap.removeClass('control-bor-err'); 282 | }); 283 | }else{ 284 | return false; 285 | } 286 | } 287 | }) 288 | }, 289 | setAttrSrc:function(){ 290 | if(isArray(this.settings.slideImage)){ 291 | this.slideImageSrc = getRandomImg(this.settings.slideImage); 292 | }else{ 293 | this.slideImageSrc = this.settings.slideImage; 294 | } 295 | this.slideImage.setAttribute("data-src",this.slideImageSrc); 296 | }, 297 | refreshSlide:function(){ 298 | var _this = this; 299 | _this.initCanvasImg(); 300 | }, 301 | resetSlide:function(){ 302 | var _this = this; 303 | _this.$slideDragBtn.css({ 304 | left:'0px' 305 | }) 306 | _this.controlBorWrap.css({ 307 | width:_this.$slideDragBtn.width() + 'px' 308 | }) 309 | _this.controlBorWrap.removeClass('control-bor-suc'); 310 | _this.dragTimerState = false; 311 | _this.verifyState = false;; 312 | _this.$slideDragBtn.removeClass('control-btn-suc'); 313 | _this.$slideDragWrap.removeClass('control-horizontal'); 314 | _this.statusBg.fadeOut(); 315 | _this.statusBg.removeClass('suc-bg'); 316 | _this.cTipsTxt.text(_this.settings.initText); 317 | _this.refreshSlide(); 318 | } 319 | } 320 | var inlineCss = '*{margin:0;padding:0;box-sizing:border-box;}.rotateverify-contaniner{width:200px;margin:0 auto;}@-webkit-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-ms-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-moz-keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes rotateverifyHorizontal{0%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}10%,30%,50%,70%,90%{-webkit-transform:translate(-1px,0);-moz-transform:translate(-1px,0);transform:translate(-1px,0)}20%,40%,60%,80%{-webkit-transform:translate(1px,0);-moz-transform:translate(1px,0);transform:translate(1px,0)}100%{-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);transform:translate(0px,0)}}.rotateverify-contaniner .control-horizontal{-webkit-animation:rotateverifyHorizontal .6s .2s ease both;-moz-animation:rotateverifyHorizontal .6s .2s ease both;animation:rotateverifyHorizontal .6s .2s ease both}.rotateverify-contaniner .rotate-can-wrap{width:200px;height:200px;position:relative;}.rotateverify-contaniner .status-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.3);background-repeat:no-repeat;background-position:center center;border-radius:100%;display:none;}.rotateverify-contaniner .status-bg.suc-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABWCAYAAAAJ3CLTAAAAAXNSR0IArs4c6QAABFZJREFUeAHtncuO00AQRWdALFkiXsM0Az/FArGIhPg3EAvEazEL4AdY824eQsBXhNsTW1gmiduu6vct6cp20qmuuiftOMkoc3DAqM6B9Xq9gp5Dvzq5/VV1jbKhjQOAewSdQrvC3XeVflXkAIAeQ593ER/cflpR22230kH/MoA7tbs637Zl5XfvoKOL19DJjG4uEPwMt3IbuhC6a+PiudyaYT1+Dgign01A8H4+ZzVKCh3NvCX4rJBOF6MA3U3yeHomjsjGAQcdmnP1juH/Bd/OZUPUoxDg04DunjTXPabjkBwcUITu3voxSnCA0EugpFwjoSsbWkI6Qi+BknKNStDdFzZ8TVdmEyydIvQbwYpkYl0HCF3XzyKyEXoRmHSLJHRdP4vIRuhFYNItktB1/SwiG6EXgUm3SEA3kPRbNvc+nW/ZdNGEy9ZBt9hKgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCQIXR9NuIwgbSALSYLQwyHSzwzSBrKQJAhdH024jCBtIAtJgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCTiQ0e1d6CH0KdOj9xt+hbVlxE+GegrJAnne7yPYTHZJejJnordfZfrw6XTEbwxkIUkERe6ax3Vut9ImYp3GMCf0Rg9V+CJgSwkiSTQ786omPAH4OGbgSwkifjQu9X+dGbVhL85Sxr4Zmd6Nx6eBnoH/ue4Go/jpuHDHwNZSBIO+tHgBBJ3F5P/WVh9k/DhlYEsJIm00LsV/1LQQVPw4ZOBLCSJ9NA78A8kXeCx76Hqr/bRo4E03qenO70PX0zQzCH0BpJE1SsfxhjIQpLIY6WP4Bt09EPSFR5b5cpHXwaqZ6UPwXen/NtoUAq/qpUPP25WDb1/EqBJDfhVrPxmoBN+78DZR9htrPR/LW/2Wl75za10wm94pe+A/x2rQBJFvOajwTZP72Po/TEMcRd8VcMn9J72aFszfEIfwR4fwqBbkMbKvzbOneqY0D2drwk+oXtC74fVAJ/Qe5oztyXDV4L+EXny+JZtJjvx8BLhE7oY+yZBSfAJXQl6n6YE+ITe01Le5gyf0JVhj9PlCF8ROv+dxxj48Dgn+IQ+JBNhPwf4hB4B9LYpUsIn9G1EIt6mBP8D8nh/tk/oEQHvmyomfMx1Akn/GtZ9IscLuX1Qfe+LAb+D/g1bSRC6L1TfcaCh8ZXu1tM+cruVTui+MGKPCwGf0GNTXDifJnxCXwgh1cM6+NJTszvta+TghVzMJ4ISfKRZHLyQiwl8OBeQaVyULSFP6EMQKfYTwCf0FKC3zRkRvrsu4Gv6NgipbosAn9BTwZ2aNyB8Qp8yP/X9AeATemqovvMrwid0X9NzGacAn9BzgTm3DgF8Qp9rdm7jF8An9NwgLq1nBnxCX2pyro8D/GPoFbQr3M+yXsm1ftYlcABgD6H70AvoN+R+dfsZdE+QttmH/gVo1WKZD73PfwAAAABJRU5ErkJggg==);}.rotateverify-contaniner .status-bg.err-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABqCAYAAABUIcSXAAAAAXNSR0IArs4c6QAABOhJREFUeAHt3F1O3DAUBeCZ7qJQUVXdQ6U+tUtBILq79okKUEGwAlaACO0DFV1C+0DPzXBnMpnYiR0nsZ1jyXUm/ok5H8wwBbJYVMrz8/MR6nfU3y9Vjo8qQ3gYOAHke4h6ivqIKrlL5seoy51L4eRr1B+opiJ9+zsTecI7AeS5h3phChznr2TM1gVwwoaka93j4GBrIh94JYAc36DeabCWVrBWX1k4kKe7roVYXjSbSQi6K5KanJSz8UieE10KsTa5Ox0hZFckcTlXKHkBcy3EciJaLBCwD5K4PMmlXjleT4e/w8ENFuFrliZiaQVJ8kJ9bxlm7RKoW+sIcyexzNmsewIglT4C9XW9qvsBsSyZBUCS1Tc+WLDLt+cYZix8zaqBISnf16RqyJtvz2V99OyjSth9CrFesBBiCKRC1qn5l1gH6CDWTjJuJwIivTVeGRchljGd9o5RkHQbxNIk3NpRkXRrxNIkurWTIOnWiKVJ2NtJkXRrxNIkmtsokHRrxNIkttuokHRrxNIkVm2USLpFYiWARKyEkOaOFfXTneLU27k9DSaJpGhzwUoaaS5YWSDljpUVUq5YWSLlhpU1Ui5Ys0BKHWtWSKlizRIpNaxZI6WCRSSVQoswovyFGSJVkPQwNiwiqUxDGwsWkRpw6qemxiJSXcTyeCosIllQTF1jYxHJJNHh/FhYROqA0TZkaCwitQk49A+FRSQHhK5DQ2MRqWvyHuMCYn3AWneofUqByea/T/L4+LKagnBC/HfT3z5CmFugEqntMwshhcDCMl6lwCwitSFpP8KaAotICuDSjoxFJBec+tiRsIhUD97n8cBYRPJBMc0ZCItIpsD7nA+MRaQ+GG1zgSVvZvu+T5L5H9uuxX7PBBBuiNvWYJmy3ONf3sLO08I4DaGGRFpRrW4nRCxj6o4dAyERy9HBOnxgJGJZ0+/YORISsTp6NA4bGYlYjQotJydCih7L9y7NLXH7dQsSZt6get/NGHP/ofqWaO+RGw1UIKQHCH1CLXylMC9arB4fU5ipgZ7uCqxT/tAPbYifZ/FNcZU3NJKuTSxNIkA7FJJujViaRI92aCTdGrE0CY92LCTdGrE0CYd2bCTdGrE0iQ7tVEi6NWJpEpZ2aiTdGrE0iYY2FiTdGrE0iUobG5JujViaBNpYkXSLxEoAiVgJIc0aK/anO8Wpt7N6GkwVSdFmgZU60iywckHKGis3pCyxckXKCit3pCyw5oKUNNbckJLEmitSUlhzR0oCi0jKtGqRR3y/N0ikbSR9FBUWkZSluY0Ci0jNOPWzk2IRqc5hfzwJFpHsKKbeUbGIZGLodn4ULCJ1w2gbNSgWFt9D5e092xQ69gfE2t+6JBa+QO1TCkzmnSMrqSKPEG+KL9dLYsFD1D6lwGQirRPdHCCXEFjH5YpY7BTVtxSYSKSNzc4R8umLdaZQj55KRNphaT7RE+tJVpW/il82L289+4Dez8vl8qd1FDvLBJDTL8kLtShPuP1T+gjUrdu8xQPGE8kxtB5YpY9AfXO45gPGEskhsOpQT6yVD54/l6hXqG2lwAB+41BN3vMYOXb9BuMaYzcvTXggb3htWNInt79hCZQA8txHvUQ1lWt0bL/hlWvjpHxlnaCeoz69VDmWcxvVQBvlMuvMj5Hv2Uvef9BK5l9QmXmKnyT/AS/pCbJI4duRAAAAAElFTkSuQmCC);}.rotateverify-contaniner .control-wrap{width:200px;position:relative;height:42px;border:1px solid #e0e0e0;clear:both;border-radius:42px;margin-top:5px;background-color:#f7f7f7;}.rotateverify-contaniner .control-wrap .control-tips{position:relative;width:100%;height:100%;}.rotateverify-contaniner .c-tips-txt{height:40px;line-height:40px;position:absolute;width:100%;text-align:center;top:0;left:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.rotateverify-contaniner .control-btn{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:40px;border:1px solid #e0e0e0;background-color:#fff;}.rotateverify-contaniner .control-bor-wrap{position:absolute;left:0;top:0;width:40;height:40px;border-radius:40px;border:1px solid transparent;}.rotateverify-contaniner .control-bor-active{border:1px solid #1a91ed;}.rotateverify-contaniner .control-bor-err{border:1px solid #e01116;}.rotateverify-contaniner .control-bor-suc{border:1px solid limegreen;}.rotateverify-contaniner .control-btn-active{background:#1a91ed;}.rotateverify-contaniner .control-btn-err{background:#e01116;}.rotateverify-contaniner .control-btn-suc{background-color:limegreen;}.rotateverify-contaniner .control-btn-ico{display:block;width:20px;height:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAYAAAATIfj2AAAAAXNSR0IArs4c6QAABAdJREFUaAXtWUloU0EYbhaNTQWhItiIBz2kaYkHodWDBxEUa9OFIBHxoOnB3oSCgoqCKdijC3rpQTBCcYsQaUsE0eJBRIXiQZEuehJzUxCa1mIWvxFHpsPMvCUzh8oLlDfzzbxvvn+Zmb9JQ4P38TzgecDzgOeBVeQBn0prKpUKLC0tXa7VagNkns/nu93Y2Hgxl8tVVO9ZjZniJesGVYsvLi6OwJizdA7a54BtRv+PgRR3+jTFS3T4LcSk+XEYle7p6TnJ4w77pngtDRLqrFarN/r6+nYKB+sAdfAqI4Ro3JHoW1epVB5hL2yQjCthU7xkUaVBgUBgGAfBB5E6iNpeKpWyojErzBQvWTegWnxubu5XPB5/jlRIY15IMDcWjUZL8/PzrwRjUsgUL1lQeWxTRYlEIoWIPKR97lmGx/dNTEy85HDLrgleZYSoIkTgY2trazOM2k0x5knStguRHJuZmSkxuGXTBK9yD7GKIpHIGfRfsxhtw9DI8vLyvUwmY5uPvqub11aEyOLT09PV9vb2pxB/HN0wFcQ8txWLxSC8PsVglk3dvLb2EKuqu7u7C/0C/kTv1rCfEthPT9h37LR18dqOEBWFCHzCyUZSay/FmKcPETwUi8Xu4yT7weCWTV28jnOeKOvs7CT30zOJymYc8zlcumsl41JYB68rg7D5q+Fw+BiM+ipShyjtQgF6RTSmwnTwivaBas0VY6jn9pTL5RcAhVW73+8/Ojk5+WDFSzY69fA63kOsntnZ2S+4n0qIyEEWZ9pdbW1tOcz7zmCWzXp4XaUcqwgRuIrUy7MYbcPQ9ShiM7Tv5OmWt26DiEik1hCMqooEw6gdItwO5oZXi0E41a5DuJALhr63I140xw2vUISIXIahwDwNY5KicRizgIs2Ixqzwtzy/nennOsI4eLchA1PjmThkY3o3HRzZNfL68ogUlXj4ryLVNsiSh0Y8xYXL6nOHX108Lq6h5qamoZhzIBILYz5htNpfz6fd3T3EC4dvI73kK6qmHeGLl5HKdff378VERiDGKEjEJkRN/866OS1bdDg4OAa1G05pNpG3rt/+1MdHR2XJGNSWDev7T3U0tJyDcYcFilD1IqhUOjA6OjogmhchenmFaYOLwD5fQSYrGp2/a2PCV7LlEsmk1FE4BZvJO1j7Lybr7BM8Soj1NvbG0Y99QapFqcGcM/HhUJBWPZw81Z0TfGSRYS3PF0dlQDZ5DJjPuPeSNO5Tp6meIkGZcohnU5IhP4MBoMp/PDl6IsQymWK19IgKoB/ooI+NT4+/o7H6+3r4FVGCAKzvEh4N4tDQHpI8PMlfVO86j2EAvMCfmPFmfCvbssSTCLSNmyK17YAb6LnAc8DngdWrQd+A6CJYdIFu4L0AAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;margin:10px;}.rotateverify-contaniner .control-btn-active .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAYAAAATIfj2AAAAAXNSR0IArs4c6QAAAoRJREFUaAXtmb9OVFEQxjcQKGyspIPK2FvrA+gDAC8AL6C+gGIidvx5ABtqeABCDZSEFjtNLLTRwoLo+jvZJcBhvpnrLlPs5kzyhT3z5/vOzM1y757b6zVrE2gTaBNoE5iWCfT7/VnwAXwbonyeHbe/wgHunTfcF6KboLZPYWGQAGEKbyDb6yFcroxl62GxkwBhCq8jOQg5wr+JPQ0JREIWr5C7diP8ESj7TODhdXb3T9Sl8IY7QPgBOAfKDkISIwGyFF5D6q4L8Sfgp+oI/5u7VbEnizdWJgPxZaehS2LPOxFVSVm8lYy9RHzbaeorsQW70vdm8fqqRBGeA8dA2RGBmZCoSqAmhbeSsZeIL4LvQNl7u9L3QpbC66sOo4i/AH9FR8X/shNRlZTFW8nYS8TfioaK+wdYsit9L3UpvL4qUYRnwCFQdkpgPiSqEqhJ4a1k7CXij8AXoGzXrvS9kKXw+qrDKOLPQLkPKVvtRFQlQZbCW8nYS8RfqW7w/wKP7Urfm8Xrqw6jiO8DZXudSIwkCFN4DanbLoSXwB/R0dnt7O6rUXj/+84utrOFX3Gdi5ou7ixerc0UX4srU9zjfIdSeHUnRNhwyn+jLN6omeh+seMSiCDNpPAKuYEb0ZQ7ehav20wJIvwOKCtP46M+y6Xwug2x2el52qaZ6HfLhjsNEcziFXIDN6Lll+UJUHZEQN2LJDc1KbxS8CqA8PScKdDMClBWnrZHPfVJ4b26COZfNjs953I0k3LCmcVrXpGbToS9M+gL4hln2yPz3ty7+ZkNq9ceE/v2QTW0Zk6go9MZ1Fi8oTzCm6C2iX6DV78LLQ1mvGO9F97wCrWENoE2gTaBiZ/AP+8/LMb6T9MeAAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-err .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABqCAYAAABUIcSXAAAAAXNSR0IArs4c6QAABOhJREFUeAHt3F1O3DAUBeCZ7qJQUVXdQ6U+tUtBILq79okKUEGwAlaACO0DFV1C+0DPzXBnMpnYiR0nsZ1jyXUm/ok5H8wwBbJYVMrz8/MR6nfU3y9Vjo8qQ3gYOAHke4h6ivqIKrlL5seoy51L4eRr1B+opiJ9+zsTecI7AeS5h3phChznr2TM1gVwwoaka93j4GBrIh94JYAc36DeabCWVrBWX1k4kKe7roVYXjSbSQi6K5KanJSz8UieE10KsTa5Ox0hZFckcTlXKHkBcy3EciJaLBCwD5K4PMmlXjleT4e/w8ENFuFrliZiaQVJ8kJ9bxlm7RKoW+sIcyexzNmsewIglT4C9XW9qvsBsSyZBUCS1Tc+WLDLt+cYZix8zaqBISnf16RqyJtvz2V99OyjSth9CrFesBBiCKRC1qn5l1gH6CDWTjJuJwIivTVeGRchljGd9o5RkHQbxNIk3NpRkXRrxNIkurWTIOnWiKVJ2NtJkXRrxNIkmtsokHRrxNIkttuokHRrxNIkVm2USLpFYiWARKyEkOaOFfXTneLU27k9DSaJpGhzwUoaaS5YWSDljpUVUq5YWSLlhpU1Ui5Ys0BKHWtWSKlizRIpNaxZI6WCRSSVQoswovyFGSJVkPQwNiwiqUxDGwsWkRpw6qemxiJSXcTyeCosIllQTF1jYxHJJNHh/FhYROqA0TZkaCwitQk49A+FRSQHhK5DQ2MRqWvyHuMCYn3AWneofUqByea/T/L4+LKagnBC/HfT3z5CmFugEqntMwshhcDCMl6lwCwitSFpP8KaAotICuDSjoxFJBec+tiRsIhUD97n8cBYRPJBMc0ZCItIpsD7nA+MRaQ+GG1zgSVvZvu+T5L5H9uuxX7PBBBuiNvWYJmy3ONf3sLO08I4DaGGRFpRrW4nRCxj6o4dAyERy9HBOnxgJGJZ0+/YORISsTp6NA4bGYlYjQotJydCih7L9y7NLXH7dQsSZt6get/NGHP/ofqWaO+RGw1UIKQHCH1CLXylMC9arB4fU5ipgZ7uCqxT/tAPbYifZ/FNcZU3NJKuTSxNIkA7FJJujViaRI92aCTdGrE0CY92LCTdGrE0CYd2bCTdGrE0iQ7tVEi6NWJpEpZ2aiTdGrE0iYY2FiTdGrE0iUobG5JujViaBNpYkXSLxEoAiVgJIc0aK/anO8Wpt7N6GkwVSdFmgZU60iywckHKGis3pCyxckXKCit3pCyw5oKUNNbckJLEmitSUlhzR0oCi0jKtGqRR3y/N0ikbSR9FBUWkZSluY0Ci0jNOPWzk2IRqc5hfzwJFpHsKKbeUbGIZGLodn4ULCJ1w2gbNSgWFt9D5e092xQ69gfE2t+6JBa+QO1TCkzmnSMrqSKPEG+KL9dLYsFD1D6lwGQirRPdHCCXEFjH5YpY7BTVtxSYSKSNzc4R8umLdaZQj55KRNphaT7RE+tJVpW/il82L289+4Dez8vl8qd1FDvLBJDTL8kLtShPuP1T+gjUrdu8xQPGE8kxtB5YpY9AfXO45gPGEskhsOpQT6yVD54/l6hXqG2lwAB+41BN3vMYOXb9BuMaYzcvTXggb3htWNInt79hCZQA8txHvUQ1lWt0bL/hlWvjpHxlnaCeoz69VDmWcxvVQBvlMuvMj5Hv2Uvef9BK5l9QmXmKnyT/AS/pCbJI4duRAAAAAElFTkSuQmCC) no-repeat center center;background-size:100% 100%;}.rotateverify-contaniner .control-btn-suc .control-btn-ico{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABWCAYAAAAJ3CLTAAAAAXNSR0IArs4c6QAABFZJREFUeAHtncuO00AQRWdALFkiXsM0Az/FArGIhPg3EAvEazEL4AdY824eQsBXhNsTW1gmiduu6vct6cp20qmuuiftOMkoc3DAqM6B9Xq9gp5Dvzq5/VV1jbKhjQOAewSdQrvC3XeVflXkAIAeQ593ER/cflpR22230kH/MoA7tbs637Zl5XfvoKOL19DJjG4uEPwMt3IbuhC6a+PiudyaYT1+Dgign01A8H4+ZzVKCh3NvCX4rJBOF6MA3U3yeHomjsjGAQcdmnP1juH/Bd/OZUPUoxDg04DunjTXPabjkBwcUITu3voxSnCA0EugpFwjoSsbWkI6Qi+BknKNStDdFzZ8TVdmEyydIvQbwYpkYl0HCF3XzyKyEXoRmHSLJHRdP4vIRuhFYNItktB1/SwiG6EXgUm3SEA3kPRbNvc+nW/ZdNGEy9ZBt9hKgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCQIXR9NuIwgbSALSYLQwyHSzwzSBrKQJAhdH024jCBtIAtJgtDDIdLPDNIGspAkCF0fTbiMIG0gC0mC0MMh0s8M0gaykCTiQ0e1d6CH0KdOj9xt+hbVlxE+GegrJAnne7yPYTHZJejJnordfZfrw6XTEbwxkIUkERe6ax3Vut9ImYp3GMCf0Rg9V+CJgSwkiSTQ786omPAH4OGbgSwkifjQu9X+dGbVhL85Sxr4Zmd6Nx6eBnoH/ue4Go/jpuHDHwNZSBIO+tHgBBJ3F5P/WVh9k/DhlYEsJIm00LsV/1LQQVPw4ZOBLCSJ9NA78A8kXeCx76Hqr/bRo4E03qenO70PX0zQzCH0BpJE1SsfxhjIQpLIY6WP4Bt09EPSFR5b5cpHXwaqZ6UPwXen/NtoUAq/qpUPP25WDb1/EqBJDfhVrPxmoBN+78DZR9htrPR/LW/2Wl75za10wm94pe+A/x2rQBJFvOajwTZP72Po/TEMcRd8VcMn9J72aFszfEIfwR4fwqBbkMbKvzbOneqY0D2drwk+oXtC74fVAJ/Qe5oztyXDV4L+EXny+JZtJjvx8BLhE7oY+yZBSfAJXQl6n6YE+ITe01Le5gyf0JVhj9PlCF8ROv+dxxj48Dgn+IQ+JBNhPwf4hB4B9LYpUsIn9G1EIt6mBP8D8nh/tk/oEQHvmyomfMx1Akn/GtZ9IscLuX1Qfe+LAb+D/g1bSRC6L1TfcaCh8ZXu1tM+cruVTui+MGKPCwGf0GNTXDifJnxCXwgh1cM6+NJTszvta+TghVzMJ4ISfKRZHLyQiwl8OBeQaVyULSFP6EMQKfYTwCf0FKC3zRkRvrsu4Gv6NgipbosAn9BTwZ2aNyB8Qp8yP/X9AeATemqovvMrwid0X9NzGacAn9BzgTm3DgF8Qp9rdm7jF8An9NwgLq1nBnxCX2pyro8D/GPoFbQr3M+yXsm1ftYlcABgD6H70AvoN+R+dfsZdE+QttmH/gVo1WKZD73PfwAAAABJRU5ErkJggg==) no-repeat center center;background-size:100% 100%;}' 321 | var styleObj = $( 322 | '' 323 | ) 324 | $('head').prepend(styleObj); 325 | _global = (function(){ return this || (0, eval)('this'); }()); 326 | if (typeof module !== "undefined" && module.exports) { 327 | module.exports = RotateVerify; 328 | } else if (typeof define === "function" && define.amd) { 329 | define(function(){return RotateVerify;}); 330 | } else { 331 | !('RotateVerify' in _global) && (_global.RotateVerify = RotateVerify); 332 | } 333 | }()); -------------------------------------------------------------------------------- /1商城分类导航/商城分类导航.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |
    14 |
    15 |

    商品分类

    16 | 1042 |
    1043 | 1072 |
    1073 |
    1074 |
    1075 | 1076 |
    1077 | 1124 |
    1125 | 1126 | 1127 | 1128 |
    1129 |
    1130 | 1131 | 1132 | 1146 | 1147 | 1148 | 1149 | --------------------------------------------------------------------------------