站长资源
jQuery弹出框美化插件-漂亮的弹窗插件xcConfirm
本插件是一个美化版弹框插件，弹框的标题文本可以自定义。 输入框类型的弹框回调中能接收返回值。 demo提供几种常用方法，使用时可以根据项目需求调整插件样式，直接按照demo示例去调用比较方便。 本插件是封装的静态方法，传参用法都在xcCon...
标签：css
css属性的书写顺序助你养成良好编码风格
css属性顺序是css良好编码风格的一部分，有助于提高代码可读性，便于发现代码问题，有利于团队合作。（依次排后） example { /*显示属性*/ display: ; visibility: ; float: ...
页面滚动视差效果的实现讲解
页面的视差滚动效果可以让你的网站逼格瞬间提升一个档次，怎么去实现呢？今天就介绍给大家用最简单的方式实现视差滚动效果。 首先我们来写个基本html结构 <section class="content">头部</section...
纯css文字展开收起效果讲解
文字的展开收起这个用JS很容易就可以实现，不过我们今天实现的方法有些特殊，我们完全使用css的方式去完成这项工作。 假如有如下html代码 <p>站长资源文字展开收起效果</p> <div class="ele...
node.js+express+socket.io制作一个聊天室功能
首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http"); var express=require("...
右击网页出现社会主义价值观(富强、民主、文明、和谐…)文字特效
自动社会主义价值观出来后，各行各业都在跟风，程序员也不例外，我们经常可以看到很多博客站右击会出现富强、民主、文明、和谐…等等。 如图： 那么该功能是如何实现的呢，实现的思路很简单，今天站长资源网就来给你剖析一下。 html是不需...
教你用CSS制作一个侧边栏浮动在线客服
很多人一般在网页的侧边会选择放一个悬浮的在线客服，方便意向客户的联系，网上随便一搜也会有很多代码提供，但是大多都是JS书写的，并且夹带着一些图片素材乱七八糟的东西，用起来很不方便。 今天我们就教给大家一个纯css书写的在线客服效果 首先我们...
利用canvas配合FileReader()更好的实现图片上传预览功能
我们经常看到图片上传之后有预览，而一般的表单上传组件是获取不到文件真实路径的，那么如何实现，当然可以配合后端，存储之后再进行显示，这样不免会浪费资源。当然也有使用createObjectURL()方法的，也有使用html5的FileRead...
实例讲解之网页常见的漂浮广告是如何实现的
网页漂浮广告，大家都见到过，虽然用户体验不好，但是曝光效果显而易见，所以还是有很多人有这方面需求，大多用到这些需求都是网上找的插件来实现，难免会多出很多冗余代码，自己也不知其所以然。今天站长资源网就给大家详细讲解如何实现漂浮广告效果。 首先...
JS双重for循环实例讲解，如何制作一个黑白相间的方格
双层for循环在JS入门中还是比较难理解的，常见的九九乘法表相信大家都练习过，今天我们用双层for循环来输出一个黑白相间的方格，帮助大家加深印象。 先写一个简单的html结构: <div> <ul id="bg">&...
实例操作之新闻不断滚动显示效果的实现
web应用的制作过程中我们经常会用到不断滚动的列表，常见于公告，首页的资讯展示等，该项功能具体是怎么实现的呢，下面就用最通俗易懂的方式给大家讲解。 首先我们今天要用到的函数有jquery的animate，appendTo函数以及setInt...
分步骤讲解复选框的选中、全选、全不选、反选以及取值
我们在制作后台表单的批量操作的时候经常会遇到需要全选，全不选，反选，选择部分等需求，有些刚入门的朋友不是很明白，今天就通过实际案例来给大家想起分析，相信看完此篇内容，大家在遇到类似操作就不会这么恐惧了。 首先我们写好基础的html示例代码 ...
css文本断开错位效果的简单实现思路
文字断开效果，说白了就是让文字部分错位，这要是放在PS上解决自然是很简单的事情，不过用代码如何去实现呢。 下面就来一步步教大家如何去实现 首先我们写一段HTML基础代码： <div class="main"> <h1>...
纯Css选项卡的实现
Tap选项卡是大家最常用的功能之一，因为兼容性的问题目前大多朋友也都是用js书写，当然我也会用JS去书写，必定web端的应用你的用户群体是不不同的，兼容性自然是很重要的。 不过今天我们介绍的是用纯css的方式来写一个选项卡的功能，这里用到的...
html5网页版时钟动画效果
完整代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页版时钟动画效果</title> ...
IE6下div之间有间距
全局添加样式 div{ margin:0; padding:0; border:0; overflow:hidden; }
css球形环绕转动效果
完整代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Css球形环绕转动效果</title>...
CSS心形缠绕转动效果
完整代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS心形缠绕转动效果</title>...
纯css简单箭头动画效果
效果如下： 完整代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css简单箭头动画效果</t...
纯css实现光标打字效果
效果如下： 代码HTML部分： <p class="load-text">loading...</p> 代码CSS部分： /*光标动画*/ @keyframes caret { 50% { border-color:...