元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型(即id),也可以是htmlElement对象。觉得getEL是个累赘的话,就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL,不用$,避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

通过CSS3制作页面折角箭头的方法总结

最近在做wap方面工作,对html5和css3的相关知识又学习了些许,近期对于这种箭头” > “的CSS3制作方法进行了简单的总结,如果以后有想到其他更好的,也会不间断更新.闲话少说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 arrow test demo by whidy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
body {font-family:"Microsoft YaHei";}
h3 {line-height:2;border-bottom:1px dashed #aaa;}
.updated-time {font-size:14px;color:#999;}
i {font-style:normal;}
div {position:relative;}
div p {padding-top:50px;}
.arrow-1::after {-webkit-transform:rotate(45deg);border-color:#666;border-width:1px 1px 0 0;height:8px;left:0px;top:0px;width:8px;border-image:none;border-style:solid;content:" ";position:absolute;}
.arrow-2 {display:inline-block;position:relative;vertical-align:top;}
.arrow-2::before,.arrow-2::after {content:"";font-size:0;width:0;height:0;line-height:0;overflow:hidden;display:inline-block;position:absolute;top:0;border:0 dashed transparent;border-left-style:solid;border-width:7px;}
.arrow-2::before {border-left-color:#666;left:0;}
.arrow-2::after {border-left-color:#fff;left:-2px;}
.arrow-3 {-webkit-transform:rotate(45deg);width:12px;height:12px;-webkit-box-shadow:2px -2px 0px -1px #000;background-color:#fff;display:block;}
.arrow-4 {font-family:-webkit-pictograph;transform:scale(1,2);display:block;}
.arrow-5 {-webkit-transform:rotate(-90deg) scale(1,0.5);font-family:cursive;font-size:24px;display:inline-block;}
</style>
</head>
<body>
<h3>这是一个通过CSS3各种方式来测试箭头的DEMO</h3>
<div>
    <i class="arrow-1"></i>
    <p>通过写上边框和右边框形成的角度进行旋转,代码简单</p>
</div>

<div>
    <i class="arrow-2"></i>
    <p>通过两个三角形叠加形成一个箭头,代码较多,需考虑背景色</p>
</div>

<div>
    <i class="arrow-3"></i>
    <p>通过旋转一个白色正方形,并给他阴影产生的效果(似乎android 2.x不支持模糊距离为0的情况.所以虽然效果也不错,不过依情况适用)</p>
</div>

<div>
    <i class="arrow-4"> > </i>
    <p>通过字体设置为<em>-webkit-pictograph</em>并进行缩放产生的效果,兼容性较差</p>
</div>

<div>
    <i class="arrow-5">V</i>
    <p><del>这个实际上也是通过字体(cursive)控制,字母V通过旋转和变形,我觉得可能不好用,适合卡通版箭头吧...</del>(有的移动端没这个字体或浏览器支持不好,PC端兼容性较差 2014年10月22日)</p>
</div>

<p class="notes">参考网站:<strong>http://www.w3cplus.com/content/css3-transform</strong></p>
<p class="updated-time">更新日期:2014年10月31日</p>
</body>
</html>

上面也对各种制作方法进行了简单说明,大家也可以打开查看DEMO页面

更新至WordPress 4.0

花了两个晚上,总算升级到了4.0,本地测试了半天,最后还是没有重新安装而是直接升级.也不知道会不会出问题.

不得不说住在这里的电信太坑爹,玩炉石要挂代理,用个FTP工具也要代理!!!我空间服务商也是折腾了半天,才连上.

本来说早点睡,但是一整博客就没完,仔细对比了3.8.1的主题和4.0的2012年的主题,进行了修改,其中并没有太大的改动,我想可能主要是维护2014的主题吧.另外其他增加的功能也没什么测试的.

最近也是瞎忙,一直没更新博客,本来是200W排名,虽然不值一提,但是降到600多W也是很不爽的.准备有空最近再来整改一下博客,优化一下了.

JSTL相关资料手册打包学习及研究

因工作需要,最近在研究学习jstl,后台是java写的,以前研究过phpcms,不过接触了一段时间的jsp编写的后台,感觉实际上和phpcms数据调用方式大致相同,上手的确很容易,然而,有很多关于jstl语法的内容,恐怕未必能掌握的很好了,为了能够更好地工作,便找了些文档研究研究,遂与众享之…

为了避免被封,我设置了多重密码,有兴趣学习的人应该不会嫌麻烦吧(低调)…

该资料包,包含以下四个文件:

—-JavaServer Pages™ Standard Tag Library (好像内容还挺多的)
—-JSTL入门 IBM文档 (十年前的资料)
—-JSTL中文教程 (粗略的讲解了jstl,适合先看)
—-Prentice Hall – Core JSTL – Mastering The JSP Standard Tag Library (JSP标签库圣经?好像很厉害的样子)

下载地址

当然以上资料都有些年数了,不过不影响学习,最后声明,本资料仅供学习使用,请于24小时内删除,blablabla…

(解压密码:本域名完整长度以h开头,以t结尾)

JSP循环中为变量名赋值一个变量名?

标题我也不知道怎么说的好.不过还是得描述一下:

在一个三次循环的代码内,我新建一个变量,让每次循环,这个变量的名称都不同,而且三个变量的值也不同.如何才能最简单的写出来呢?

先来看看一段错误的(天真的代码):


<%@ page language="java" contentType="text/html; charset=gbk"
 pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
</head>
<body>
<c:set var="arry">aaa|6,bbb|6,ccc|4</c:set>
<c:forTokens var="item" items="${arry}" delims="," varStatus="vs">
 <c:set var="index" value="${vs.count}"></c:set>
 <c:set var="tit">${fn:split(item,'|')[0]}</c:set>
 <c:set var="num">${fn:split(item,'|')[1]}</c:set>
 <c:set var="p${vs.count} }">
 name: ${tit}, number: ${num} <br />
 </c:set>
</c:forTokens>
${p1}${p2}${p3}
<!--
期望输出
栏目名称: 评测, 该栏目输出文章数量为6
栏目名称: 导购, 该栏目输出文章数量为6
栏目名称: 文化, 该栏目输出文章数量为4
-->
</body>
</html>

当然上面肯定不能输出成功的.根本不能在c:set内创建一个含有变量的变量名var=”p${vs.count}”!

所以我只好改成下面这段:


<%@ page language="java" contentType="text/html; charset=gbk"
 pageEncoding="GBK"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
</head>
<body>
<c:set var="arry">aaa|6,bbb|6,ccc|4</c:set>
<c:forTokens var="item" items="${arry}" delims="," varStatus="vs">
 <c:set var="index" value="${vs.count}"></c:set>
 <c:set var="tit">${fn:split(item,'|')[0]}</c:set>
 <c:set var="num">${fn:split(item,'|')[1]}</c:set>
 <c:set var="p">
 name: ${tit}, number: ${num} <br />
 </c:set>
 <c:if test="${vs.count == 1}">
 <c:set var="p1" value="${p}"></c:set>
 </c:if>
 <c:if test="${vs.count == 2}">
 <c:set var="p2" value="${p}"></c:set>
 </c:if>
 <c:if test="${vs.count == 3}">
 <c:set var="p3" value="${p}"></c:set>
 </c:if>
</c:forTokens>
${p1}${p2}${p3}
</body>
</html>

那么很显然这段代码很臃肿,而且适用条件很有限,我认为在循环次数小于或等于3的情况下或许可以考虑,若是有5条甚至更多的时候,那么写这么多判断不如直接给每个变量进行赋值,那么我最近问了一些朋友,却找不出来更好的解决办法.今天的思考暂时告一段落.下次我来分享一些关于jstl的资料吧.

其他关于jstl学习资料请看: JSTL相关资料手册打包学习及研究