如何查看一个网页特定效果的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. Maven学习笔记4

    POM解析pom描述自身坐标,以及它关联的依赖,插件,仓库等. 项目模块设计项目聚合和继承. pom标签解析1. pom标签解析2. pom标签解析3. pom标签解析4. 聚合和继承 聚合模块只保留 ...

  2. Vue的学习--环境配置

    1.  下载vue.min.js或者使用CDN 2.  安装Vue-cli环境 我在window7 32位下使用命令行cmd进行的操作 安装之前应该使用node -v和npm -v检查一下node和n ...

  3. BZOJ2160: 拉拉队排练(Manacher)

    Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助篮球队训 ...

  4. HDU3689 Infinite monkey theorem 无限猴子(字符串DP+KMP)

    题目描述: 大概的意思就是根据无限猴子定理,无限只猴子坐在打字机旁瞎敲,总有一个能敲出莎士比亚文集.现在给你一个打字机和一只猴子,打字机的每个按钮(共n个)上的字母及猴子按下这个按钮的概率已知,而且猴 ...

  5. CTF加密题型解析:RSA算法的CTF解法之一

    RSA介绍 根据加密原理,可以将大部分的加密算法分为两大类:对称加密算法和非对称加密算法.对称加密算法的加密和解密采用的是同一套算法规则.而非对称加密算法加密时用的是公钥(公开给所有人),解密时用的是 ...

  6. Servlet 规范笔记—基于http协议的servlet

    在上一章节,我们大概的描述了servlet的规范以及servlet和servlet容器的概念和用途,我们清楚的知道servlet容器提供了接收来自client端的请求,然后根据请求进行处理(如:执行对 ...

  7. 【例题 7-1 UVA - 725】Division

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举分母从0到99999. 得到分子,判断合法 [代码] /* 1.Shoud it use long long ? 2.Have ...

  8. Android Gradle统一依赖管理

    目的: 避免在依赖包出新版本时,需要对每个module中的build.gradle文件都进行修改(如appcompat-v7包),使用这种方式即只需一次修改. 方法一 在项目的根目录创建一个gradl ...

  9. 【高德地图API】从零開始学高德JS API(五)路线规划——驾车|公交|步行

    先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...

  10. 每日技术总结:Toast组件,eslint,white-space,animate,$emit

    1.一个优雅的提示是网站必不可少的. 请参考:vue2.0 自定义 提示框(Toast)组件 2.ESLint使用总结 (1)在.eslintrc.js里关闭某条规则, '规则名': 'off'或0 ...