如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

一、总结

1、动画效果可能是 CSS 实现的,也可能是 JS 实现的。

2、直接Chrome的F12调试即可, 页面可以看到js的源代码的

二、如何查看一个网页特定效果的js代码

问题:

如何查看一个网页中特定效果的js代码~?比如鼠标悬浮有个动画效果如何查看对应的js代码?

解答:

css也可实现动画效果

回答问题一:
动画效果可能是 CSS 实现的,也可能是 JS 实现的。
如果是 CSS 实现的,审查元素就可以了
如果是 JS 实现的,通过全局搜索元素的 ID 或是 class,一般都能找到事件绑定函数。

删除法:

使用排除法,把网站保存到本地,逐个删除javascript代码块,看看到底是哪块在执行

chrome:Event Listeners

chrome 浏览器中的 F12有这个功能 'Event Listeners'
你也可以尝试使用 "Visual Event" 书签
firebug的一个插件 firequery

Chrome--审查元素--network:

点击要调试的网页上的js代码块(我也不怎么会描述,大概就是这个意思),就会出现包含引用的js.

页面中直接可以看到

在网页中点右键,然后查看源文件,如果JS代码是直接写在HTML文件中的这样就能看到了,如果JS代码是在外部文件的,那就从HTML代码中找到js外部文件的网址,然后下载回来就能看了。

开发者工具中的Elements中
用Chrome、火狐等(其它浏览器操作类同),打开浏览器后,按F12。或者打开开发者工具,可以查看相应的html、css、js等内容。

 
 
 

如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)的更多相关文章

  1. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  2. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  3. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  4. Android 动画之View动画效果和Activity切换动画效果

    View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...

  5. AndroidUI 视图动画-混合动画效果 (AnimationSet)/动画效果监听

    在前面介绍了几种动画效果:透明动画效果(AlphsAnimation).移动动画效果(TranslateAnimation).旋转动画效果(RotateAnimation).缩放动画效果(ScaleA ...

  6. css动画效果之transition(动画效果属性)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python3获取一个网页特定内容

    我们今天要爬取的网址为:https://www.zhiliti.com.cn/html/luoji/list7_1.html 一.目标:获取下图红色部分内容 即获取所有的题目以及答案. 二.实现步骤. ...

  8. JS/JQ动画效果

    1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...

  9. js实现动画效果框架

    RT,是参照慕课的教程做的.两个多小时的教程,看完了然后晚上的时候做了下,看的时候感觉明白了,但其实做的时候还是有很多小细节需要处理的. 上代码,思想什么的直接去慕课看教程就好了.点击这里 注释也比较 ...

随机推荐

  1. bitmap2drawable-两者的转化实现

    先来看今天遇到的一个问题,是关于mms报错的.后来发现报的地方如下 Bitmap deleteBitMap = ((BitmapDrawable)mChipDelete).getBitmap(); D ...

  2. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  3. amaze样例页面分析(一)

    amaze样例页面分析(一) 一.总结 1.从审查(inspect)中是很清楚的可以弄清楚这些part之间的结构关系的 2.一者在于弄清楚他们之间的结构关系,二者在于知道结构的每一部分是干嘛的 3.i ...

  4. 103.tcp通信实现远程控制

    客户端代码 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include < ...

  5. docker网络访问

    一 docker网络访问 描述: 在启动容器的时候,如果不指定对应的参数,在容器外部是无法通过网络来访问容器内的网络应用和服务的.当容器中运行一些网络应用,要让外部访问这些应用时,可以通过-P或者-p ...

  6. Java – Reading a Large File Efficiently--转

    原文地址:http://www.baeldung.com/java-read-lines-large-file 1. Overview This tutorial will show how to r ...

  7. 1.8 Python基础知识 - 数值类型

    一.int类型(任意精度整数) 整型类型(int)是表示整数的数据类型.与其他计算机语言有精度限制不同,Python的整数位数可以为任意长度位数(只受限制于计算机内存) 数字字符串即整型常量. pyt ...

  8. 前台Ajax发送数据给后台

    前台发ajax请求给后台 前台代码 let data= [{receiveAdd:receiveAddVal, sendAdd:sendAddVal,distance:distance,goodsNa ...

  9. mysql 语句优化心得

    排序导致性能较慢 优化策略:1.尽量不使用排序 2.只查有索引的结果然后 内连接查询 select  bizchance0_.*  from biz_chance bizchance0_, biz_b ...

  10. GO语言学习(十四)Go 语言数组

    Go 语言数组 Go 语言提供了数组类型的数据结构. 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定义类型. 相对于去声明number0 ...