摘要: js让文字上下无缝滚动。 效果: html代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> * { margin: 0; padding: 0; } div { width: 阅读全文
posted @ 2020-05-27 15:49 老和尚106 阅读(2352) 评论(0) 推荐(2) 编辑
摘要: 简单 RGB、HSB、十六进制颜色选取器 jQuery 插件 没有图像 !只是 JS 和 CSS 文件 非常直观类似 Photoshop 的界面 光明和黑暗很容易自定义 CSS3 外观 28 KB 总由浏览器加载看起来不错甚至在 IE7及工程非常容易实现 效果: 插件下载:http://www.jq 阅读全文
posted @ 2020-05-27 15:39 老和尚106 阅读(946) 评论(0) 推荐(0) 编辑
摘要: 在鼠标hover时,让button的背景色从上到下出现。 效果: Html: <a href="###" class="join">加入我们,看到自己更多可能</a> Css: a.join{display: inline-block;height: 60px;line-height: 58px;f 阅读全文
posted @ 2020-05-27 15:22 老和尚106 阅读(1238) 评论(0) 推荐(0) 编辑
摘要: jQuery实现图片走马灯/跑马灯的效果,实现无限自动轮播的效果。鼠标经过时暂停轮播,鼠标离开继续轮播。 效果: css: .ExpertList{margin-top: 50px;overflow: hidden;position: relative;text-align: center;}.Ex 阅读全文
posted @ 2020-05-27 15:15 老和尚106 阅读(2232) 评论(0) 推荐(0) 编辑
摘要: 用JS来实现一个动态打字的效果 效果: html: <div id="text"></div> js: let divTyping = document.getElementById('text') let i = 0, timer = 0, str = 'www.baidu.com' functi 阅读全文
posted @ 2020-05-27 11:57 老和尚106 阅读(189) 评论(0) 推荐(0) 编辑
摘要: 代码: indexeach("test"); function indexeach(values){ var arr = []; arr.push('搜索'); arr.push('测试搜索'); arr.push('test搜索'); for(var i=0;i<arr.length;i++){ 阅读全文
posted @ 2020-05-27 11:47 老和尚106 阅读(282) 评论(0) 推荐(0) 编辑
摘要: jQuery 输入框输入时自动提示,类似百度搜索下拉提示效果。 效果: Html代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src=" 阅读全文
posted @ 2020-05-27 11:11 老和尚106 阅读(695) 评论(0) 推荐(0) 编辑
摘要: jquery线性数据转化为树 代码: // data:数组// parent_id:主键ID function toTree(data, parent_id) { var tree = []; var temp; for(var i = 0; i < data.length; i++) { if(d 阅读全文
posted @ 2020-05-27 10:54 老和尚106 阅读(215) 评论(0) 推荐(0) 编辑
摘要: Html代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> </h 阅读全文
posted @ 2020-05-27 10:52 老和尚106 阅读(372) 评论(0) 推荐(0) 编辑
摘要: 效果: Html: <input type="tetx" id="te" /> <p id="tee"></p> <button>验证</button> jq: $(document).on("click","button",function(){ var str=$("#te").val(); v 阅读全文
posted @ 2020-05-27 10:51 老和尚106 阅读(194) 评论(0) 推荐(0) 编辑
摘要: 6种css3鼠标滑过图片动画效果 效果: Html代码: <html> <head> <meta charset="utf-8" /> <title>6种css3鼠标滑过动画效果</title> <style type="text/css"> /*****全局样式*****/ * { padding 阅读全文
posted @ 2020-05-27 10:48 老和尚106 阅读(1076) 评论(0) 推荐(0) 编辑
摘要: 利用flex布局超简单实现瀑布流排版 效果: Html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial 阅读全文
posted @ 2020-05-27 10:03 老和尚106 阅读(10253) 评论(1) 推荐(0) 编辑
摘要: 实现瀑布流排版 效果: Html代码: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>demo water-basic</title> <style type="text/css"> .water-basic { position 阅读全文
posted @ 2020-05-27 10:01 老和尚106 阅读(324) 评论(0) 推荐(0) 编辑
摘要: Html代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> </h 阅读全文
posted @ 2020-05-27 09:58 老和尚106 阅读(198) 评论(0) 推荐(0) 编辑
摘要: jquery实现的一个简单进度条效果实例,进度条完成后进行操作。 效果: Html代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>进度条</title> <script type="text/javascript" src 阅读全文
posted @ 2020-05-27 09:50 老和尚106 阅读(761) 评论(0) 推荐(0) 编辑
摘要: jq滚动到底部加载更多方法 Html: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-sc 阅读全文
posted @ 2020-05-27 09:47 老和尚106 阅读(1168) 评论(0) 推荐(0) 编辑
摘要: 利用jquery实现缓慢返回顶部 Html代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min. 阅读全文
posted @ 2020-05-27 09:44 老和尚106 阅读(217) 评论(0) 推荐(0) 编辑
摘要: 今天在做项目的时候有需要用到多选框,并且因为ui的关系,需要稍微美化一下多选框,所以找到了实现方法,挺实用的,不需要脚本就能实现。 我这个是用背景图片的原理实现的,如果不喜欢这个样式,直接更换背景图就可以了 效果: Html: <input type="checkbox"/> <input type 阅读全文
posted @ 2020-05-27 09:38 老和尚106 阅读(980) 评论(0) 推荐(0) 编辑
摘要: jQuery实现基本动画效果的方法详解 Html: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min 阅读全文
posted @ 2020-05-27 09:33 老和尚106 阅读(266) 评论(0) 推荐(0) 编辑
摘要: jQuery 实现点击小图切换大图; 效果: HTML: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1. 阅读全文
posted @ 2020-05-27 09:26 老和尚106 阅读(573) 评论(0) 推荐(0) 编辑