js效果类 - 随笔分类 - 老和尚106

使用html2canvas插件生成图片时，图片底部有一条白线的问题

摘要：在使用html2canvas插件把页面生成图片时，如果背景不是白色的，会发现生成图片的底部会有一条白线。可能是由于像素渲染问题导致的。移动设备的屏幕像素密度（Pixel Density）较高，有时会导致在两个相邻元素之间出现细小的间隙或白线。解决方法将canvas画布高度调小1像素，生成图片之阅读全文

posted @ 2025-01-13 10:33 老和尚106 阅读(504) 评论(0) 推荐(0)

使用html2canvas生成图片时遇到文字重叠问题

摘要：在使用html2canvas.js插件生成图片时，如果文字中有特殊符合时，生成的图片会出现文字重叠的问题，例如这样。后面发现是换行时英文特殊标点占位与文字占位不同导致该问题。解决方法：为特殊字符添加【letter-spacing: 1px;】css。如果把全部文字都加letter-spacin 阅读全文

posted @ 2025-01-11 18:02 老和尚106 阅读(582) 评论(0) 推荐(0)

js文字上下无缝轮播滚动。

摘要：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 阅读(2445) 评论(0) 推荐(2)

jQuery 颜色选择器,16进制颜色选择

摘要：简单 RGB、HSB、十六进制颜色选取器 jQuery 插件没有图像！只是 JS 和 CSS 文件非常直观类似 Photoshop 的界面光明和黑暗很容易自定义 CSS3 外观 28 KB 总由浏览器加载看起来不错甚至在 IE7及工程非常容易实现效果：插件下载：http://www.jq 阅读全文

posted @ 2020-05-27 15:39 老和尚106 阅读(980) 评论(0) 推荐(0)

jQuery实现图片走马灯/跑马灯的效果

摘要：jQuery实现图片走马灯/跑马灯的效果，实现无限自动轮播的效果。鼠标经过时暂停轮播，鼠标离开继续轮播。效果： css： .ExpertList{margin-top: 50px;overflow: hidden;position: relative;text-align: center;}.Ex 阅读全文

posted @ 2020-05-27 15:15 老和尚106 阅读(2354) 评论(0) 推荐(0)

js 实现自动打字的效果

摘要：用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 阅读(213) 评论(0) 推荐(0)

jQuery 输入框输入时自动提示，类似百度搜索下拉提示效果

摘要：jQuery 输入框输入时自动提示，类似百度搜索下拉提示效果。效果： Html代码： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src=" 阅读全文

posted @ 2020-05-27 11:11 老和尚106 阅读(743) 评论(0) 推荐(0)

jq 显示/提示一秒就隐藏；

摘要：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 阅读(392) 评论(0) 推荐(0)

jq 检查文字中是否有手机号

摘要：效果： 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 阅读(205) 评论(0) 推荐(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 阅读(345) 评论(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.js"></script> </h 阅读全文

posted @ 2020-05-27 09:58 老和尚106 阅读(208) 评论(0) 推荐(0)

jquery 实现的一个简单进度条效果实例

摘要：jquery实现的一个简单进度条效果实例，进度条完成后进行操作。效果： Html代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>进度条</title> <script type="text/javascript" src 阅读全文

posted @ 2020-05-27 09:50 老和尚106 阅读(788) 评论(0) 推荐(0)

jQuery实现滚动到底部时自动加载更多的方法示例

摘要：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 阅读(1201) 评论(0) 推荐(0)

利用jquery实现缓慢返回顶部

摘要：利用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 阅读(236) 评论(0) 推荐(0)

jQuery实现基本动画效果的方法

摘要：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 阅读(272) 评论(0) 推荐(0)

jQuery 点击小图切换大图

摘要：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 阅读(667) 评论(0) 推荐(0)

jquery 实现打印指定区域的内容

摘要：jQuery控制网页打印指定区域的方法；先上效果图 Html： <div id="printArea" style="width: 500px; text-align: left;"> <table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <t 阅读全文

posted @ 2020-05-27 09:21 老和尚106 阅读(1737) 评论(0) 推荐(0)

jquery验证，只能输入英文

摘要：jq控制输入框只能输入英文 Html： <input class="zwen" type="text" placeholder="请输入英文" /> Js： //英文验证 $("body").on("change", ".zwen", function(){ var textzwen =$(this 阅读全文

posted @ 2020-05-27 09:13 老和尚106 阅读(616) 评论(0) 推荐(0)

jq 弹窗在屏幕随意飘动

摘要：jq 让一个弹窗在屏幕中随意飘动，到屏幕边缘就回弹。效果： css： #box { width: 100%; height: 100%; position: fixed; border: 1px solid red; margin: 0; top: 0; left: 0; } #boll { wi 阅读全文

posted @ 2020-05-27 09:09 老和尚106 阅读(325) 评论(0) 推荐(0)

jq banner轮播

摘要：jQuery实现的网站banner图片无缝轮播效果完整实例先看效果图： Html 代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>banner轮播</title> <script type="text/javascript 阅读全文

posted @ 2020-05-27 09:04 老和尚106 阅读(182) 评论(0) 推荐(0)

老和尚106

随笔分类 - js效果类

公告