
css及js相关
css及js相关
viqecel
这个作者很懒,什么都没留下…
展开
-
b站iframe引用代码视频,js显示 隐藏 停止 播放 等控制功能
如图,把b站视频引入自己网站,是没法通用js的播放暂停功能.来控制,因为他提示不同源,我们可以用删除iframe的src地址的方式实现。原创 2025-01-10 10:55:59 · 367 阅读 · 0 评论 -
页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例
页面滚动下拉时,元素变为fixed浮动js代码 以视频示例。原创 2025-01-09 11:16:58 · 502 阅读 · 0 评论 -
jq 查找第二个子元素并添加样式
Swiper2使用存在bug,swiper-pagination显示2个元素轮播时, 导航默认没有把当前样式高亮,可以用js解决。原创 2024-12-10 17:09:41 · 300 阅读 · 0 评论 -
纯js仿淘宝多图片封面图插件模板/带视频,带放大镜,带前后端完整代码PHP
功能预览一,前端模板代码 <!--多图功能--> <style>@charset "utf-8";.wrap_imgs img { vertical-align: middle; width: 100%; height: 100%;}.wrap_imgs { position: relative; top: 0px; left: 0px; width: 100%;height:auto; min-height: 410px;}.imgss {原创 2024-05-31 14:23:22 · 697 阅读 · 1 评论 -
css transform 会影响position 定位
解决办法是.动画操作的对象不应该是包含子元素的li,可以是li下面的a这个子元素.比如这样就行了。比如通过以下代码.实现导航条上的每个li栏目,以不同的时间间隔,从上向下移动进来并显示。如下图,li下面还有menu这个子元素.所以.动画修改到a上.但是,如果my-navbar ul li 这个。原创 2024-02-26 17:15:33 · 811 阅读 · 0 评论 -
Flex布局 实现元素排列 4列变2列?
thinkphp 的 html。电脑版显示为一行有四列.手机版显示为一行两列。原创 2023-12-07 10:39:03 · 702 阅读 · 0 评论 -
svg图片代码data:image/svg+xml转png图片方法
fill='%23000000’这里表示颜色 ,后面6位0表示黑色,只修改后6位即可。把代码保存为html格式的文件中,用浏览器访问,即可右键保存。注意:src=""图片地址中,一些参数的含义。从AI软件或其它网站得到svg图片代码后,viewBox是图片显示区域,宽,高等。d=‘这里是图片代码数据’原创 2023-09-14 11:02:44 · 3155 阅读 · 0 评论 -
ueditor百度编辑器焦点或内容变化 触发回调监听事件的方法
ueditor百度编辑器焦点或内容变化 触发监听方法。原创 2023-09-05 16:37:59 · 1667 阅读 · 0 评论 -
简单js瀑布流效果
演示地址:http://www.microphotons.cn/?以thinkphp为例。原创 2023-03-20 09:39:35 · 142 阅读 · 0 评论 -
dropdown.js下拉插件,取消或禁用默认点击弹出窗口后就自动隐藏的功能
如下图,窗口弹出后,点击他的任务部分,本窗口都会隐藏,取消这种功能是方法是。原创 2022-12-09 10:51:15 · 693 阅读 · 0 评论 -
jq 手风琴折叠菜单 js滚动效果 collapse.js slideUp()
功能类似 collapse.js 插件的效果。原创 2022-09-13 18:03:35 · 457 阅读 · 0 评论 -
js判断 checkbox 至少选中一项
第二种,如果input的name相同,则可以用。转载 2022-09-01 13:56:29 · 512 阅读 · 0 评论 -
PHP 防止或检测页面被刷新 post重复提交问题
其实最好的办法是用ajax来提交表单,这样的话,只有点击提交按钮,表单才会提交.也就没必要检测刷新问题了.在解决post重复提交问题时,经过测试.没办法通过php检测是否被刷新.一般是通过js还判断。比如在用户填写收货人的页面,就收集用户的post信息,通过ajax在后台提交订单.代码演示。但都没法禁止post页面被重复提交。......原创 2022-07-18 11:57:07 · 889 阅读 · 0 评论 -
正则匹配特定html标签块,比如去掉script本标签或其中内容,支持多行
支持多行,在notepad++ 中测试可用<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>网页中的用法,var testa = document.getElementsByTagName('body')[0].outerHTML;var scripts = testa.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*&转载 2022-01-07 15:22:49 · 335 阅读 · 0 评论 -
css 滚动条scrollbar-thumb美化,可能会引起微信闪退
类似下面的用法,在对表格左右滚动条渲染时,会引起微信访问网页的闪退问题./*滚动条里面的滑块*/.list3 .tz table::-webkit-scrollbar-thumb,.list3 .ms table::-webkit-scrollbar-thumb {background: linear-gradient(to right, red 20%, orange 21% 40%, yellow 41% 61%, green 61% 81%, blue 81%); /*原创 2021-12-17 16:40:57 · 434 阅读 · 0 评论 -
css3 表格分两栏竖向排列,效果非常干净清爽(纵向显示)
一般表格显示效果为竖向效果css代码,如果需要只在手机上显示这种效果,可以用到媒体查询@media only screen and (max-width:760px){----} 如果不需要,可以直接这样.table-responsive-y table,.table-responsive-y thead,.table-responsive-y tbody,.table-responsive-y th,.table-responsive-y td,.table-responsive-y tr{d原创 2021-12-07 17:27:10 · 1954 阅读 · 0 评论 -
Editor百度编辑器 增加自定义工具栏功能按钮,选定内容插入html代码css字体样式
比如增加一个按钮.点击以后,选定文字直接加粗,字号18px,颜色绿色如下效果 <script type="text/javascript">//假如只有一个编辑器,可以这样//var editor = new UE.ui.Editor({initialFrameHeight:200});//editor.render("editor");//多个编辑器 var va="{$v.entitle}";//PHP动态得到编辑器id UE.getEdi原创 2021-11-24 17:36:32 · 784 阅读 · 0 评论 -
html2canvas实现指定网页部分截图下载另存为
注意,本功能会受图片缓存影响.刷新使用可能无效.需要清空缓存.关于跨域使用,云空间图片使用问题.自行百度注意,截图区域需要自定义 比如list3html2canvas.js下载地址https://download.youkuaiyun.com/download/viqecel/35132718html代码<div class="list3">截图这部分</div><li class="hidden-xs"><button id="saveImageBtn">原创 2021-10-28 14:46:01 · 303 阅读 · 0 评论 -
jq过滤非法字符串
<form action="a=search" id="f2" method="post" onsubmit="return checks()"> <input class="ipt l" type="text" name="soso" id="search" value="{$soso}" placeholder="Search" /> <div class="search-btn fa fa-search r"></di.原创 2021-09-27 17:48:24 · 401 阅读 · 0 评论 -
bootstrap 弹出框popover 鼠标划过离开不消失或延迟消失
如果是点击显示,则需要再次点击原处,才 能关闭弹窗,所以,用滑动功能可以解决,只是手机版上怕是不行.<div class="div1"> <li role="button"data-toggle="popover"data-placement="left" title="Related goods" data-content="<a style='width:120px;' href='/?a=cp5'>123</a>"> <span原创 2021-09-16 09:16:53 · 979 阅读 · 0 评论 -
select 选项 option 不可选 ,灰色,禁用
<select> <option>正常</option> <option disabled="disabled">不可选</option> <option>正常</option></select>原创 2021-09-02 11:26:14 · 5857 阅读 · 0 评论 -
百度编辑器ueditor,编辑内容过多时,工具栏不可见,不方便编辑或上传问题
百度有这个配置文件ueditor.config.js里面本来是有自动工具栏浮动到顶部,可以一直显示工具栏,但我测试,一直不能正常实现.功能不正常 //是否保持toolbar的位置不动,默认true ,autoFloatEnabled:false还有一个办法,就是去掉自动长高功能.让内容区域显示竖直滚动条,这样,就可以一直显示工具栏了,右侧实际上有两个滚动条,这样就方便了 // 是否自动长高,默认true ,autoHeightEnabl原创 2021-08-23 16:03:00 · 3494 阅读 · 0 评论 -
正则匹配去掉style样式,多个正则一起使用
比如从word中复制来的文档,有多余的样式需要去掉。可以在notepad++中用正则查找并替换比如去掉width height= style=“” 多个正则一起用,用括号括起来。用竖线分开。(style=\"(.*?)\")|(width=\"(.*?)\")|height=\"(.*?)\"...原创 2021-07-29 13:31:29 · 787 阅读 · 0 评论 -
css样式中写html{overflow-x:hidden},会导致$(window).scroll(function () {}滚动监听失效
css样式中写html{overflow-x:hidden},那么下面的代码就会 失效.滚动时,没效果. $(window).scroll(function () {if($(window).scrollTop()>=300) {//alert(1);$(".gotop").fadeIn(400);}else {$(".gotop").fadeOut(400);}});解决办法是把css中的html,body{ overflow-x:hidden;}修改为,即去掉htm原创 2021-07-26 14:10:05 · 583 阅读 · 0 评论 -
css图片压缩不变形
大的banner图片.电脑上显示效果不错.但手机上浏览,要么变形,要不变成高度很低的窄图片,解决办法有几个.可以通过js方式动态调试 比例,但是有时页面加载不完全,可能没法生效.不保险通过css的方式,则可以让图片以背景图的方式或直接img src=""的方式.一,如果是背景图的方式,要保证图片不变形,可以这样写<div style="background:url(图片地址) no-repeat center top;background-size:cover;">其它内容<原创 2021-07-21 15:46:56 · 1062 阅读 · 0 评论 -
css 加粗或斜体hover鼠标划过,导致异常闪动,整体宽度增加的解决办法
比如导航栏目有 首页,关于我们,产品,等他们字数不同,宽度也不同,如果不固定宽度,如果设置鼠标划过字体加粗.则一定会出现后面的导航整体后移的问题.需要固定每个导航条统一的宽度.或通过js的方式,先读取原标题li的宽度,再动态增加统一的一个宽度.//jq的写法 $(".navbar-nav li ").each(function(){ //先读.navbar-nav li 每个对应的宽度,再分别对他们增加9px //$(this).width($(this).width()+9);//写法原创 2021-07-07 15:42:30 · 1337 阅读 · 0 评论 -
window.history.back()无效,即无法返回上一页原因
比如你从第一个页面点击一个a超链接.进到第二个页面,第二个页面有个返回按钮.点击无反应.如下&lt;a href="#" onClick="javascript:window.history.back();return false;"&gt;点击这里无法返回&lt;/a&gt;原因是你的第一个页面的超链接上加了target="_blank&原创 2019-02-05 11:41:41 · 13407 阅读 · 1 评论 -
判断手机或电脑让不同的iframe显示或隐藏
一,把pc_or_mobile.js 上传到源站的根目录中.比如您打算存放js的站域名为 http://700.com/则可以把js放在http://700.com/网站服务器的根目录中,当在其它网站上引入时,就可以这样写了 <script src="http://700.com/pc_or_mobile.js"></script>pc_or_mobile.js...原创 2019-05-27 17:23:01 · 695 阅读 · 0 评论 -
jquery判断input值不为空 val()
<input type="text" class="searchbox" /><script type='text/javascript'>$(document).ready(function(){ //enter回车键激活搜索 $('.searchbox').bind('keypress', function(event) { if (ev...原创 2016-06-05 10:03:00 · 13863 阅读 · 1 评论 -
jquery动态修改表单select的option值,从而间接修改option的选中状态
<!-- 通过php模板标签的方法实现option选中状态,最常用的 --><select name="sex" id="sex"><option value="" >请选择性别</option> <option value="1" <{if $info[原创 2016-10-29 11:59:04 · 6876 阅读 · 0 评论 -
bootstrap去掉水平滚动条,小屏自适应表格实现方法
bootstrap的表格及单元格的宽度会随着浏览器大小而自动压缩.但是通过#no-more-tables的css插件,则可以实现2列垂直排列的效果, 比如原来是这样的 修改后是这样的 演示地址https://sandbox.runjs.cn/show/zbmvnzwm注意事项,每个td上要加data-title属性,table标签上要加table的class样式完整代码 ...原创 2018-08-06 00:39:04 · 9440 阅读 · 1 评论 -
ajax,post提交全部所有input表单值,php端接收
通过ajax可以在提交时,不用刷新页面.所以,不能用submit,可以用serialize()的方法提交.&amp;amp;lt;form id=&amp;quot;insertAttrInput&amp;quot; enctype=&amp;quot;multipart/form-data&amp;quot; method=&amp;quot;post&amp;quot; action=&a原创 2018-07-31 20:13:27 · 2194 阅读 · 0 评论 -
js对联广告,顶部浮动广告,固定位置广告插件
整个广告放在一个js文件中,所以,需要先在模板上引入这个baidu.js文件 因为js中有一个固定位置的广告,所以.哪个位置需要显示这个固定广告,则直接把js放在相应位置即可.放好后,其它的对联广告等会自动显示 baidu.js先引入 &amp;lt;div class=&quot;abc&quot;&amp;gt;&amp;lt;script src=&quot;js/baidu.js&原创 2018-07-21 22:30:22 · 2110 阅读 · 0 评论 -
jquery 给input text元素赋值,js修改表单的值
<script> function changestatus(money){ //$("#money").val(money);//val()这种写法有时会失效,特别是他的父元素是dosplay:none时 $("#money").attr("value",money);//推荐这种写法,可正常赋值//document.getElementById("money").val...原创 2017-09-05 09:32:01 · 63629 阅读 · 3 评论 -
css position: fixed; 垂直居中,绝对定位居中
.boxout{ background:#fff; z-index: 111;===display:none; box-shadow: 0 1px 4px #AAA;position: fixed; _position:absolute; /* hack for IE6 */top: 50%;left: 50%; margin: -201px 0 0 -480px; /* 注意,...原创 2016-10-23 16:26:21 · 14309 阅读 · 1 评论 -
jquery,js页面加载时自动点击触发jq按钮
jq加载时自动执行事件需要这样写$(function(){ $('.signinpanel').hide();//加载时,隐藏一个元素})jq加载页面时自动点击按钮,则<i id="spPoints">按钮</i><script language="javascript" type="text/javascript">..原创 2017-06-15 23:44:06 · 37796 阅读 · 2 评论 -
微信浏览器页面js刷新页面代码,解决微信jquery无法刷新问题
微信浏览器中,直接用window.location.reload()。刷新页面是可以的.但是,他只会读取缓存.所以无效.需要用window.location.href加上随机数的形式.例如 <a href="javascript:;" onClick="window.location.href='/mobile/<?php echo rand(0,77); ?>';...原创 2017-05-29 22:38:55 · 8809 阅读 · 0 评论 -
js提醒窗口,利用cookie点击不再查看则不再显示弹窗
<script type="text/javascript">function cookiesave(n, v, mins, dn, path){ if(n) { if(!mins) mins = 365 * 24 * 60; //if(!mins) mins = 1; if(!path) path = "/"; var dat...原创 2016-10-31 17:36:21 · 3303 阅读 · 0 评论 -
js判断手机网站,手机浏览器检测,并跳转到手机网站代码
var yousite="m.snail.blue";//这里改为您的手机站访问地址不用带http://var url=window.document.location.pathname;var site="http://"+yousite+url;//平台、设备和操作系统 var system ={ win : false, mac : false, ...原创 2016-10-31 16:30:52 · 1999 阅读 · 0 评论 -
点击链接后,弹出另一个浮动窗口,全屏变暗遮罩效果,适用于下载站
效果图 首先,要引入jquery及jquery.imagePreview.1.0.js插件jquery.js 自己下载而jquery.imagePreview.1.0.js插件内容为 // JavaScript Document//copyright c by zhangxinxu 2009-10-17 //http://www.zhangxinxu.com...原创 2016-10-23 16:55:58 · 2895 阅读 · 0 评论