JavaScript网页特效实例大全【2025|PDF下载-Epub版本|mobi电子书|kindle百度云盘下载】

JavaScript网页特效实例大全PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1篇 JavaScript网页实例2

第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.1 0屏蔽IE浏览器中图片上自动出现的保存图标62

3.1 1屏蔽网页中所有的脚本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牛顿纪念日苹果下落特效Logo172

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

7.8 仿NBA网站图片切换174

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

7.10 盯着你看的眼睛Logo177

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

10.33 多种文字炫彩效果399

第11章 链接特效（教学视频：18分钟）401

11.1 滚动变色的链接401

11.2 带提示框的链接404

11.3 链接变换背景色404

11.4 霓虹灯链接405

11.5 链接的动态变换406

11.6 带注释的链接409

11.7 链接的动画注释410

11.8 鼠标滑入改变链接的背景411

11.9 翻滚的文本链接411

11.10 顺序渐现的链接412

11.11 链接弹出动画415

11.12 字体会改变的链接416

11.13 鼠标滑入链接出现移动的注释417

第12章 文本框特效（教学视频：14分钟）419

12.1 单击清空文本框419

12.2 当前时间显示在文本框中419

12.3 任意变换文本框大小420

12.4 文本框弹出选择框效果421

12.5 鼠标移入文字改变文本框内容423

12.6 根据复选框内容改变文本框内容424

12.7 单击文本框显示验证码424

12.8 回车切换文本框425

12.9 单击按钮选择文本框内容425

12.10 文本框打字效果426

12.11 带下划线的文本框427

12.12 随输入文字长度变换长度的文本框427

12.13 带行号的文本框428

12.14 鼠标移入文字改变文本框内容431

第13章 时间特效（教学视频：18分钟）432

13.1 标题栏的当前时间432

13.2 根据当前时间显示对应问候432

13.3 考试倒计时433

13.4 网页阴影时钟434

13.5 定时关闭网页435

13.6 时间输入框默认内容为当天436

13.7 计算30天以后的日期与时间436

13.8 当前时间在12小时制和24小时制下的转换437

13.9 计算用户浏览网页的时间438

13.10 计算网页最后修改的时间439

13.11 单击按钮显示当前日期439

13.12 用中文显示当前日期440

13.13 检查输入年份是否为闰年441

13.14 显示今天星期几442

13.15 状态栏即时时间442

13.16 AM、PM时间标志443

13.17 个性时钟444

13.18 时间倒影445

13.19 查询全球时间446

13.20 个性日历449

13.21 幼儿园小朋友生日提醒工具451

13.22 有农历的日历452

第14章 数字特效（教学视频：19分钟）455

14.1 随机生成数字455

14.2 打乱一组数字的显示顺序456

14.3 显示一组数字中最大的数字456

14.4 对一组数字从小到大排序456

14.5 对输入数字大小进行限制457

14.6 限定输入全角数字457

14.7 数字金额转换成中文金额458

14.8 输入数字金额显示中文金额460

14.9 进制转换462

14.10 单击按钮控制文本框中数字的增减463

14.11 骇客帝国数字特效463

14.12 数字转换成英文表示465

14.13 单击按钮对数列进行排序466

14.14 数字电子表468

14.15 输入数字自动增加千分符469

14.16 跟随鼠标的数字470

14.17 商品折扣计算器472

14.18 数字前方补零效果473

14.19 网页计算器473

14.20 删除一组数字中的指定数字475

14.21 鼠标移入数字变大476

14.22 判断奇偶数476

14.23 九九乘法表477

14.24 投票滚动条477

14.25 判断输入数字位数478

14.26 内衣尺码计算器479

14.27 文件下载时间计算器480

14.28 文件在不同计量单位下的大小转换481

14.29 对数计算482

14.30 计算输入文字所占比重483

14.31 解简单方程484

14.32 比较两数大小486

14.33 模拟乘法口诀表487

14.34 装修瓷砖数量计算器487

14.35 功能强大的计算器489

第15章 控件特效（教学视频：17分钟）492

15.1 日期选择框492

15.2 表单输入框内容关联效果496

15.3 列表框内容添加和移动497

15.4 可增删内容的下拉列表框499

15.5 垂直展开的菜单500

15.6 特殊属性的文本框503

15.7 不同按钮可将同一页面提交到不同地方504

15.8 拥有多个提交方法的表单505

15.9 加载时自动获取焦点的文本框505

15.10 文本框与datalist合二为一505

15.11 文本框未获得焦点时淡色显示默认文字506

15.12 表格隔行换色506

15.13 列表框内容链接目标网站508

15.14 列表框自动生成某月日期列表508

15.15 可放大并链接目标网站的表格项509

15.16 获取表单属性510

15.17 单击按钮修改文本框内容511

15.18 获取控件位置513

15.19 判断控件类型514

15.20 判断表单内容是否发生变化514

15.21 文本框显示记事本文件内容515

15.22 单击按钮添加文本框516

15.23 文本框提示516

15.24 限制选择数量的复选框517

15.25 Radio控件控制复选框变换518

15.26 用户注册验证519

15.27 fieldset简例523

第16章 密码特效（教学视频：11分钟）525

16.1 字符串中介加密解密525

16.2 字符串加密解密527

16.3 三级密码强度检测528

16.4 四级密码强度检测529

16.5 密码修改表单范例530

16.6 能自主切换显示密码的文本框532

16.7 MD5加密532

16.8 文字与数字的加解密转换535

16.9 限制密码输入错误的次数536

16.10 判断验证码的正确性537

16.11 输入密码后登录538

第2篇 jQuery特效实例542

