提升网页视觉效果：常用JS代码实例

需积分: 9 38 浏览量更新于2024-08-02 收藏 114KB DOC 举报

本文档主要介绍了在网页设计中使用JavaScript实现的几种常见的特效和功能，适用于不同版本的Internet Explorer（IE）以及其他浏览器。以下是对这些知识点的详细说明： 1. **滚动条颜色定制**: 该部分展示了如何使用CSS来定制滚动条的颜色，包括滚动条箭头、基本色、暗影、凸出部分、空白区域以及立体滚动条的各个部分。通过`scrollbar-*`属性，如`SCROLLBAR-FACE-COLOR`、`SCROLLBAR-HIGHLIGHT-COLOR`等，可以创建个性化的滚动条样式，但请注意，这些属性对IE5.5及更高版本有效。 2. **取消文本选取与防止复制**: 使用`<body onselectstart="return false;">`这段代码可以阻止用户在页面上进行文本选取或拖动选区，从而达到保护版权或限制信息传播的目的。这有助于提高用户体验，同时也能在一定程度上保护网站内容不受意外复制。 3. **禁止粘贴功能**: `onpaste="return false;"`是阻止浏览器默认的粘贴行为，这对于保护网站免受恶意内容注入或者防止用户误操作是有用的。这个功能可以在需要时在特定元素上应用。 4. **保持页面始终加载在框架内**: 通过JavaScript代码`<script language="JavaScript">...</script>`，当页面位于顶级窗口（即无框架）时，会自动跳转到指定的框架页面（如"frames.htm"）。这种设计通常用于多窗口或框架结构的网站，确保用户始终在预期的布局内浏览。 5. **修改IE地址栏图标**: 使用`<link rel="ShortcutIcon" href="favicon.ico">`这一HTML标签，可以设置网站的快捷图标（通常显示在浏览器地址栏左侧），使用户可以通过图标快速识别网站。"favicon.ico"是一个小图标文件，通常放在网站根目录下。 6. **状态栏动态提示信息**: 使用JavaScript编写了一个定时器函数，每隔一段时间在浏览器状态栏中显示一条欢迎消息，并且可以通过函数`Helpor_net()`控制消息的展示。这种方式常用于提供用户交互反馈或简单的消息通知。总结起来，这些JavaScript代码片段涵盖了如何利用浏览器特有的特性（如滚动条颜色和IE的行为）来增强网站的外观和用户体验，同时也提供了保护网站内容和结构的方法。熟练掌握这些技术对于开发交互性更强的Web应用至关重要。

document.bgColor=0xffffFF  

if (c<0)  

 {status=8}  

}  

if (status == 4)  

{  

c=c+16  

document.bgColor=c*65536  

document.fgColor=(255-c)*65536  

if (c > 239)  

 {status=5}  

}  

if (status == 5)  

{  

c=c-16  

document.bgColor=c*65536  

document.fgColor=(255-c)*65536  

if (c < 0)  

 {  

 status=6  

 cycle=cycle-1  

 if (cycle > 0)  

  {  

  if (done == 1)  

 {status=7}  

  else  

 {status=4}  

  }  

 }  

}  

if (status == 6)  

{  

document.title = ""  

alert("")  

cycle=2  

status=4  

done=1  

}  

if (status == 7)  

{  

c=c+4  

document.bgColor=c*65536  

document.fgColor=(255-c)*65536  

if (c > 128)  

 {status=8}  

}  

if (status == 8)  

{  

window.moveTo(0,0)  

sx=screen.availWidth  

sy=screen.availHeight  

window.resizeTo(sx,sy)  

status=9  

}  

var timer=setTimeout("move()",0.3)  

}  

</script>



注：修改背景色：

在 javascript 的第 5－6 行：

document.bgColor=0xFFFFFF

document.fgColor=0xFFFFFF

---------------------------------------------------------------------------------



12、页面开场白



将下面的代码复制到<body>~</body>里

<meta http-equiv=Page-Enter content=revealTrans(Transition=23,Duration=1.000)>



注：22 种不同的效果：

<meta http-equiv=Page-Enter content=revealTrans(Transition=1,Duration=1.000)> 　// 内向外方形

<meta http-equiv=Page-Enter content=revealTrans(Transition=2,Duration=1.000)> 　// 外向内圆形

<meta http-equiv=Page-Enter content=revealTrans(Transition=3,Duration=1.000)> 　// 内向外圆形

<meta http-equiv=Page-Enter content=revealTrans(Transition=4,Duration=1.000)> 　// 下至上推升

<meta http-equiv=Page-Enter content=revealTrans(Transition=5,Duration=1.000)> 　// 上至下推升

<meta http-equiv=Page-Enter content=revealTrans(Transition=6,Duration=1.000)> 　// 左至右拉屏

<meta http-equiv=Page-Enter content=revealTrans(Transition=7,Duration=1.000)> 　// 左至右拉屏

<meta http-equiv=Page-Enter content=revealTrans(Transition=8,Duration=1.000)> 　// 左至右半百叶窗

<meta http-equiv=Page-Enter content=revealTrans(Transition=9,Duration=1.000)> 　// 上至下半百叶窗

<meta http-equiv=Page-Enter content=revealTrans(Transition=10,Duration=1.000)> 　// 左至右百叶窗

<meta http-equiv=Page-Enter content=revealTrans(Transition=11,Duration=1.000)> 　// 上至下百叶窗

<meta http-equiv=Page-Enter content=revealTrans(Transition=12,Duration=1.000)> 　// 麻点显示

<meta http-equiv=Page-Enter content=revealTrans(Transition=13,Duration=1.000)> 　// 由外向内开场

<meta http-equiv=Page-Enter content=revealTrans(Transition=14,Duration=1.000)> 　// 由内向外开场

<meta http-equiv=Page-Enter content=revealTrans(Transition=15,Duration=1.000)> 　// 由上下向里开场

<meta http-equiv=Page-Enter content=revealTrans(Transition=16,Duration=1.000)> 　// 由里向上下开场

<meta http-equiv=Page-Enter content=revealTrans(Transition=17,Duration=1.000)> 　// 由右上向左下

剩余32页未读，继续阅读

lyq5655779

粉丝: 62
资源: 10

提升网页视觉效果：常用JS代码实例

网页制作各种JS特效

非常漂亮的JS图片预览特效

10种漂亮的JS广告

css+html+js+vue实战

帮我写一个关于江苏省白塔高级中学的网页设计代码，包含html，css，js

html css js jquery静态网页

html+css+javascript网页制作案例教程(第2版)下载

bootstrap响应式网页

以HTML5、CSS3进行网页设计与制作

最新资源