预览模式: 普通 | 列表

Javascript返回页面顶部的滚动特效

和前面的一篇文章作用一样,这个代码写得不错!

JavaScript代码
  1. var goto_top_type = -1;  
  2. var goto_top_itv = 0;  
  3.   
  4. function goto_top_timer()  
  5. {  
  6. var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;  
  7. var moveby = 15;  
  8.   
  9. y -= Math.ceil(y * moveby / 100);  
  10. if (y < 0) {  
  11. y = 0;  
  12. }  
  13.   
  14. if (goto_top_type == 1) {  
  15. document.documentElement.scrollTop = y;  
  16. }  
  17. else {  
  18. document.body.scrollTop = y;  
  19. }  
  20.   
  21. if (y == 0) {  
  22. clearInterval(goto_top_itv);  
  23. goto_top_itv = 0;  
  24. }  
  25. }  
  26.   
  27. function goto_top()  
  28. {  
  29. if (goto_top_itv == 0) {  
  30. if (document.documentElement && document.documentElement.scrollTop) {  
  31. goto_top_type = 1;  
  32. }  
  33. else if (document.body && document.body.scrollTop) {  
  34. goto_top_type = 2;  
  35. }  
  36. else {  
  37. goto_top_type = 0;  
  38. }  
  39.   
  40. if (goto_top_type > 0) {  
  41. goto_top_itv = setInterval('goto_top_timer()', 50);  
  42. }  
  43. }  
  44. }  

有时间研究下这个网站的效果:http://webdesignerwall.com/

Tags: javascript

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2429

Javascript实现网页平滑滚动回到顶部

很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。

首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...

JavaScript代码
  1. <script type="text/javascript">  
  2. /** 
  3.  * 回到页面顶部 
  4.  * @param acceleration 加速度 
  5.  * @param time 时间间隔 (毫秒) 
  6.  **/  
  7. function goTop(acceleration, time) {  
  8.     acceleration = acceleration || 0.1;  
  9.     time = time || 16;  
  10.    
  11.     var x1 = 0;  
  12.     var y1 = 0;  
  13.     var x2 = 0;  
  14.     var y2 = 0;  
  15.     var x3 = 0;  
  16.     var y3 = 0;  
  17.    
  18.     if (document.documentElement) {  
  19.         x1 = document.documentElement.scrollLeft || 0;  
  20.         y1 = document.documentElement.scrollTop || 0;  
  21.     }  
  22.     if (document.body) {  
  23.         x2 = document.body.scrollLeft || 0;  
  24.         y2 = document.body.scrollTop || 0;  
  25.     }  
  26.     var x3 = window.scrollX || 0;  
  27.     var y3 = window.scrollY || 0;  
  28.    
  29.     // 滚动条到页面顶部的水平距离  
  30.     var x = Math.max(x1, Math.max(x2, x3));  
  31.     // 滚动条到页面顶部的垂直距离  
  32.     var y = Math.max(y1, Math.max(y2, y3));  
  33.    
  34.     // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小  
  35.     var speed = 1 + acceleration;  
  36.     window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));  
  37.    
  38.     // 如果距离不为零, 继续调用迭代本函数  
  39.     if(x > 0 || y > 0) {  
  40.         var invokeFunction = "goTop(" + acceleration + ", " + time + ")";  
  41.         window.setTimeout(invokeFunction, time);  
  42.     }  
  43. }   
  44. </script>  

调用方法:

XML/HTML代码
  1. <a href="#" onclick="goTop();return false;">TOP</a>

Tags: javascript

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3140

Javascript实现透明度渐变效果 加密日志

该日志是加密日志,需要输入正确密码才可以查看!
分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2140

vb6 winhttp 用法操作

Dim WithEvents oreq As WinHttpRequest

Private Sub Command1_Click()
    ' Create a WinHttpRequest object.
    Set oreq = New WinHttpRequest
    ' Open an HTTP connection.
    oreq.Open "GET", "http://ServerName/ASPPage.asp", True
    ' Set the receive timeout to 3 seconds.
    oreq.SetTimeouts 60000, 60000, 60000, 3000
    ' Send an HTTP request to the server.
    oreq.Send
End Sub

Private Sub oreq_OnError(ByVal ErrorNumber As Long, ByVal ErrorDescription As String)
    ' Display the description of the error.
    MsgBox ErrorDescription
End Sub

Private Sub oreq_OnResponseFinished()
    ' Display the response from the server.
    MsgBox oreq.ResponseText
End Sub

Tags: vb

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4243

ServerXMLHTTP及XMLHTTP的差别

 一般在 client side 的 ajax 会用到这个 component (for IE) Microsoft.XMLHTTP, 若是在 server 端的 asp 程序代码使用这组 code, 来访问其他站台的内容时, 可以利用程序代码如下:

ASP/Visual Basic代码
  1. Set xmlhttp = Server.CreateObject("Microsoft.XMLHTTP")  
  2. xmlhttp.Open "GET""http://www.baidu.com/"False  
  3. xmlhttp.Send  
  4. Response.Write xmlhttp.ResponseTEXT  
  5. Set xmlhttp = Nothing  

不过这个有一些些问题, 因为 XMLHTTP 本身的工作行为是绑在 IE API 上, 当然是有好有坏, 根据微软的文件, 这组组件是适合用在客户端而非 server 端, 在使用上会有一些稳定及效能的问题, 不过更有趣的还有一个地方, 就是他会增进效能而在本机的文件系统上存入访问的内容, 路径如下:


C:\WINDOWS\Temp\Temporary Internet Files\Content.IE5

也就是说, 会占用掉部分的空间, 但实际观察又不全然是这种 cache 的状况, 因为相同的网页, 被重复 reload 时, 该 cache 用的目录居然也会成长, 也就是说, 原来设计为 cache 的功能, 也有可能用不到, 但用不到还没关系, 会一直占用空间成长(无上限), 这个就比较麻烦了.

之前笔者在追踪一个案例(c:碟占用空间持续成长的状况), 原来就是这个组件的毛病, 实际再测, 若是访问的网页是非 xml 时, 似乎就没有这种状况, 不过大多数的应用环境, 数据都会选 xml 的方式来传送, 所以仍会有这个问题存在.

为了解决这个问题, 还有另一组组件可供使用, MSXML2.ServerXMLHTTP, 这组组件提供了更稳定的方式来执行前述功能, 而且几乎完全兼容语法, 并提供了更多的功能, 也不会产生大量的cache 临时文件, 我们来看看微软官网上对此二者的比较:
http://support.microsoft.com/kb/290761
主要差异点如下:
XMLHTTP is designed for client applications and relies on URLMon, which is built upon Microsoft Win32 Internet (WinInet). ServerXMLHTTP is designed for server applications and relies on a new HTTP client stack, WinHTTP. ServerXMLHTTP offers reliability and security and is server-safe. For more information, see the MSXML Software Development Kit (SDK) documentation.

如此一来便可以很清楚地了解在 asp 程序内, 使用 XMLHTTP 及 ServerXMLHTTP 的差异了, 将上面的程序代码改为:

ASP/Visual Basic代码
  1. Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")  
  2. xmlhttp.Open "GET""http://diary.tw/tim/"False  
  3. xmlhttp.Send  
  4. Response.Write xmlhttp.ResponseTEXT  
  5. Set xmlhttp = Nothing  

Tags: asp xmlhttp

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2341

 广告位

↑返回顶部↑