第17章 JavaScript与CSS结合特效（教学视频：20分钟）542

17.1 层叠样式表滤镜的图片水印效果542

17.2 层叠样式表实现按一定比例缩小原图543

17.3 层叠样式表实现等比例缩小原图543

17.4 层叠样式表实现图片自适应宽度大小544

17.5 层叠样式表制作的带间隔的大边框544

17.6 层叠样式表实现的黑白彩色图片切换特效545

17.7 层叠样式表实现图片模糊特效545

17.8 层叠样式表实现图片自适应大小546

17.9 层叠样式表实现层叠边框547

17.10 层叠样式表实现的缩略图放大特效547

17.11 层叠样式表制作的圆角边框548

17.12 层叠样式表滤镜特效549

17.13 层叠样式表制作的艺术相框551

17.14 层叠样式表实现图片小阴影552

17.15 层叠样式表滤镜变更图片透明度552

17.16 层叠样式表制作的立体边框553

17.17 层叠样式表制作的图片滚动条554

17.18 层叠样式表制作的单击缩略图无刷新显示原图特效554

17.19 层叠样式表制作的图片平移显示注释特效555

17.20 层叠样式表实现鼠标移入添加阴影特效556

17.21 层叠样式表图片切换特效557

17.22 层叠样式表实现嵌套边框特效557

17.23 层叠样式表实现鼠标滑入图片变大558

17.24 层叠样式表制作的不规则图片鼠标滑入效果558

17.25 层叠样式表实现模糊变清晰559

17.26 层叠样式表实现的“回”字边框560

17.27 叠样式表制作带说明的边框560

17.28 层叠样式表实现绚丽切换效果561

17.29 层叠样式表滤镜集锦562

17.30 层叠样式表制作的随鼠标滑入闪动的图片563

17.31 层叠样式表轻松实现图片阴影563

17.32 层叠样式表实现的星级评定效果564

17.33 层叠样式表实现的图片幻灯切换效果565

17.34 CSS 3 立体导航菜单566

17.35 CSS 3卷角菜单568

17.36 CSS 3立体文本框570

17.37 CSS 3+HTML5日月星辰变换特效573

17.38 CSS 3手风琴折叠效果574

17.39 CSS 3八卦阵576

17.40 CSS 3动态导航条578

17.41 CSS 3仿iPhone短信提示框579

17.42 CSS 3异形登录界面580

第18 章 jQuery特效（教学视频：20分钟）583

18.1 jQuery图片幻灯切换特效583

18.2 jQuery计算器585

18.3 jQuery单击链接自动消失587

18.4 jQuery简易菜单588

18.5 jQuery鼠标单击事件589

18.6 jQuery鼠标滑入弹出提示590

18.7 jQuery渐变指示灯591

18.8 jQuery拖曳特效592

18.9 jQuery文本框文字随鼠标滑入滑出隐藏和显示593

18.10 jQuery鼠标滑入高亮效果595

18.11 jQuery完美分页596

18.12 jQuery更换背景颜色597

18.13 jQuery限定文本框字数598

18.14 jQuery 立体滚动文字599

18.15 jQuery浮动提示600

18.16 jQuery浮动选项卡601

18.17 jQuery经典二级导航条602

18.18 jQuery自动切换的选项卡菜单603

18.19 jQuery可拖曳的区域604

18.20 jQuery滚动新闻栏606

18.21 jQuery渐变色606

1 8.2 2 jQuery可控文字颜色608

18.23 jQuery鼠标滑入切换的选项卡609

18.24 jQuery注释特效610

18.25 jQuery切换特效611

18.26 jQuery导航条612

18.27 jQuery层切换特效613

18.28 jQuery横向焦点位移菜单613

18.29 jQuery拉伸菜单614

18.30 jQuery网页工具条616

18.31 jQuery图书翻页特效617

18.32 jQuery鼠标单击图片翻页618

第3篇 Active技术的应用622

第19章 JavaScript与ActiveX技术（教学视频：13分钟）622

19.1 ActiveX组件基础622

19.1.1 ActiveX组件的概念622

19.1.2 ActiveX的分类623

19.1.3 ActiveX组件注册方法623

19.2 ActiveX组件、ASP与JavaScri624

19.2.1 ASP与ActiveX组件624

19.2.2 JavaScript和ASP的关系625

19.3.JavaScript脚本调用ActiveX控件实例625

19.3.1 在COM组件中调用JavaScript函数625

19.3.2 从页面JavaScript向COM组件传递结构数组626

19.3.3 枚举IE窗口的内容，并调用其中的脚本628

19.3.4 在VC中执行脚本629

19.4 小结630

第20章 JavaScript操作数据库（教学视频：7分钟）631

20.1 JavaScript操作数据库基础631

20.1.1 OLE DB技术和ODBC技术631

20.1.2 ADO对象633

20.1.3 创建数据库连接633

20.1.4 使用connection对象连接数据库633

20.2 JavaScript 与ASP合并使用操作数据库634

20.2.1 Recordset对象634

20.2.2 使用Recordset对象读取数据并输出634

20.2.3 插入记录634

20.2.4 删除记录635

20.2.5 数据库记录的分页显示635

20.3 JavaScript操作数据库实例636

20.3.1 JavaScript连接Oracle实例636

20.3.2 JavaScript连接数据库实例636

20.3.3 JavaScript查询Access数据库637

20.3.4 JavaScript从Access数据库中添加记录638

20.3.5 JavaScript从Access数据库中删除记录638

20.3.6 JavaScript从Access数据库中修改记录639

20.4 小结639

附录A JavaScript对象模型图640

附录B JavaScript事件大全641