如何查看一个网页特定效果的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. 76.CGI编码

    CGI编码 "%D6%DC%C8%F0%B8%A3"; 转换到字符串中: //CGI编码转到char类型的tmpstr中中 char* change(char *str) { // ...

  2. mahout用到的典型测试数据集

    http://archive.ics.uci.edu/ml/databases/synthetic_control/ 继续

  3. 1.21 Python基础知识 - python常用模块-2

    一.xml 什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 X ...

  4. TrueSec引导的Linux系统和安全检测工具预览

      650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=&qu ...

  5. ps的入门

    ps的入门 http://www.cnblogs.com/qingci/archive/2012/09/20/2694728.html

  6. 一、Docker安装

    原文:一.Docker安装 如果没有特殊要求关闭selinux!关闭selinux!关闭selinux!重要事情说三遍.这个坑活活让我重装了3.4遍系统才发现问题 本系列基于Centos系统安装,包括 ...

  7. POJ 2253-Frogger (Prim)

    题目链接:Frogger 题意:两仅仅青蛙,A和B,A想到B哪里去,可是A得弹跳有限制,所以不能直接到B,可是有其它的石头作为过渡点,能够通过他们到达B,问A到B的全部路径中.它弹跳最大的跨度的最小值 ...

  8. [Javascript] Different ways to create an new array/object based on existing array/object

    Array: 1. slice() const newAry = ary.slice() 2. concat const newAry = [].concat(ary) 3. spread oprea ...

  9. 94.文件bat脚本自删除

    taskkill / f / im 自删除.exedel 自删除.exedel 1.bat void main() { FILE *pf = fopen("1.bat", &quo ...

  10. Android BuildConfig:Gradle自定义你的BuildConfig

    在很早之前我发布了这篇博客Android BuildConfig.DEBUG的妙用, 提到了Eclipse中通过BuildConfig.DEBUG字段用来调试Log非常好用,但是殊不知在Android ...