第1篇 javaScript网页实例

第1章 页面类特效（教学视频：19分钟） 2

1.1 背景颜色在线改变 2

1.2 舞台效果 3

1.3 下雨的页面效果 6

1.4 QQ式页面导航栏 8

1.5 拉幕效果 10

1.6 使用调色板更换页面背景 11

1.7 飞舞的星星 13

1.8 选择进入页面的效果 15

1.9 网页加载效果 15

1.10 自动滚屏页面 16

1.11 QQ客服随屏页面效果 17

1.12 雪花纷飞的页面 19

1.13 MSN消息提示效果 21

1.14 自动最大化页面 22

1.15 自动刷新页面 23

1.16 页面的前进与后退 23

1.17 保护页面内容不被复制 24

1.18 保护页面源代码不被复制 25

1.19 保护页面不被其他网站使用框架加载 25

1.20 在页面中调用其他网页 26

1.21 倒计时 26

1.22 载入页面时显示滚动条 28

1.23 禁用页面另存功能 29

1.24 禁用页面被加载到缓存中 30

1.25 打开页面时弹出对话框 30

1.26 自动收藏当前页面 31

1.27 自动设定当前页面为默认加载页面 31

1.28 冻结窗口 32

1.29 禁用页面中的脚本 33

1.30 随机修改页面标题 33

1.31 页面中的播放器 34

1.32 页面信息的传递 35

1.33 批量访问页面元素 36

1.34 改变页面元素位置 36

1.35 页面动画 37

1.36 页面元素拖曳 38

1.37 页面颜色渐变 40

1.38 基于浏览器类型的重定向 43

1.39 页面加载后自动播放声音 43

1.40 显示页面最后修改时间 44

1.41 页面状态栏实时显示当前时间 44

1.42 页面的前进、后退与刷新 45

1.43 页面定时弹出窗口 46

1.44 将页面上过长的字符串按长度要求超出部分显示省略号 46

1.45 页面树形菜单 47

第2章 按钮特效（教学视频：15分钟） 49

2.1 改变页面某列表框控件的内容时，显示不同的按钮 49

2.2 按钮热键 50

2.3 确认某个动作前的提示按钮 51

2.4 图形按钮 51

2.5 平面按钮 52

2.6 嵌入按钮 53

2.7 通过按钮刷新页面 53

2.8 禁止按钮连击 54

2.9 底部显示文字的按钮 55

2.10 动态创建按钮 55

2.11 通过按钮改变状态栏 56

2.12 通过按钮控制文本产生渐变效果 56

2.13 按钮获取焦点 58

第3章 按键屏蔽特效（教学视频：10分钟） 59

3.1 屏蔽键盘所有键 59

3.2 屏蔽鼠标右键 59

3.3 屏蔽F5键刷新页面 60

3.4 屏蔽浏览器右上角“最小化”、“最大化”和“关闭”按钮 60

3.5 屏蔽退格键 61

3.6 屏蔽IE后退按钮 61

3.7 屏蔽主窗口滚动条 61

3.8 抓屏并不断地清空剪贴板 62

3.9 屏蔽网站的打印功能 62

3.10 屏蔽IE浏览器中图片上自动出现的保存图标 62

3.11 屏蔽网页中所有的脚本 63

第4章 验证码特效（教学视频：21分钟） 64

4.1 限制长度 64

4.2 限定汉字 65

4.3 限定英文 65

4.4 限定数字 66

4.5 限定英文和数字 66

4.6 验证邮箱格式 67

4.7 屏蔽关键字 68

4.8 验证两次输入的密码是否相同 69

4.9 验证表单项不为空 70

4.10 比较两个表单项的值是否相同 71

4.11 验证表单项只能为数字和下划线 72

4.12 限定表单项输入值或长度 73

4.13 限定表单项不能输入的字符 74

4.14 检查一段字符串是否全由数字组成 74

4.15 判断是否是字符 75

4.16 验证电话号码格式 76

4.17 判断输入是否为中文 77

4.18 判断用户名是否为数字、字母、下划线 78

第5章 鼠标特效（教学视频：18分钟） 79

5.1 鼠标单击图片后切换为其他图片 79

5.2 鼠标单击小图无刷新放大图片 79

5.3 鼠标放到图片上会滑出提示文字 80

5.4 鼠标放上图片错位效果 82

5.5 鼠标经过时产生浮动层放大图像 82

5.6 鼠标经过图片放大效果 83

5.7 鼠标经过图片更换图片 84

5.8 鼠标经过图片时，下方出现注释 85

5.9 鼠标经过时，图片由灰色变彩色 86

5.10 图片在鼠标的控制下横向滚动 86

5.11 鼠标拖动图片 89

5.12 鼠标拖动时图片自由变化大小 91

5.13 鼠标移出图片抖动 91

