分类目录归档:C#

仿新浪微博返回顶部的js实现(jQuery/MooTools)

本文地址:http://www.zhangxinxu.com/wordpress/?p=1576

一、引言

在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。例如:
各网站返回顶部功能 张鑫旭-鑫空间-鑫生活
各网站返回顶部功能 张鑫旭-鑫空间-鑫生活
各网站返回顶部功能截图 张鑫旭-鑫空间-鑫生活

其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮;人人网的返回顶部直接在底部的工具条上;新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果。本文的实现就是类似于新浪微博的这种效果。//zxx:新浪微博今天启用新域名weibo.com了

二、jQuery下的返回顶部功能

您可以狠狠地点击这里:jQuery下的返回顶部demo

可以看到,如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条,如下图所示:
demo页面效果截图 张鑫旭-鑫空间-鑫生活

点击这里“返回顶部”字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 – 不见了。

实现的原理嘛,恩……估计鲜有人关心,所以我也懒得浪费口水了,直接上代码。

无论是这里的jQuery实现还是MooTools实现,下面的CSS代码都是一致的,如下:

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

js相关代码如下:

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();

寥寥十几行代码就实现了全部的交互细节了。您可以将上面代码直接拷贝到您的JavaScript文件中,页面就有效果啦!对了,请使用jQuery 1.4+。

三、MooTools下返回顶部功能实现

您可以狠狠地点击这里:MooTools下的返回顶部demo

demo页面的效果与上面jQuery demo下效果基本一致。

代码部分。CSS代码完全同上。JS代码如下:

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {
        "class": "backToTop",
        title: $backToTopTxt
    }).set("text", $backToTopTxt).addEvent("click", function() {
        var st = document.getScroll().y, speed = st / 6;
        var funScroll = function() {
            st -= speed;
            if (st <= 0) { st = 0; }
            window.scrollTo(0, st);
            if (st > 0) { setTimeout(funScroll, 20); }
        };
        funScroll();
    }).inject(document.body), $backToTopFun = function() {
        var st = document.getScroll().y, winh = window.getSize().y;
        (st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.setStyle("top", st + winh - 166);
        }
    };
    window.addEvents({
        scroll: $backToTopFun,
        domready: $backToTopFun
    });
})();

直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。

MooTools的动画方法Fx不支持滚动,要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是,显然, 这里的简单功能没有必要再使用额外的插件,所以直接设置了个定时器实现了平滑滚动效果。

注:demo页面中的美女图片作用是撑开页面高度使产生滚动条。

四、结语

其实实现页面返回顶部效果最简单的就是a标签然后href属性值直接就是#锚点就ok了。但是这种方法会在url地址后面产生一个”#”。关于锚点相关的内容您可以参见我之前的“关于锚点跳转及jQuery下相关操作与插件”一文。

本文算是个实用小技术,内容不多,希望能对您的学习有所帮助。感谢阅读。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1576

 

分析器错误信息: 无法识别的属性“type”

VS2005

源错误:

行 1:  <?xml version=”1.0″ encoding=”utf-8″?><configuration>

行 2:    <configSections>

行 3:      <sectionGroup name=”system.web.extensions” type=”System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″>

行 4:        <sectionGroup name=”scripting” type=”System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″>

行 5:          <section name=”scriptResourceHandler” type=”System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ requirePermission=”false”/>

这是提醒你缺少dll了,web.config里说明了要Microsoft.Web.Extensions.dll

解决:IIS设置中,asp.net版本由1.1.4322改为2.0.50727

后来研究发现,是框架解析的问题,因为我开发用的是vs2005这个是在framework 2.0 下编译运行的,而公司虽然也装上了framework2.0,但是由于,是iis没有注册asp.net2.0 而仍然是1。1的。
解决办法:
在DOS下 C:WINDOWSMicrosoft.NETFrameworkv2.0.50215目录中运行
aspnet_regiis.exe -i

如何将 .net2.0注册到IIS ,重新注册IIShttp://www.cnblogs.com/xiaofengfeng/archive/2011/04/22/2024924.html

 

在应用程序级别之外使用注册为 allowDefinition=’MachineToApplication’ 的节是错误的

原因:如果在 IIS 中没有将虚拟目录配置为应用程序,则可能导致此错误。

1、若IIS中没有应用程序名,先创建,若还不行把C:WINDOWSMicrosoft.NETworkv2.0.50727CONFIGmachine.config中的所有allowDefinition=”MachineToApplication”改为allowDefinition=”Everywhere”

2、在网站对应的虚拟目录上右键,选属性,然后在应用程序名后点创建。

3.把你的虚拟目录指向web.config所在在文件夹,因为 web.config 的某些配置节只能出现在网站的虚拟目录跟目录中。

marquee属性详解

首先让我们认识这个<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。

behavior属性

behavior属性的参数值为alternate、scroll、slide中的一个,分别表示文字来回滚动、单方向循环滚动、只滚动一次,需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。

<marquee behavior=”alternate”>我来回滚动</marquee>
<marquee behavior=”scroll”>我单方向循环滚动</marquee><marquee behavior=”scroll” direction=”up” height=”30″>我改单方向向上循环滚动</marquee> <marquee behavior=”slide”>我只滚动一次</marquee>
<marquee behavior=”slide” direction=”up”>我改向上只滚动一次了</marquee>
bgcolor属性文字滚动范围的背景颜色,参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。如下所示:<marquee behavior==”slide” direction=”left” bgcolor=”red”>我的背景色是红色的</marquee>

direction属性

文字滚动的方向,属性的参数值有down、left、right、up共四个单一可选值,分别代表滚动方向向下、向左、向右、向上。如下所示:

<marquee direction=”right”>我向右滚动</marquee>

<marquee direction=”right”>我向下滚动</marquee>

width和height属性

width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度,height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数,数字表示矩形所占的(宽或高)像素点数,百分数表示矩形所占浏览器窗口的(宽或高)百分比。如下所示:

<marquee width=”300″ height=”30″ bgcolor=”red”>我宽300像素,高30像素。</marquee>
hspace和vspace属性

这两个属性决定滚动矩形区域距周围的空白区域.

<marquee width=”300″ height=”30″ vspace=”10″ hspace=”10″ bgcolor=”red”>我矩形边缘水平和垂直距周围各10像素。</marquee>

<marquee width=”300″ height=”30″ vspace=”50″ hspace=”50″ bgcolor=”red”>我矩形边缘水平和垂直距周围各50像素。</marquee>
loop属性

loop属性决定滚动文字的滚动次数,缺省是无限循环。参数值可以是任意的正整数,如果设置参数值为-1或infinite时将无限循环。如下所示:

<marquee loop=”2″>我滚动2次。</marquee>
<marquee loop=”infinite”>我无限循环滚动。</marquee>

<marquee loop=”-1″>我无限循环滚动。</marquee>

scrollamount和scrolldelay属性

这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay),参数值都是正整数。如下所示:

<marquee scrollamount=”100″>我速度很快.</marquee>

<marquee scrollamount=”50″>我慢了些。</marquee>
<marquee scrolldelay=”30″>我小步前进。</marquee>
<marquee scrolldelay=”1000″ scrollamount=”100″>我大步前进。</marquee>
最后说一下align属性,这个属性决定滚动文字位于距形内边框的上下左右位置。您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等

http://lx825.blog.163.com/blog/static/320935612010325101527506/