随笔分类 - 代码特效
摘要：又是一个关于锚点的问题，其实这个问题我多年以前就遇到过，当时还很是纠结了一番，最后用一段原生js代码解决的，貌似后来还找到一个插件。今天又遇到了同样的问题，发现以前写的一套代码不管用了，原来是jquery库版本的问题，不支持jquery-1.12.1版本。于是，再找其他解决办法，最后，实现的代码简直
阅读全文
摘要：请到我的个人博客网站上浏览此文章，欢迎评论和建议。 文章链接：http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了，实际项目中经常应用，特别是那种长长的信息展示类的页面。于是产生一个问题，需要控制动画的运行，就像给其加一个开关，什么时候动，什么时
阅读全文
摘要：（我的博客网站中的原文：http://www.xiaoxianworld.com/archives/321，欢迎遇到的小伙伴常来瞅瞅，给点评论和建议，有错误和不足，也请指出。） 经常会遇到给元素循环添加class的效果，例如下面这个图 每个模块的背景色和图标都不相同，但是呢，模块的数量又不确定，说不
阅读全文
摘要：效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3102.htm html: <div class="wrap"> <div class="box"> <span class="line_l"></span> <span clas
阅读全文
摘要：效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap"> <div class="box"> <span class="line_l"></span> <span clas
阅读全文
摘要：效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3095.htm html: <ul class="btn"> <li class="btn1"> <div></div> <span>你说人生艳丽我没有异议</span> </li
阅读全文
摘要：hover图片翻转效果二：：绕Y轴旋转90度,注意父层要加透视属性perspective，这样才能看出立体效果 html: <ul class="list-img"> <li> <div>文字内容</div> <span>我是图片</span> </li> <li> <div>文字内容</div>
阅读全文
摘要：前段时间做了很多有关css3动画的项目。虽然当时都较圆满的完成了，但事后还是要总结一下的，趁着近期工作不忙，系统的学习了一些动画理论，重点看了transform3D变换，学习了translate平移、scale缩放、rotate旋转、并实践了perspective透视属性的作用在哪里。在网站上浏览了
阅读全文
摘要：文字被点击后，可以编辑。 html： <div class="edit">点击后可编辑的文字</div> css： .edit{ width:300px; height:40px; line-height:40px; border:1px solid #09F; font-size:20px;}.e
阅读全文
摘要：锚点在页面中用的很多，而且点击时会给被点击的这个锚点加一个不同的样式，这个很简单，但是，当用户滚动页面时，到达相应的锚点内容位置时，其所对应的锚点也应该显现这个样式也对，这样才达到页面的操作统一化。这就是锚点反向联动的问题。用到scrollTop()获取滚动的高度，用offset().top获取内容
阅读全文
摘要：也是实际项目中遇到的一个小小效果，意义不大，就是复习了一下if表达式中，复选框被选中了怎么写。 html： <table class="box"> <tr> <td><input type="checkbox" class="check_1"></td> <td><input type="text"
阅读全文
摘要：实际做项目时遇到的效果，以后也可能会遇到，先记下来。 效果描述：一个文本框，后面的若干复选框选项，当选项补勾选，其值会加入到文本框中，不勾选，则其值会从文本框中删除。js代码用到了数组的相关知识，插入和删除数组。具体代码如下： html： <input type="text" value="" cl
阅读全文
摘要：很常见的一种导航的hover效果，鼠标放上后除了正常的hover，在移出整个导航后，会恢复当前栏目的特殊样式，分别有横向和纵向的导航。代码也比较简单，设置一个当前栏目的class，用index()找到当前的位置，再用animate把hover效果的“滑动块”移动到相应位置。这里需注意animate中
阅读全文
摘要：隔行变色太简单了，就是用的CSS3 :nth-child() 选择器，但是实际用时总是忘了怎么写的，也总是记不清哪个是奇数，哪个是偶数啊。这里贴出用法，便于以后查看。 选择奇数：:nth-child(odd) 选择偶数：:nth-child(even) 但是IE8是不支持的，所以用jquery控制：
阅读全文
摘要：顾名思义。 朴素效果截图： html： <div class="con"> <h1>复选框的全选、全不选、反选操作</h1> <div class="box"> <h2>全选/全不选：</h2> <p><input type="checkbox" class="check_kid"> 选项一</p>
阅读全文
摘要：select的默认样式往往很丑，为保证页面样式风格统一，需要对select进行美化。虽然其美化的插件很多，一搜一大把，但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，
阅读全文
摘要：表单的默认样式都是比较朴素的，实际页面中往往需要美化他们。这里先说说单选按钮和复选框，有了css3，这个问题就变的好解决了。利用input与label相关联，对label进行美化并使其覆盖掉原本的input，并利用旋转属性transform实现复选框中的那个“√”，当然也可以使用背景图片。对于IE8
阅读全文
摘要：弹窗效果太常见了，一个网站中往往会有多个弹窗，而且样式还不完全一样，这时候可以写一个函数，整站统一调用。命名好通用的class和独自样式的class，弹窗的居中显示原理很简单，设其定位fixed，top:50%和left:50%，然后用js获取弹窗的宽和高，然后设置其上边距和左边距分别为宽度除以2和
阅读全文
摘要：导航的下拉菜单，分别写了二级的和三级的。其实下拉菜单最重要的是写好结构，哪一层是哪一层的，要清晰，做到心中有数。 css定位时注意给隐藏的下拉菜单添加absolute绝对定位，但是其父级不必加relative。js嘛，简单，一个hover() 打遍天下。动画用了slideDown，slideUp，f
阅读全文
摘要：移入显示移出隐藏的效果也是很常见的，例如： 如果页面有有多处地方有此效果，那么也可以合并到一块，只写一段js代码，只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单，用到了setTimeout()和clearTimeout()这两个方法。如果说隐藏的内容和
阅读全文
浙公网安备 33010602011771号