5.14 图片透明度随着鼠标移入移出而改变 93

5.15 鼠标移入缩略图显示出大图 94

5.16 图片在鼠标移入时变清晰 96

5.17 图片边框在鼠标经过时变色 97

5.18 在网页上单击鼠标的地方显示图片 97

5.19 鼠标滑入时图片变清晰，鼠标划出时图片变模糊 98

5.20 图片响应鼠标特效 99

5.21 鼠标滑入动画加载大图 100

5.22 鼠标滑过图片出现边框 104

5.23 鼠标滑入图片改变透明度 104

5.24 缩略图响应鼠标滑入图片切换 105

5.25 鼠标滑入后悬停，图片交换 108

5.26 鼠标滑入小图，跟随鼠标移动展示大图 109

5.27 带图片的鼠标悬停提示 111

5.28 响应鼠标变化的绚丽图片特效 112

5.29 感应鼠标的图片遮罩动画效果 115

5.30 鼠标滑入变换内容 116

5.31 跟随鼠标旋转的星星 117

5.32 鼠标滑入图片渐变高亮 119

5.33 图片感应鼠标的虚实效果 120

5.34 鼠标单击控制图片左右滚动 120

5.35 全面禁用鼠标右键 124

5.36 全面禁用鼠标滚轮 124

5.37 全面禁用鼠标右键复制粘贴 125

5.38 跟踪鼠标显示坐标 126

5.39 围绕鼠标跳跃的文字 127

5.40 鼠标移入移出某个区域时改变颜色 128

5.41 鼠标移入移出时控件特效 128

5.42 跟随鼠标的汉字 129

5.43 跟随鼠标的小点点 131

5.44 跟随鼠标漂移的文字 132

5.45 鼠标燃放烟花 133

5.46 带时钟的鼠标 137

5.47 吐泡泡的鼠标 141

5.48 会变化的鼠标指针 143

5.49 跟踪鼠标的雪花 143

第6章 类淘宝特效（教学视频：11分钟） 146

6.1 类淘宝图片切换，类似相册播放效果 146

6.2 淘宝网宝贝图片预览效果 149

6.3 淘宝网广告图片幻灯效果 151

6.4 淘宝网图片幻灯片上下滚动切换效果 153

6.5 淘宝式导航条 155

6.6 淘宝式选择菜单 156

6.7 淘宝产品列表的显示与隐藏 159

6.8 淘宝网纵向分类菜单 160

6.9 淘宝的地区选择菜单 162

第7章 各类网站特效（教学视频：21分钟） 164

7.1 广告图片上下滚动替换 164

7.2 仿flash广告图片左右滚动替换的效果 165

7.3 广告图片渐变翻页效果 168

7.4 照片分享网站的图片预览效果 169

7.5 图片滑动放大效果 170

7.6 Google牛顿纪念日苹果下落特效Logo 172

7.7 运用marquee标签的图片滚动特效 173

7.8 仿NBA网站图片切换 174

7.9 仿nVida网站图片滑动切换 176

7.10 盯着你看的眼睛Logo 177

7.11 仿FLASH图片光照特效 179

7.12 心形屏保效果 179

7.13 仿天极网首页幻灯图片切换特效 182

7.14 百度图片切换特效 184

7.15 腾讯图片滑动切换特效 185

7.16 仿新浪焦点图变换自动切换大图效果 188

7.17 搜狐女人频道首页的图片切换效果 190

7.18 腾讯商品图片滚动效果 192

7.19 腾讯网站的图片切换效果 193

7.20 天极网图片切换效果 195

第8章 焦点图特效（教学视频：7分钟） 197

8.1 焦点图片切换过程自动变更切换效果 197

8.2 单击小图弹出大图 199

8.3 动感图片标题的焦点图切换 201

8.4 带加载过程的焦点图片切换效果 204

8.5 简洁的鼠标滑入焦点图切换效果 206

第9章 图片特效（教学视频：20分钟） 208

9.1 图片的渐显效果 208

9.2 图片放大查看特效 209

9.3 图片滚动展示 210

9.4 图片滚动酷炫效果 211

9.5 图片垂直和水平翻转效果 211

9.6 图片放大效果 212

9.7 图片幻灯效果 215

9.8 图片扭曲变形效果 217

9.9 图片淡入淡出切换特效 218

9.10 图片无缝滚动 220

9.11 图片90°旋转 222

9.12 图片选择器 223

9.13 图片预加载 226

9.14 图片预加载复杂效果 227

9.15 图片的渐隐渐现效果 228

9.16 图片翻页效果 229

9.17 图片放大效果 230

9.18 图片自右向左滚动 231

9.19 图片在按钮控制下左右无缝滚动效果 232

9.20 图片自动滚动效果 236

9.21 图片横纵向同时滚动效果 237

9.22 图片在鼠标控制下连续左右滚动效果 239

