-
jQuery判断鼠标向上滚动并浮动导航
判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的 scrollTop。为啥会有这个需求呢?有没有发现在一国外的一些网站,当你向上滚动时,导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人…- 6
- 0
-
纯CSS3将彩色图片转换成黑白图片
通过使用过滤器我们能够不使用 photoshop 等图像软件或 js、php 等技术就可以进行各种图像处理。 最近到处看到有人在说 CSS3 的 filter 一直没有时间自己去测试这效果。 现在,CSS 过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理效果, 通过这种方法,即使是在 IE 浏览器中也能够正确的显示我们需要的图像效果。 今天终于抽出时间学习这…- 2
- 0
-
jQuery获取上传文件的名称类型大小
Web 开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。 通常情况下,当用户通过<input type='file>'标签来上传文件时,我们可以看到上传文件的名称。 HTML5 File API 为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作。 支持 File API 的浏览…- 2
- 0
-
图片垂直水平居中CSS实现方法
在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,分享几种使用 CSS 实现图片垂直&&水平居中的方法,有些可能并不能兼容所有浏览器,大家可以自行选择: 方法一: html { width:100%; height:100%; background:url(logo.png) center center no-repeat; } 方法二: img { …- 3
- 0
-
HTML5 类名操作ClassList属性简介
常我们在操作类名时,需要通过 className 属性来添加,删除和替换类名。 因为 className 中是一个字符串,所以即使我们只是修改字符串的一部分,也要每一次都重新设置整个字符串的值。 如果一个元素有多个类名,要如何删除呢,jqeury 提供了 removeClass()这个 api,如果不用插件,自己封装,例如有下面的代码: <div class="name1 name…- 3
- 0
-
CSS实现隐藏滚动条并可以滚动内容
当我们的内容超出了我们的 div,往往会出现滚动条,影响美观,尤其是当我们在做一些导航菜单的时候,滚动条一出现就破坏了 UI 效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 我们经常在前端开发中遇到这种情况,最容易想到的是加一个 iscroll 插件,但其实现在 CSS 也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法一: 计算滚动条宽…- 7
- 0
-
WordPress 为媒体添加自定义字段
WordPress 中,我们可以很轻松的使用插件或者写代码为文章或页面添加自定义字段。可能是因为使用的场景不多,支持为媒体添加自定义字段的插件和教程确很少。 在这篇文章中,我们一起来看一下怎么为 WordPress 媒体添加自定义字段。实现代码其实很简单,也完全没必要用插件来实现。最终实现的效果如下图所见。 首先,为媒体添加自定义字段表单 在下面的代码中,我们使用 attachment_field…- 3
- 0
-
font-face 字体文件跨域解决办法字体跨域
开发网站的时候经常会调用不同域名下的字体文件(同源策略禁止读取位于 ttf 文件),但是出现无限的情况,提示如下:已拦截跨源请求: 同源策略禁止读取位于 https://www.weimahe.com/fonts/fontawesome-webfont.woff?v=4.7.0 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’) 已拦截跨源请求:同源…- 7
- 0
-
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法
先看下这个图片:一个竖向的长方形图片,需求就是:通过 CSS 的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML 部分: <li> <a href="1.jpg" title="测试" alt="测试"><d…- 4
- 0
-
DIV不确定高度内部元素水平垂直居中的方法归纳
总结当前知道的对 div 嵌套标签水平垂直居中方法,如果还有新的方法,请不吝赐教哦。好,下面开始列举代码咯。首先给需要实现水平垂直居中的两个 div 设置统一的样式: .styl { width: 100%; height: 300px; background: #ccc; margin: 30px auto; position: relative; border: 1px solid #000;…- 9
- 0
-
CSS修复图片指定尺寸缩小后模糊不清的问题
最近在开发插件的过程中,需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性,但是很快发现,大小是改变了,但图片质量下滑很严重。这就比较奇怪了,因为指定的图片尺寸,比实际图片的尺寸要小,也就是所是缩小展示,按我日常摄影的直觉,缩小后的图片不应该更锐利清晰才对么。 CSS 属性 image-rendering 用于…- 5
- 0
-
CSS控制文本两端对齐对最后一行无效解决方法
做前端的朋友对 text-align 这个属性肯定是在熟悉不过了,经常用 left、right、center 来控制行内元素相对父元素左、右、居中对齐排版,justtify 来实现文本的两端对齐,让一段多行文本看起来更方便阅读,排版更好看。 两端对齐相对于左对齐,视觉上显得整齐有序。但 justify 对最后一行无效,通常这样的排版对整段文字是极好的,我们并不希望当最后一行只有两个字时也两端对齐,…- 6
- 0
-
jQuery 检测字符串是否含有中文
我们做好网站之后,如果网站前台有提交表单,经常会出现被恶意发布信息。而且内容都英文,这时,我们可以通过 jQuery 检测字符串是否含有中文来解决这些垃圾留言,jQuery 检测字符串是否含有中文代码很简单: //判断字符串是不是中文 String.prototype.isChinese = function () { var reg = /[^\x00-\xff]/ig;//判断是否存在中文和全…- 3
- 0
-
jQuery 监听 textarea 文本段数据行数方法
在做网站时,少不了一些表单,在前面的教程中,我们介绍了怎么给表单 textarea 文本域添加行号。如果在表单里如果我们想限制用户的输入数据的行数,可以通过 JQUERY 代码来实现监听。以下是 jquery 监听 textarea 数据行数方法: $("#textarea").val().split("\n").length 通过这个监听的数据,我们也可以…- 3
- 0
-
CSS样式表属性最佳书写顺序是怎样的?
好久没有更文了,博客都要荒废了,惭愧一下下,刚好这段时间稍微整理了一下之前写的样式表,就来说下 CSS 样式表中各个属性的书写顺序是怎样的。 像很多初学者一样,飞鸟刚开始写样式表也是很佛系的,想到什么就在样式里写什么,毫无规律。其实这样不仅不利于查看维护,更重要的是混乱的 CSS 属性书写顺序会对网页的加载渲染造成影响,拖慢页面加载速度。也就是说,一个规范的 CSS 属性书写属性也是网页优化的组成…- 12
- 0
-
DIV标签里面IMG图片下方留有空白怎么办
我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在 div 标签里面放入 img 图片的话,有时候会在图片的下方出现一行空间的区域 如果单纯的图片不醒目或是图片所在的位置不重要的话,我们可以不去理会。 但是做为一个完美型的页且不太会前端的我来说,出现这个问题是忍无可忍的。 由于广告位平时背景色是白色,所以从未关注过图片广告下方有空白。 刚才试着改变广告位背景…- 11
- 0
-
利用:hover伪类实现鼠标指向区块滑出小提示效果
本文利用 css 中:hover 伪类实现将鼠标指向某区块时,区块内部滑出小提示效果,应用场景如广告上招商功能,一起来看一下。之前在某个平台发现了一个很有趣的效果,广告上有一个小按钮,当鼠标指向广告的时候,小按钮处侧滑出一个文本提示“也想在这里显示?联系我们吧”这种类似于“百度联盟图加 wap”版的效果瞬间让我觉得体验很棒,还能够起到“招商”的效果。当时准备拔下来,却发现人家启用了防扒代码功能,一…- 10
- 0
-
给菜单中UL下的某一个或某几个LI添加自定义类
我们有时候在定制 WORDPRESS 主题的时候,由于菜单样式的要求我们需要给我们的 WordPress 获取到的菜单中的 UL 下的某一个或某几个 LI 添加自定义的类,比如我给客户设置制作的这个主题中,因为 LOGO 在菜单中间显示,所以我需要第四个菜单和第五个菜单的右边和左边流出一定的距离来显示 LOGO,那么这个时候如果我能给第思个菜单和第五个菜单的 LI 分别添加一个自定义类,那么我就可…- 4
- 0
-
通过CSS代码自定义站点滚动条样式
平时我们看多了浏览器默认的滚动条也会腻的,所以偶尔改变一下滚动条的样式及颜色也是一种不错的选择。下面跟大家简单介绍一下如何通过 CSS 代码来自定义自己站点上的滚动条样式。此方法使用 CSS 来设置滚动条的样式,这比使用 jQuery 更快。但是,它仅适用于使用 Google Chrome,Safari,Opera 等 WebKit 渲染引擎的桌面浏览器。它对桌面计算机上的移动浏览器或 Firef…- 5
- 0
-
移动端自适应样式@media的使用方法
通用手机端样式: @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式: @media screen and (max-width: 750px) @media screen and (min-width: 720px) and…- 5
- 0
-
JS实现静态页面搜索并高亮显示的方法
本文实例讲述了 JS 实现静态页面搜索并高亮显示功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <…- 7
- 0
-
jQuery 实现点击选中改变当前样式
在做网站时,有些栏目元素有选择性,当我们点击某个栏目时,它会显示出不同于其它的样式,而没有被点击的,就恢复正常样式。效果如下图: 怎么在自己做网站时,实现这样的点击后改变当前样式的效果呢?这就需要使用 JQUERY 代码了。以下是 JQUERY 实现点击选中改变当前样式代码。 <script> $("#meau_nav>div").click(function…- 4
- 0
-
jQuery获取其他网页内容并插入到当前页面div或input
在页面中引入 jquery 来获取其他网页的内容并且插入到当前页面 div 或 input 中的方法。 当前页代码 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script>…- 8
- 0
-
终极代码禁止查看网页源代码方法
总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。一般常用的方法是在网页中加上类似的 JS 代码,屏蔽屏蔽键盘和鼠标右键。 document.onkeydown = function() { var e = window.event || arguments[0]; if (e.keyCode == 123) { alert('禁止F12…- 7
- 0
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分
我的优惠劵
-
¥优惠劵使用时效:无法使用使用时效:
之前
使用时效:永久有效优惠劵ID:×
没有优惠劵可用!