分类: 网络预览模式: 普通 | 列表

关于iframe 高度自动伸缩的js代码

iframe高度自适应父窗口的高度iframe高度自动伸缩

今天遇到一奇怪现象:iframe随内容高度变化而变化的效果在本地测试可以实现,但在远程的服务器上去没有效果。

先用的是下面的代码:

XML/HTML代码
  1. onload="javascript:this.height=this.contentWindow.document.body.scrollHeight+30;"  

 

网上也有人建议用下面的代码

XML/HTML代码
  1. <iframe onload="javascript:this.height=Math.max(this.contentWindow.document.body.scrollHeight, contentWindow.document.documentElement.scrollHeight);"></iframe>  

但遗憾的是都没有能解决问题。

查看更多...

Tags: iframe 高度自适应 自动伸缩

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1779

js与CSS实现文字无缝向上固定高度滚屏

用js与CSS实现的文字按固定的行数向上一屏一屏地滚动。js文字分屏滚动效果、js 文字循环滚动js文字无缝滚动

效果如下图:

效果描述:按预设的行数向上一屏一屏地滚动文字,并且中间会有停顿,无缝连续的效果。通过scrollUlTestn可以在一个页面里多次使用,如DIV的id为scrollUlTest1,scrollUlTest2,则在javascript里定义相应的s1,s2就可以了。

很好用的东西。

JS代码比较简单,实际应用修改起来不难:

JavaScript代码
  1. var ScrollUl=function(containerId, numViews, showTime, scrollTime)  
  2. {  
  3. //定时器变量,因为有移到层上时停止滚动的事件处理,而那时可能还没开始定时器呢,所以先把这个变量声明出来。  
  4. this.timer=null;  
  5. this.numViews = numViews;  
  6. this.showTime = showTime;  
  7. this.scrollTime = scrollTime;  
  8.   
  9. this.container = document.getElementById(containerId);  
  10. var ulChild = this.container.getElementsByTagName('ul');  
  11. //这里只有一个 ul 节点,取得它  
  12. var ul = ulChild[0];  
  13. //ul 是未使用 CSS 明确指定高度的,IE 中用 realstyle 取不到高度,只能得到 auto,而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。  
  14. var rect = ul.getBoundingClientRect();  
  15. var heightAll = rect.bottom - rect.top;  
  16. //每一屏的实际像素高度  
  17. var heightView = heightAll / this.numViews;  
  18. //每移动1像素用的毫秒数  
  19. var msPerPx = this.scrollTime / heightView;  
  20.   
  21. //复制出一份来,接在原块的后面,用于头接尾的显示  
  22. var ulCopy = ul.cloneNode(true);  
  23. ulCopy.style.top = heightAll+'px';  
  24. this.container.appendChild(ulCopy);  
  25.   
  26. //要在事件处理函数中使用当前类,得把 this 赋值给一个此范围的变量,如 itself。其实此范围内的变量都是直接可用的,如:heightView, msPerPx  
  27. var itself = this;  
  28. //向上滚动的函数  
  29. var scrollView = function()  
  30. {  
  31. var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ;  
  32. //移动到顶后,把位置复原,两个块继续从 0 开始向上移。  
  33. if (oldTop < -heightAll)  
  34. {  
  35. oldTop = 0;  
  36. }  
  37. ul.style.top = (oldTop - 1) +'px';  
  38. ulCopy.style.top = (oldTop + heightAll- 1) +'px';  
  39.   
  40. //每滚一整屏多停一会。oldTop-1 是为了让其停在整数位置。  
  41. var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;  
  42. itself.timer = setTimeout(scrollView, duration);  
  43. };  
  44.   
  45. //把 slide 定义为 prototype 的方法时,似乎这样 setTimeout(itself.slide, itself.showTime); 定时操作不灵,而只能是局部函数才能定时操作,如果带参数,还得封装成匿名函数:  
  46. itself.timer = setTimeout(scrollView, itself.showTime);  
  47. //鼠标移上时停止滚动  
  48. this.container.onmouseover = function()  
  49. {  
  50. window.clearTimeout(itself.timer);  
  51. };  
  52. //鼠标移开时继续滚动,不用区分当时是在整屏停止还是滚动中了,全都按静止时间来延时就得了。  
  53. this.container.onmouseout = function()  
  54. {  
  55. itself.timer = setTimeout(scrollView, itself.showTime);  
  56. };  
  57. };  
  58. window.onload = function()  
  59. {  
  60. //第一个总共 20 行,每次显示 4 行,分 5 屏  
  61. var s1 = new ScrollUl('scrollUlTest1', 5, 3000, 1000);  
  62. //第二个总共 18 行,每次显示 6 行,分 3 屏  
  63. //var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000);  
  64. };  