9.23 图片悬停滚动切换效果 241

9.24 图片随着鼠标滑入缩略图切换效果 245

9.25 图片快速移动切换效果 247

9.26 图片通过悬浮的左右箭头切换效果 248

9.27 图片简单切换效果 251

9.28 图片渐现加载效果 252

9.29 图片可控垂直无缝滚动效果 253

9.30 图片自动上翻效果 255

9.31 图片水平切换效果 257

9.32 图片左右浮动效果 258

9.33 图片垂直滚动效果 260

9.34 图片杂色效果 264

9.35 箭头图片控制内容框内容滚动 265

9.36 图片光影效果 266

9.37 图片走马灯效果 267

9.38 图片通过缩略图切换效果 268

9.39 图片雷达扫描效果 269

9.40 图片闪动效果 270

9.41 图片在鼠标滑入时垂直滚动 271

9.42 图片垂直浮动效果 272

9.43 图片随机切换效果 273

9.44 图片立体椭圆轨迹旋转切换效果 274

9.45 图片向上无缝滚动效果 277

9.46 图片向下无缝滚动效果 278

9.47 图片向左无缝滚动效果 279

9.48 图片向右无缝滚动效果 280

9.49 网页背景图片通过单击缩略图切换效果 281

9.50 图片漂浮效果 281

9.51 图片放入椭圆中 283

9.52 滚动波浪效果 283

9.53 图片探照灯效果 285

9.54 图片变换位置浮现效果 285

9.55 禁止下载图片 287

9.56 图片弹跳效果 287

9.57 旋转圆圈效果 290

9.58 穿越星空效果 292

9.59 图片单击滚动切换效果 294

9.60 图片单击上下滚动切换效果 295

9.61 图片随鼠标滑入浮动切换效果 298

9.62 图片随鼠标滑入放大效果 299

9.63 带阴影的图片边框 300

9.64 图片前后顺序改变 300

9.65 弹性透明图片效果 301

9.66 图片放大镜效果 305

9.67 图片水平渐变切换效果 306

9.68 图片两种特殊边框效果 307

9.69 图片自动缩小效果 307

9.70 鼠标单击控制显示和隐藏图片 308

9.71 图片缩放效果 309

9.72 图片随鼠标滑入由模糊变透明 310

9.73 图片平滑切换效果 311

9.74 根据图片链接显示图片的大小数据 314

9.75 图片受控放大缩小 315

9.76 图片水平移动效果 316

9.77 判断图片是否能够加载，失败则替换为默认图片 317

9.78 根据图片链接判断是否存在 317

9.79 图片水平排列由左向右依次加载 318

9.80 图片随机加载效果 319

9.81 图片立体幻灯切换效果 320

9.82 图片上翻切换效果 323

9.83 任意改变顺序的照片墙 324

9.84 图片被光圈扫过的部分显示效果 329

9.85 仿GIF图片效果 330

9.86 鼠标单击缩略图弹出大图效果 331

9.87 图片的各种滤镜效果 335

9.88 单击展示大图的相册效果 335

9.89 图片百叶窗切换效果 336

9.90 图片立体变换造型切换效果 340

9.91 图片弹球效果 341

9.92 根据用户输入数值改变图片透明度 342

9.93 图片横向匀速滚动效果 343

9.94 图片有停顿地横向滚动效果 344

9.95 图片滚轴切换效果 346

9.96 图片禁止下载 351

第10章 文字特效（教学视频：25分钟） 353

10.1 文字波浪效果 353

10.2 网页文字背景特效 355

10.3 彩虹效果的文字 356

10.4 闪动效果的文字 357

10.5 鼠标滑入改变透明度的文字 358

10.6 逐个变色的文字 359

10.7 碎片组成的文字 360

10.8 会变色的文字效果 363

10.9 旋转效果的文字 364

10.10 霓虹灯效果的文字 365

10.11 背景变换的飞舞文字 366

10.12 跳舞效果的彩色文字 369

10.13 状态栏飞出文字 374

10.14 文字无缝上翻效果 375

10.15 七彩文字随鼠标滑入向上滚动 376

10.16 鼠标滑入文字弹出注释 377

10.17 火焰效果文字切换 378

10.18 追踪鼠标的文字 380

10.19 波纹文字效果 381

10.20 文本框中变换的文字 383

10.21 鼠标滑入文字链接带边框 385

10.22 状态栏中闪烁的文字 386

10.23 纵向排列的文字 387

10.24 电子广告牌文字滚动效果 388

10.25 水波文字效果 388

10.26 文字释放效果 389

10.27 闪烁的彩色文字效果 390

10.28 用户自定义状态栏文字效果 391

10.29 滚动的网页标题文字倒序效果 391

10.30 网页新闻滚动效果 392

10.31 坠落的文字 393

10.32 缩放自如的文字 397