87,993
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
潇湘忆梦 2019-08-12
- 打赏
- 举报
如果网站把所有的js全部放在了一个js文件中，要找到具体的功能代码，是不是要使用特效的容器的class或者id找到js,r然后把有关的js一个个取出来[/quote]
对的，绝大部分网站都是有容器的class或者id，在js文件中可以轻易找到，而且js中一个功能的代码都是在一起的，不会把js写到不同的位置。
而且做网址页面，不同的功能点都是区分js的，他们也需要进行网站维护，不会把鸡蛋都放在一起的。
还有一些个别的网站，他们的js是做了压缩的，通过容器的class或者id是没办法直接找到的，这时候就要分析实现的特性，比如你这段特效，它就可能把class或者id映射成A或B，这样的找起来就有点麻烦
ãã 2019-08-12
- 打赏
- 举报
能指导下怎么扒下来的吗？[/quote]
我看楼下弄的全，你问下，我是看到那个class名字，然后在js里找到了那个对应的
自渡96 2019-08-12
- 打赏
- 举报
如果网站把所有的js全部放在了一个js文件中，要找到具体的功能代码，是不是要使用特效的容器的class或者id找到js,r然后把有关的js一个个取出来
自渡96 2019-08-12
- 打赏
- 举报
我知道样式可以通过F12获取，那js要怎么找到啊？
潇湘忆梦 2019-08-12
- 打赏
- 举报
有网站地址，扒下来效果很简单的:
1. 找到你喜欢的这块特效的容器
2. 在Sources资源下，找到对于的资源js、css、image等
2. 在Sources资源下，找到对于的资源js、css、image等
囧 2019-08-12
- 打赏
- 举报
chrome F12, 右键检查
自渡96 2019-08-12
- 打赏
- 举报
能指导下怎么扒下来的吗？
自渡96 2019-08-12
- 打赏
- 举报
能指导下怎么扒下来的吗？
囧 2019-08-12
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>_</title>
<style type="text/css">
#tag_cloud_widget{position:relative;width:240px;height:240px;margin:10px auto 10px;}#tag_cloud_widget a{position:absolute;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0px;left:0px;padding:3px 5px;box-shadow:0 1px 1px rgba(0,0,0,0.08);}#tag_cloud_widget a:hover{background:#d02f53;display:block;}#tag_cloud_widget a:nth-child(n){background:#666;border-radius:3px;display:inline-block;line-height:18px;margin:0 10px 15px 0;}#tag_cloud_widget a:nth-child(2n){background:#d1a601;}#tag_cloud_widget a:nth-child(3n){background:#286c4a;}#tag_cloud_widget a:nth-child(5n){background:#518ab2;}#tag_cloud_widget a:nth-child(4n){background:#c91d13;}#tag_cloud_widget a{line-height:15px;background:#999;}
</style>
</head>
<body>
<div id="tag_cloud_widget">
<a href="https://www.cmsky.com/tag/lnmp/" class="tag-cloud-link tag-link-321 tag-link-position-1" style="font-size: 14px;">LNMP</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%bb%9c%e5%b7%a5%e5%85%b7/" class="tag-cloud-link tag-link-145 tag-link-position-2" style="font-size: 14px;">网络工具</a>
<a href="https://www.cmsky.com/tag/%e5%9b%be%e5%ba%8a/" class="tag-cloud-link tag-link-354 tag-link-position-3" style="font-size: 14px;">图床</a>
<a href="https://www.cmsky.com/tag/%e5%9f%9f%e5%90%8d/" class="tag-cloud-link tag-link-148 tag-link-position-4" style="font-size: 14px;">域名</a>
<a href="https://www.cmsky.com/tag/%e5%85%8d%e8%b4%b9ssl/" class="tag-cloud-link tag-link-173 tag-link-position-5" style="font-size: 14px;">免费ssl</a>
<a href="https://www.cmsky.com/tag/%e7%b3%bb%e7%bb%9f%e5%b7%a5%e5%85%b7/" class="tag-cloud-link tag-link-138 tag-link-position-6" style="font-size: 14px;">系统工具</a>
<a href="https://www.cmsky.com/tag/wordpress%e4%b8%bb%e9%a2%98/" class="tag-cloud-link tag-link-326 tag-link-position-7" style="font-size: 14px;">wordpress主题</a>
<a href="https://www.cmsky.com/tag/%e5%85%8d%e8%b4%b9%e5%9f%9f%e5%90%8d/" class="tag-cloud-link tag-link-267 tag-link-position-8" style="font-size: 14px;">免费域名</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/" class="tag-cloud-link tag-link-364 tag-link-position-9" style="font-size: 14px;">网盘</a>
<a href="https://www.cmsky.com/tag/%e5%85%8d%e8%b4%b9%e7%bd%91%e7%9b%98/" class="tag-cloud-link tag-link-175 tag-link-position-10" style="font-size: 14px;">免费网盘</a>
<a href="https://www.cmsky.com/tag/linux-2/" class="tag-cloud-link tag-link-60 tag-link-position-11" style="font-size: 14px;">linux</a>
<a href="https://www.cmsky.com/tag/%e8%99%9a%e6%8b%9f%e6%9c%ba/" class="tag-cloud-link tag-link-102 tag-link-position-12" style="font-size: 14px;">虚拟机</a>
<a href="https://www.cmsky.com/tag/%e6%b8%b8%e6%88%8f/" class="tag-cloud-link tag-link-250 tag-link-position-13" style="font-size: 14px;">游戏</a>
<a href="https://www.cmsky.com/tag/windows/" class="tag-cloud-link tag-link-249 tag-link-position-14" style="font-size: 14px;">windows</a>
<a href="https://www.cmsky.com/tag/vps/" class="tag-cloud-link tag-link-212 tag-link-position-15" style="font-size: 14px;">vps</a>
<a href="https://www.cmsky.com/tag/wordpress/" class="tag-cloud-link tag-link-310 tag-link-position-16" style="font-size: 14px;">wordpress</a>
<a href="https://www.cmsky.com/tag/cdn/" class="tag-cloud-link tag-link-76 tag-link-position-17" style="font-size: 14px;">CDN</a>
<a href="https://www.cmsky.com/tag/debian/" class="tag-cloud-link tag-link-296 tag-link-position-18" style="font-size: 14px;">debian</a>
<a href="https://www.cmsky.com/tag/%e6%90%ac%e7%93%a6%e5%b7%a5vps/" class="tag-cloud-link tag-link-258 tag-link-position-19" style="font-size: 14px;">搬瓦工vps</a>
<a href="https://www.cmsky.com/tag/ssl/" class="tag-cloud-link tag-link-309 tag-link-position-20" style="font-size: 14px;">ssl</a>
<div class="clear"></div>
</div>
</body>
</html>
<script type="text/javascript">
var radius = 100;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 11;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var oDiv = null;
window.onload=function ()
{
var i=0;
var oTag=null;
oDiv=document.getElementById('tag_cloud_widget');
aA=oDiv.getElementsByTagName('a');
for(i=0;i<aA.length;i++)
{
oTag={};
aA[i].onmouseover = (function (obj) {
return function () {
obj.on = true;
this.style.zIndex = 9999;
this.style.color = '#fff';
this.style.background = '#0099ff';
this.style.padding = '5px 5px';
this.style.filter = "alpha(opacity=100)";
this.style.opacity = 1;
}
})(oTag)
aA[i].onmouseout = (function (obj) {
return function () {
obj.on = false;
this.style.zIndex = obj.zIndex;
this.style.color = '#fff';
this.style.background = '#30899B';
this.style.padding = '5px';
this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
this.style.opacity = obj.alpha;
this.style.zIndex = obj.zIndex;
}
})(oTag)
oTag.offsetWidth = aA[i].offsetWidth;
oTag.offsetHeight = aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
(function () {
update();
setTimeout(arguments.callee, 40);
})();
};
function update()
{
var a, b, c = 0;
a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
lasta = a;
lastb = b;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
return;
}
sineCosine(a, b, c);
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var rx1 = mcList[i].cx;
var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;
var rx2 = rx1 * cb + rz1 * sb;
var ry2 = ry1;
var rz2 = rx1 * (-sb) + rz1 * cb;
var rx3 = rx2 * cc + ry2 * (-sc);
var ry3 = rx2 * sc + ry2 * cc;
var rz3 = rz2;
mcList[i].cx = rx3;
mcList[i].cy = ry3;
mcList[i].cz = rz3;
per = d / (d + rz3);
mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
mcList[i].y = ry3 * per;
mcList[i].scale = per;
var alpha = per;
alpha = (alpha - 0.6) * (10 / 6);
mcList[i].alpha = alpha * alpha * alpha - 0.2;
mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
}
doPosition();
}
function depthSort()
{
var i=0;
var aTmp=[];
for(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function (vItem1, vItem2)
{
if(vItem1.cz>vItem2.cz)
{
return -1;
}
else if(vItem1.cz<vItem2.cz)
{
return 1;
}
else
{
return 0;
}
}
);
for(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
function positionAll()
{
var phi = 0;
var theta = 0;
var max = mcList.length;
for (var i = 0; i < max; i++) {
if (distr) {
phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
theta = Math.sqrt(max * Math.PI) * phi;
} else {
phi = Math.random() * (Math.PI);
theta = Math.random() * (2 * Math.PI);
}
//坐标变换
mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
mcList[i].cz = radius * Math.cos(phi);
aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
}
}
function doPosition()
{
var l = oDiv.offsetWidth / 2;
var t = oDiv.offsetHeight / 2;
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var aAs = aA[i].style;
if (mcList[i].alpha > 0.1) {
if (aAs.display != '')
aAs.display = '';
} else {
if (aAs.display != 'none')
aAs.display = 'none';
continue;
}
aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
//aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
//aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
aAs.zIndex = mcList[i].zIndex;
aAs.opacity = mcList[i].alpha;
}
}
function sineCosine( a, b, c)
{
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
</script>
ãã 2019-08-12
- 打赏
- 举报
我给你扒了js
js代码
var radius = 100;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 11;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var oDiv = null;
window.onload = function () {
var i = 0;
var oTag = null;
oDiv = document.getElementById('tag_cloud_widget');
debugger;
aA = oDiv.getElementsByTagName('a');
for (i = 0; i < aA.length; i++) {
oTag = {};
aA[i].onmouseover = (function (obj) {
return function () {
obj.on = true;
this.style.zIndex = 9999;
this.style.color = '#fff';
this.style.background = '#0099ff';
this.style.padding = '5px 5px';
this.style.filter = "alpha(opacity=100)";
this.style.opacity = 1;
}
})(oTag)
aA[i].onmouseout = (function (obj) {
return function () {
obj.on = false;
this.style.zIndex = obj.zIndex;
this.style.color = '#fff';
this.style.background = '#30899B';
this.style.padding = '5px';
this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
this.style.opacity = obj.alpha;
this.style.zIndex = obj.zIndex;
}
})(oTag)
oTag.offsetWidth = aA[i].offsetWidth;
oTag.offsetHeight = aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine(0, 0, 0);
positionAll();
(function () {
update();
setTimeout(arguments.callee, 40);
})();
};
function update() {
var a, b, c = 0;
a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
lasta = a;
lastb = b;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
return;
}
sineCosine(a, b, c);
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var rx1 = mcList[i].cx;
var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;
var rx2 = rx1 * cb + rz1 * sb;
var ry2 = ry1;
var rz2 = rx1 * (-sb) + rz1 * cb;
var rx3 = rx2 * cc + ry2 * (-sc);
var ry3 = rx2 * sc + ry2 * cc;
var rz3 = rz2;
mcList[i].cx = rx3;
mcList[i].cy = ry3;
mcList[i].cz = rz3;
per = d / (d + rz3);
mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
mcList[i].y = ry3 * per;
mcList[i].scale = per;
var alpha = per;
alpha = (alpha - 0.6) * (10 / 6);
mcList[i].alpha = alpha * alpha * alpha - 0.2;
mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
}
doPosition();
}
function depthSort() {
var i = 0;
var aTmp = [];
for (i = 0; i < aA.length; i++) {
aTmp.push(aA[i]);
}
aTmp.sort(
function (vItem1, vItem2) {
if (vItem1.cz > vItem2.cz) {
return -1;
} else if (vItem1.cz < vItem2.cz) {
return 1;
} else {
return 0;
}
}
);
for (i = 0; i < aTmp.length; i++) {
aTmp[i].style.zIndex = i;
}
}
function positionAll() {
var phi = 0;
var theta = 0;
var max = mcList.length;
for (var i = 0; i < max; i++) {
if (distr) {
phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
theta = Math.sqrt(max * Math.PI) * phi;
} else {
phi = Math.random() * (Math.PI);
theta = Math.random() * (2 * Math.PI);
}
//坐标变换
mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
mcList[i].cz = radius * Math.cos(phi);
aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
}
}
function doPosition() {
var l = oDiv.offsetWidth / 2;
var t = oDiv.offsetHeight / 2;
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var aAs = aA[i].style;
if (mcList[i].alpha > 0.1) {
if (aAs.display != '')
aAs.display = '';
} else {
if (aAs.display != 'none')
aAs.display = 'none';
continue;
}
aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
//aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
//aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
aAs.zIndex = mcList[i].zIndex;
aAs.opacity = mcList[i].alpha;
}
}
function sineCosine(a, b, c) {
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
body
<div id="tag_cloud_widget">
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
<a href="https://www.cmsky.com/tag/%e7%bd%91%e7%9b%98/">
免费ssl
</a>
</div>
样式
#tag_cloud_widget {
position: relative;
width: 240px;
height: 240px;
margin: 10px auto 10px;
}
#tag_cloud_widget a {
position: absolute;
color: #fff;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
top: 0px;
left: 0px;
padding: 3px 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
#tag_cloud_widget a:hover {
background: #d02f53;
display: block;
}
#tag_cloud_widget a:nth-child(n) {
background: #666;
border-radius: 3px;
display: inline-block;
line-height: 18px;
margin: 0 10px 15px 0;
}
#tag_cloud_widget a:nth-child(2n) {
background: #d1a601;
}
#tag_cloud_widget a:nth-child(3n) {
background: #286c4a;
}
#tag_cloud_widget a:nth-child(5n) {
background: #518ab2;
}
#tag_cloud_widget a:nth-child(4n) {
background: #c91d13;
}
#tag_cloud_widget a {
line-height: 15px;
background: #999;
}
自渡96 2019-08-12
- 打赏
- 举报
我就是不会扒才来提问的，菜鸟一枚，大佬请勿见怪
文盲老顾 2019-08-12
- 打赏
- 举报
你都已经有实例效果的地址了，直接扒js和样式不就好了
自渡96 2019-08-12
- 打赏
- 举报
具体参考下面的页面的热门标签https://www.cmsky.com/why-computer-time-1970/
自渡96 2019-08-12
- 打赏
- 举报
没说不行，我只是不知道css也能实现，你这个效果还差些，具体参考下面的页面的热门标签
https://www.cmsky.com/why-computer-time-1970/
ãã 2019-08-12
- 打赏
- 举报
CSS不行吗？必须得要JS吗？
<div style="height:500px;width:500px;border:1px solid red;position: relative">
<span class="title1">系统工具</span>
<span class="title2"> 域名</span>
<span class="title3">LNMP</span>
</div>
样式
@keyframes mytitle1 {
from {
top: 250px;
opacity: 1
}
to {
top: 50px;
opacity: 0
}
}
@keyframes mytitle2 {
from {
top: 250px;
opacity: 1
}
to {
top: 0px;
opacity: 0
}
}
@keyframes mytitle3{
from {
top: 250px;
opacity: 1
}
to {
top: 150px;
opacity: 0
}
}
.title1 {
background: cadetblue;
position: absolute;
top: 250px;
left: 50px;
opacity: 1;
animation: mytitle1 5s infinite;
-webkit-animation: mytitle1 5s infinite;
}
.title2 {
background: cadetblue;
position: absolute;
top: 200px;
left: 150px;
opacity: 1;
animation: mytitle2 5s infinite;
-webkit-animation: mytitle2 5s infinite;
}
.title3 {
background: cadetblue;
position: absolute;
top: 350px;
left: 350px;
opacity: 1;
animation: mytitle3 5s infinite;
-webkit-animation: mytitle3 5s infinite;
}