查看更多...

Tags: js CSS 文字向上滚屏 文字特效 文字循环滚动 文字无缝滚动

分类:网络 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4315

JS和CSS实现的点击小图片弹出DIV层显示大图片(点击小图显示大图)

先是显示小图片或图片缩小显示,点击后显示大图(原图),用JS+CSS实现。

可用于相册或产品图片展示功能。

显示小图片时效果如下:

点击后显示大图片的效果图如下:

查看更多...

Tags: js CSS 相册 显示大图 点击小图显示大图

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5233

兼容FireFox和IE的js日期(日历)控件

兼容IE和火狐FireFox的js日期控件(js日历控件),源码在演示页右键即可获得,效果如下图:

可以很方便地调节年份与月份:

查看更多...

Tags: js 日期控件 日历控件

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3903

CSS自适应宽度圆角按钮及Tab选项卡效果

CSS自适应宽度圆角按钮

首先做一个足够长度的图片,然后通过设置背景图片,让父元素显示按钮的左部,子元素显示按钮的右部,这样就可以随着不同的宽度显示完整的按钮。

让子元素的背景图片右对齐,这样就可以覆盖父元素的背景,而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。

优点:自适应宽度变化;各浏览器显示效果一致;

查看更多...

Tags: CSS 背景 图片定位圆角按钮

分类:网络 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 3850

ASP_0147|500_Server_Error

IIS6.0,ASP,2003,SQL server2005,最近喜欢报ASP_0147|500_Server_Error错误,以前几乎没有出现过。

报错的是不同的文件,但相同的文件在不同的时间可能又不报错。

有人提议从微软的网站上下载相关文件修复,但没有弄清楚要下载什么文件。

存疑中,记录,求解ing。

Tags: ASP 0147 IIS 服务器错误

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4251

javascript用法点滴积累

1、javascript:void(0)是起什么作用的

javascript:void(0)点击这个链接会触发onclick事件,而页面本身不会刷新。
javascript:void(0)的意思就是什么也不做!他不是页面URL,而是一个javascript语句void(0),void是一个操作符,该操作符指定要计算一个表达式但是不返回值,这个要计算的表达式是“0”,所以,这个基本是坑爹的写法,完全是糊弄浏览器的。如果你鼠标悬停于一个链接上,在浏览器底部状态栏上显示该链接的目标地址是这个的话,说明这个网页的编写者希望这个链接被点击时不是直接跳转到某个新页面,而是执行其他操作(例如某个预设的JS函数)。那为什么要加这个呢?因为链接的HTML代码(<a href="地址">链接</a>)中“href”参数只要不为空,点击该链接时,页面会自动跳转,如果指定的“href”不合法,页面会跳转到自身,也就是刷新,那如果想用该链接来干点别的什么事呢?那我们就要为“href”指定一个合法但又不会刷新页面的参数,所以“javascript:void(0)”就派上用场啦,我们可以这样改(<a href="javascript:void(0)" onclick="干点别的事">链接</a>),这样点击这个链接会触发onclick事件,而页面本身不会刷新,任务达成!

2、点击事件触发另外元素的点击事件

通过点击事件触发另一点击事件,效果就是点击A相当于点击了B,用A的点击事件来触发B的点击事件。

XML/HTML代码
  1. <a href="javascript:void(0);" onclick="document.getElementById('m01').fireEvent('onclick')">点击可以触发“点击事件B”的点击事件</a>    
  2. <a href="javascript:void(0);" onclick="checkdata()" id="m01">点击事件B</a>  

查看更多...

Tags: javascript 点击 void 获取页面信息 DOM 事件触发

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2103

jQuery/javascript图片特效展示

jQuery/javascript图片特效展示,图片展示特效。意在收集一些认为效果比较有创意,可能在工作中用得上的特效图片展示代码。

类似手风琴的效果,演示链接:http://www.ancher.cn/example/javascript7/

 

众里寻她效果,文字预先提示。演示链接是:http://www.ancher.cn/example/javascript9/

查看更多...

Tags: 图片展示 javascript jQuery

分类:互联网 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1861