随笔分类 -  jquery

jquery插件编写
摘要：4 /*(function($) { 5 $.fn.accordion = function(options) { 6 var settings = $.extend({}, {open: false}, options); 7 return this.each(functio... 阅读全文
posted @ 2015-10-19 09:57 十三君
网页常动态效果--评分
摘要：用变量score记录点击索引，当鼠标离开时用score代替index完成效果HTML: ... 阅读全文
posted @ 2015-09-24 11:45 十三君
网页常用动态效果--淘宝竖条广告
摘要：布局：.box>ol+ulol和ul均整体左浮动，box清浮CSS： 1 .box{ 2 width:250px; 3 height:250px; 4 position: rela... 阅读全文
posted @ 2015-09-24 10:42 十三君
网页常用动态效果--多表单验证
摘要：1 jQuery(document).ready(function($) { 2 var arr = ['tel','email','qq','weichat']; 3 $('input').each(function(index, ... 阅读全文
posted @ 2015-09-24 10:11 十三君
网页常用动态效果--网易轮播图
摘要：与小米轮播图类似，多了下角标进度条，同时加了切换效果HTML代码： 网页常用动态效果---网易轮播图 网页常用动... 阅读全文
posted @ 2015-09-20 22:45 十三君
网页常用动态效果--优酷轮播图
摘要：优酷轮播图的不同之处在于用克隆在最后插入新的节点图片，因而在轮播时角标位的判断是关键HTML代码： ... 阅读全文
posted @ 2015-09-20 21:04 十三君
网页常用动态效果--放大镜
摘要：HTML代码：div.box>span+divCSS代码：box相对定位，span在box内绝对定位，div绝对定位超出其自身宽.box{ width:350px; height:350px; background: url(imag... 阅读全文
posted @ 2015-09-18 17:52 十三君
网页常用动态效果--拖拽
摘要：拖拽的关键在于事件源及坐标位网页中的基本拖拽：1.设定是否激活拖拽的标识flag;2.当拖拽点按下时，在window范围内的移动；3.拖拽区域不能超过窗口，加判断HTML: body>divCSS代码： JQ代码：指定在有效范围内的拖拽： 1.拖拽的三个事件，拖拽点鼠标按下，移动范围内的鼠... 阅读全文
posted @ 2015-09-18 14:21 十三君
网页常用动态效果--小米官网轮播图
摘要：关键在于层级关系HTML代码：div.box>ul+ol+span*2(ul层级1，ol层级2，span层级3)ul>li*5>img（注意可以将首个li的z-index定为10）ol>li*5CSS代码： .box{ width:992px; ... 阅读全文
posted @ 2015-09-18 10:53 十三君
网页常用动态效果--回到顶部
摘要：关键将提示回到顶部的盒子固定定位在页面右下角，隐藏状态，当滚动坐标值大于了首屏高度后显示html代码： ... 阅读全文
posted @ 2015-09-16 19:02 十三君
网页常用动态效果--悬浮广告
摘要：关键在于动态获取滚动坐标值测试滚动事件$(window).scroll(function(){ console.log($(window).scrolltop());})获取三个高度：窗口高度，盒子高度以及滚动坐标值，将广告盒子设置为绝对定位，当鼠标滚动时，其top值为滚动坐标值+窗口高度/2-盒... 阅读全文
posted @ 2015-09-16 18:44 十三君
网页常用动态效果--模态框
摘要：模态框的关键在于盒子定位，一个盒子遮住网页部分，此盒子绝对定位，宽高100%,实际高度为document高度；一个盒子为实际弹出框，固定定位在屏幕中央。html代码： 弹框 ... 阅读全文
posted @ 2015-09-16 17:31 十三君
网页常用动态效果--客服广告
摘要：关键在于设定开关标识，父盒子固定定位，按钮盒子绝对定位超出父盒子部分html代码： CSS代码： div{ width:131px; height:311px; ... 阅读全文
posted @ 2015-09-16 17:10 十三君