zoukankan html css js c++ java

留言板和jq轮播图

  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)">置办年货省省省！红包在手年货无忧！点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博</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("置办年货省省省！红包在手年货无忧！点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博");
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>

留言板.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">&lt;</div>
100             <div class="right">&gt;</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>

jq轮播图.html

查看全文

相关阅读:
windows下安装nginx
java 32位MD5加密的大写字符串
 eclipse运行maven的jetty插件内存溢出
 Phpstorm Alt+Enter 自动导入类
 CSS 再学习，文本处理
 1406 data too long for column 'content' at row 1
tp5.1报错页面错误！请稍后再试
 lnmp升级php
Tp5，Service使用
 CSS再学习之背景色背景图片

原文地址：https://www.cnblogs.com/xuqidong/p/12358953.html