1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>留言板</title> 6 <style type="text/css"> 7 body, ul { 8 margin: 0; 9 padding: 0; 10 } 11 ul { 12 list-style: none; 13 } 14 </style> 15 <style type="text/css"> 16 .wrap { 17 width: 600px; 18 height: 165px; 19 margin: 20px auto; 20 border-radius: 4px; 21 border: 1px solid #ddd; 22 padding: 0 10px; 23 } 24 25 .wrap-head { 26 width: 100%; 27 height: 24px; 28 padding-top: 4px; 29 overflow: hidden; 30 } 31 32 .head-logo { 33 width: 40%; 34 float: left; 35 } 36 37 .head-logo img { 38 width: 30px; 39 height: 30px; 40 } 41 42 .head-txt { 43 padding: 4px 0; 44 width: 60%; 45 float: right; 46 } 47 48 .head-txt a { 49 font-size: 12px; 50 color: #eb7350; 51 text-decoration: none; 52 } 53 .title-txt.title { 54 text-align: right; 55 color: black; 56 display: block; 57 width: 100%; 58 } 59 </style> 60 <style type="text/css"> 61 .main-txt { 62 border: 1px solid #ccc; 63 width: 98%; 64 height: 68px; 65 margin: 4px 0 0; 66 padding: 5px; 67 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15) inset; 68 } 69 70 .main-txt textarea { 71 border: none; 72 width: 100%; 73 height: 66px; 74 outline: none; 75 resize: none; 76 color: #333; 77 } 78 .main-txt.outline { 79 outline: 2px orange solid; 80 } 81 </style> 82 <style type="text/css"> 83 .warp-footer { 84 width: 100%; 85 height: 40px; 86 margin: 6px 0; 87 overflow: hidden; 88 } 89 90 .warp-icon-cont { 91 width: 65%; 92 float: left; 93 margin-top: 10px; 94 } 95 96 .warp-icon-cont ul li { 97 display: inline-block; 98 margin-right: 15px; 99 cursor: pointer; 100 } 101 102 .warp-icon-cont a { 103 font-size: 12px; 104 color: #333; 105 text-decoration: none; 106 height: 20px; 107 margin-left: 5px; 108 display: block; 109 width: 25px; 110 float: right; 111 line-height: 20px; 112 } 113 114 .warp-icon-cont a:hover { 115 color: #eb7350; 116 } 117 118 .warp-icon-cont img { 119 width: 20px; 120 height: 20px; 121 } 122 123 .warp-footer-btns { 124 width: 35%; 125 float: right; 126 overflow: hidden; 127 margin-top: 3px; 128 } 129 130 .release-btn { 131 width: 80px; 132 height: 28px; 133 float: right; 134 background-color: #ffc09f; 135 border: 4px solid #fbbd9e; 136 cursor: pointer; 137 border-radius: 2px; 138 } 139 140 .release-btn a { 141 display: block; 142 color: #fff; 143 width: 80px; 144 height: 28px; 145 line-height: 28px; 146 text-align: center; 147 text-decoration: none; 148 font-size: 15px; 149 } 150 </style> 151 <style type="text/css"> 152 .show { 153 width: 600px; 154 margin: 20px auto; 155 } 156 157 .show-content { 158 width: 578px; 159 border: 1px solid #ccc; 160 border-radius: 4px; 161 margin-bottom: 10px; 162 padding: 10px; 163 position: relative; 164 overflow: hidden; 165 } 166 167 .show-name { 168 width: 100%; 169 text-align: left; 170 font-size: 14px; 171 color: #333; 172 font-weight: bold; 173 } 174 175 .show-txt { 176 width: 100%; 177 color: #444; 178 font-size: 14px; 179 margin-top: 10px; 180 } 181 182 .show-txt p { 183 width: 100%; 184 word-wrap: break-word; 185 } 186 187 .show-time { 188 font-size: 12px; 189 color: #808080; 190 margin-top: 10px; 191 } 192 193 .show-close { 194 position: absolute; 195 top: 10px; 196 right: 10px; 197 font-size: 12px; 198 color: #ccc; 199 cursor: pointer; 200 transition: .5s; 201 } 202 203 .show-close:hover { 204 color: red; 205 } 206 </style> 207 </head> 208 <body> 209 <!-- 发布留言的主体 --> 210 <div class="wrap"> 211 <div class="wrap-head"> 212 <div class="head-logo"> 213 <img src="img/xx.png" /> 214 </div> 215 <div class="head-txt"> 216 <a class="title-txt" href="javascript:void(0)">置办年货省省省！红包在手年货无忧！点击领取年货红包 热门微博</a> 217 </div> 218 </div> 219 <div class="main-txt"> 220 <textarea name="" rows="" cols="" class="main-area"></textarea> 221 </div> 222 <div class="warp-footer"> 223 <div class="warp-icon-cont"> 224 <ul> 225 <li><img src="img/wb1.png" alt="" /> 226 <a href="javascript:void(0)">表情</a> 227 </li> 228 <li><img src="img/wb2.png" alt="" /> 229 <a href="javascript:void(0)">图片</a> 230 </li> 231 <li><img src="img/wb3.png" alt="" /> 232 <a href="javascript:void(0)">视频</a> 233 </li> 234 <li><img src="img/wb4.png" alt="" /> 235 <a href="javascript:void(0)">话题</a> 236 </li> 237 <li><img src="img/wb5.png" alt="" /> 238 <a href="javascript:void(0)">文章</a> 239 </li> 240 </ul> 241 </div> 242 <div class="warp-footer-btns"> 243 <div class="release-btn"> 244 <a href="javascript:void(0)">发布</a> 245 </div> 246 </div> 247 </div> 248 </div> 249 <!-- 显示留言的主体 --> 250 <div class="show"> 251 <!-- <div class="show-content"> 252 <div class="show-name">Xx</div> 253 <div class="show-txt"> 254 <p class="">这是内容</p> 255 </div> 256 <div class="show-time">2018年10月24日</div> 257 <div class="show-close">x</div> 258 </div> --> 259 </div> 260 261 </body> 262 <script src="js/jquery-3.3.1.min.js"></script> 263 <script type="text/javascript"> 264 $(function () { 265 // 还能输入的字得个数 266 var able_count = 140; 267 // 是否可以发布留言 268 var release_able = false; 269 270 // 右上角文字 271 var $title_txt = $('.title-txt'); 272 273 // 留言框 274 var $main_area = $('.main-area'); 275 // 发布按钮 276 var $release_btn = $('.release-btn'); 277 278 // 输入框获取焦点 279 $main_area.focus(function () { 280 console.log("获取焦点"); 281 $(this).parent().addClass('outline'); 282 $title_txt.addClass('title'); 283 if (able_count >= 0) { 284 $title_txt.html("还可以输入" + able_count + "个字"); 285 } else { 286 $title_txt.html("你以超出" + (-able_count) + "个字"); 287 } 288 }) 289 // 输入框失去焦点 290 $main_area.blur(function () { 291 console.log("失去焦点"); 292 $(this).parent().removeClass('outline'); 293 $title_txt.removeClass('title'); 294 $title_txt.html("置办年货省省省！红包在手年货无忧！点击领取年货红包 热门微博"); 295 }) 296 // 输入框文本修改 297 $main_area.on('input', function () { 298 console.log("文本修改"); 299 // 剩余可输入的字个数 300 able_count = 140 - $main_area.val().length; 301 // console.log(able_count); 302 // 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态 303 if (able_count >= 0 && able_count <= 140) { 304 $title_txt.html("还可以输入" + able_count + "个字"); 305 if (able_count != 140) { 306 release_able = true; 307 } else { 308 release_able = false; 309 } 310 } else { 311 $title_txt.html("你以超出" + (-able_count) + "个字"); 312 release_able = false; 313 } 314 // 根据发布状态决定发布按钮的样式 315 if (release_able) { 316 $release_btn.css({ 317 backgroundColor: "orange", 318 borderColor: "orange" 319 }) 320 } else { 321 $release_btn.css({ 322 backgroundColor: "#ffc09f", 323 borderColor: "#ffc09f" 324 }) 325 } 326 }) 327 // 发布事件 328 $release_btn.click(function () { 329 console.log("发布"); 330 if (release_able) { 331 console.log('可以发布'); 332 // 创建 333 var $showContent = $('<div class="show-content"></div>'), 334 $showName = $('<div class="show-name"></div>'), 335 $showTxt = $('<div class="show-txt"></div>'), 336 $showTime = $('<div class="show-time"></div>'), 337 $showClose = $('<div class="show-close"></div>'), 338 $showP = $('<p class=""></p>'); 339 // 设置 340 $showName.text("XxXx"); 341 $showP.text($main_area.val()); 342 $showTime.text("2018年10月24日"); 343 $showClose.text("x"); 344 // 添加 345 $showTxt.append($showP); 346 $showContent.append($showName); 347 $showContent.append($showTxt); 348 $showContent.append($showTime); 349 $showContent.append($showClose); 350 351 $('.show').prepend($showContent); 352 353 // 添加动画 354 $showContent.css({ 355 top: '-150px' 356 }) 357 $showContent.animate({ 358 top: 0 359 }, 200) 360 361 // 删除事件 362 $showClose.click(function () { 363 console.log($(this).parent().index()); 364 console.log($showContent.index()); 365 // 删除动画 366 $showContent.animate({ 367 height: 0 368 }, 200, function () { 369 // 动画结束后将自身从dom中移除 370 $showContent.remove(); 371 }) 372 }) 373 374 // 发布成功后收尾工作 375 $main_area.val(""); 376 able_count = 140; 377 release_able = false; 378 $release_btn.css({ 379 backgroundColor: '#ffc09f', 380 borderColor: '#ffc09f' 381 }) 382 383 } 384 }) 385 }) 386 </script> 387 </html>
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jq轮播图</title> 6 <style type="text/css"> 7 body, ul { 8 margin: 0; 9 padding: 0; 10 } 11 ul { 12 list-style: none; 13 } 14 .scroll { 15 position: relative; 16 width: 200px; 17 height: 75px; 18 /*border: 1px solid black;*/ 19 margin: 150px auto; 20 overflow: hidden; 21 user-select: none; 22 } 23 .view { 24 position: absolute; 25 /*轮播图动画的主体*/ 26 left: -200px; 27 /*?*/ 28 width: calc(200px * 6); 29 height: 75px; 30 } 31 .slide { 32 width: 200px; 33 height: 75px; 34 float: left; 35 text-align: center; 36 font-size: 30px; 37 line-height: 75px; 38 } 39 </style> 40 <style type="text/css"> 41 .tag { 42 position: absolute; 43 bottom: 5px; 44 right: 5px; 45 } 46 .tag li { 47 width: 10px; 48 height: 10px; 49 border-radius: 50%; 50 border: 1px solid #888; 51 float: left; 52 margin-left: 5px; 53 cursor: pointer; 54 } 55 .tag .active { 56 background-color: #333; 57 } 58 </style> 59 <style type="text/css"> 60 .left, .right { 61 width: 20px; 62 height: 30px; 63 background-color: rgba(0, 0, 0, 0.4); 64 top: 22px; 65 text-align: center; 66 line-height: 30px; 67 cursor: pointer; 68 } 69 .left { 70 position: absolute; 71 left: 2px; 72 } 73 .right { 74 position: absolute; 75 right: 2px; 76 } 77 </style> 78 </head> 79 <body> 80 <div class="scroll"> 81 <!-- view --> 82 <ul class="view"> 83 <li class="slide" style="background-color: cyan">4</li> 84 <li class="slide" style="background-color: red">1</li> 85 <li class="slide" style="background-color: orange">2</li> 86 <li class="slide" style="background-color: pink">3</li> 87 <li class="slide" style="background-color: cyan">4</li> 88 <li class="slide" style="background-color: red">1</li> 89 </ul> 90 <!-- tag --> 91 <ul class="tag"> 92 <li class="active"></li> 93 <li></li> 94 <li></li> 95 <li></li> 96 </ul> 97 <!-- toggle --> 98 <div class="toggle"> 99 <div class="left"><</div> 100 <div class="right">></div> 101 </div> 102 </div> 103 </body> 104 <script src="js/jquery-3.3.1.min.js"></script> 105 <script type="text/javascript"> 106 $(function () { 107 var scroll_disable = false; 108 109 // tag action 110 $('.tag').children().click(function () { 111 // console.log($(this).index()); 112 // var $li = $(this); 113 114 // 切换活跃的tag li 115 $(this).siblings('.active').removeClass("active"); 116 $(this).addClass('active'); 117 118 119 // 当前点击点的索引 120 var current_index = $(this).index(); // 0 | 1 | 2 | 3 121 // 一次动画滚动的距离 122 var scroll_width = $('.slide').width(); 123 124 // 切换图片 view 125 $(this).parent().prev().animate({ 126 // +1 初始左侧有一张假图 127 left: -(current_index + 1) * scroll_width 128 }, 300) 129 130 }) 131 132 133 // right btn action 134 $('.right').click(function () { 135 if (!scroll_disable) { 136 // 在本次动画未结束时,让用户无法进行下一次点击 137 scroll_disable = true; 138 139 // console.log("right btn action"); 140 // 图片右滚 141 // 点击一下右键,在原位置(left偏移)基础上往右滚一个图片宽度 142 143 // offset() 距离窗口左上角的top与left 144 // console.log($('.view').offset()); 145 // position() 距离定位父级左上角的top与left 146 // console.log($('.view').position()); 147 148 // 当前整个view的做左移量 149 var current_left = $('.view').position().left; 150 // 一次动画滚动的距离 151 var scroll_width = $('.slide').width(); 152 $('.view').animate({ 153 left: current_left - scroll_width 154 }, 300, function () { 155 scroll_disable = false; 156 // 显示末尾假图时 157 // console.log(current_left); 158 if (current_left <= -(scroll_width * 4)) { 159 // 切换为首位真图 160 $(this).css({ 161 left: -scroll_width 162 }) 163 } 164 }) 165 166 // tag切换 167 var index = Math.abs(current_left / scroll_width); 168 // console.log(index); 169 if (index == 4) { 170 index = 0; 171 } 172 // tag下面的index索引指向的li变成活跃状态,该li的其他兄弟,都变成不活跃状态 173 $current_li = $('.tag').children().eq(index); 174 $current_li.addClass('active'); 175 $current_li.siblings().removeClass('active'); 176 177 // $('.tag').children().eq(index).addClass('active').siblings().removeClass('active'); 178 179 } 180 }) 181 // left btn action 182 $('.left').click(function () { 183 if (!scroll_disable) { 184 // 取消滚动 185 scroll_disable = true; 186 187 // 图片左滚 188 // 当前整个view的做左移量 189 var current_left = $('.view').position().left; 190 191 // '-200px' => -200 192 // var current_left = parseInt($('.view').css('left')); 193 194 // 一次动画滚动的距离 195 var scroll_width = $('.slide').width(); 196 $('.view').animate({ 197 left: current_left + scroll_width // 决定方向 198 }, 300, function () { 199 // 动画结束回调函数 200 // 重新可以滚动 201 scroll_disable = false; 202 // 在首位假图时 203 // console.log(current_left); 204 if (current_left >= -scroll_width) { // 决定假图往真图切换的位置点 205 $(this).css({ 206 left: -scroll_width * 4 207 }) 208 } 209 }) 210 211 // tag切换 212 // 对应关系 1=>3 4=>2 3=>1 2=>0 213 var index = Math.abs(current_left / scroll_width) - 2; 214 index = parseInt(index); 215 if (index == -1) { 216 index = 3 217 } 218 // console.log(index); 219 $current_li = $('.tag').children().eq(index); 220 $current_li.addClass('active'); 221 $current_li.siblings().removeClass('active'); 222 } 223 }) 224 225 var timer = 0; 226 function autoScroll() { 227 timer = setInterval(function () { 228 if (!scroll_disable) { 229 scroll_disable = true; 230 var current_left = $('.view').position().left; 231 var scroll_width = $('.slide').width(); 232 $('.view').animate({ 233 left: current_left - scroll_width 234 }, 300, function () { 235 scroll_disable = false; 236 if (current_left <= -(scroll_width * 4)) { 237 $(this).css({ 238 left: -scroll_width 239 }) 240 } 241 }) 242 243 var index = Math.abs(current_left / scroll_width); 244 if (index == 4) { 245 index = 0; 246 } 247 $('.tag').children().eq(index).addClass('active').siblings().removeClass('active'); 248 249 } 250 }, 3000) 251 } 252 // 自启 253 autoScroll() 254 $('.scroll').mouseover(function () { 255 clearInterval(timer) 256 }) 257 $('.scroll').mouseout(function () { 258 autoScroll() 259 }) 260 }) 261 </script> 262 </html>