起个网名好难 发表于 2022-10-29 09:26
我就是通不过，只能看到一个框
代码我只做少量改动：
<style type="text/css">
#vWindow {
width:500px;
height:1000px;
border:thick brown ridge;
margin: 12px auto;
background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
background-position: -1px -1px;
background-size:cover;
}
.itemy {
width:500px;
height:50px;
background-position: 0 calc(var(--index) * 5%);
background-image:url('https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg');
background-size:500px 1000px;
transform-origin: 0%100%;
}
</style>
<div id="vWindow"></div>
<script type="text/javascript">
(function() {
let imgSet = [
"https://s3.bmp.ovh/imgs/2022/10/26/921786027c7d70d4.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/7844960c1ea5cb20.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/5bca2b145ed6ff2a.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/452e0fe3064cb2c5.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/ae116f757cd90358.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/cce6012c9e8d5ba2.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/1179ef54c304895d.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/191afd745ff4c5b3.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/ea2f9003982d031b.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/6fa0aa5ece82295c.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/97b282a86f0c8226.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/de6f8b1503a0a9b2.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/f94be16fa70aa90e.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/736bbe28a8fd41be.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/5a9df07037122f0c.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/40461b7a1cd6c6d3.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/7a489ea1bda4aab1.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg"
];
var Keyframes = [
[{transform: 'rotateX(90deg)', opacity: '0.3' }, {offset:0.5, transform: 'rotateX(0deg)', opacity: '1' }],
[{opacity: '0' }, {opacity: '1'}]
];
var EffectTiming = { duration: 8000,fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var items = new Array(), aniObj = new Array();
var vWindow = document.getElementById('vWindow');
for (i = 0; i < 1000; i+=50) {
let itemy = document.createElement('div');
itemy.style.setProperty('--index',parseInt(i / 50));
items.push(itemy);
itemy.classList.add('itemy');
vWindow.appendChild(itemy)
}
let chg_cur_pic = () => {
for (i = 0; i < items.length; i++) {
items.style.backgroundImage = "url(" + imgSet + ")"
}
vWindow.style.backgroundImage = "url(" + imgSet + ")";
lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;
for (j = 0; j < items.length; j++) {
aniObj.play()
}
};
for (j = 0; j < items.length; j++) {
items.style.backgroundImage = "url(" + imgSet + ")";
aniObj = items.animate(Keyframes, EffectTiming);
}
aniObj.addEventListener('finish', chg_cur_pic);
})();
</script>
马黑黑 发表于 2022-10-29 09:28
代码我只做少量改动：
我也加了引号但还是一样的不行。
马黑黑 发表于 2022-10-29 09:28
代码我只做少量改动：
我大概猜到原因了：草稿和发布了的帖子待遇不同。
https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=63337&pid=1759941&fromuid=7581
这还是原来的代码。
起个网名好难 发表于 2022-10-29 09:36
我大概猜到原因了：草稿和发布了的帖子待遇不同。
https://www.huachaowang.com/forum.php?mod=redire ...
这个我倒没注意过
本帖最后由 起个网名好难 于 2022-10-30 00:15 编辑 <br /><br />马黑黑 发表于 2022-10-29 11:16
这个我倒没注意过
草稿到现在还是这样的。
<style type="text/css">
#vWindow {
width:500px;
height:1000px;
border:thick brown ridge;
margin: 12px auto;
background-image:url(https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg);
background-position: -1px -1px;
background-size:cover;
}
.itemy {
width:500px;
height:50px;
background-position: 0 calc(var(--index) * 5%);
background-image:url(https://s3.bmp.ovh/imgs/2022/10/26/921786027c7d70d4.jpg);
background-size:500px 1000px;
transform-origin: 0%100%;
}
</style>
<div id="vWindow"></div>
<audio src="http://link.hhtjim.com/kw/4163579.mp3" loop autoplay controls
onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=0.1"
style="display:grid; place-items:center; opacity:0.1;margin:2px auto;" />
<script type="text/javascript">
(function() {
let imgSet = [
"https://s3.bmp.ovh/imgs/2022/10/26/921786027c7d70d4.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/7844960c1ea5cb20.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/5bca2b145ed6ff2a.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/452e0fe3064cb2c5.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/ae116f757cd90358.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/cce6012c9e8d5ba2.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/1179ef54c304895d.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/191afd745ff4c5b3.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/ea2f9003982d031b.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/6fa0aa5ece82295c.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/97b282a86f0c8226.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/de6f8b1503a0a9b2.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/f94be16fa70aa90e.jpg",
"https://s3.bmp.ovh/imgs/2022/10/26/736bbe28a8fd41be.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/5a9df07037122f0c.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/40461b7a1cd6c6d3.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/7a489ea1bda4aab1.jpg",
"https://s3.bmp.ovh/imgs/2022/10/25/3a5f951ab29ffec3.jpg"
];
/**
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('8 n=[[{o:\'q(z)\',f:\'0.4\'},{F:0.9,o:\'q(E)\',f:\'1\'}],[{f:\'0\'},{f:\'1\'}]];8 m={D:I,H:\'G\'};8 a=0,l=g.5-1;8 d,2,6,C,u;8 c=b.p(\'c\');t r(){e(i=0;i<w;i++){x 3=b.y(\'B\');3.7.A=-(i*O)+\'J\';3.7.T=\'S\';3.U.W(\'3\');c.X(3)}6=V R();d=b.p(\'c\');2=b.K(\'3\');e(j=0;j<2.5;j++){6=2.N(n,m);6.P()}6.Q=h;h()}t h(){e(i=0;i<2.5;i++){2.7.k="s("+g+")"}d.7.k="s("+g+")";L.M(d.7.k);l=a;a++;a%=g.5;e(j=0;j<2.5;j++){6.v()}u.v()}r();',60,60,'||items|itemy||length|aniObj|style|var||imgIdx|document|vWindow|imgBlock|for|opacity|imgSet|chg_cur_pic|||backgroundImage|lastIdx|EffectTiming|Keyframes|transform|getElementById|rotateX|initTrun|url|function|aniImg|play|20|let|createElement|90deg|backgroundPositionY|div|chkImg|duration|0deg|offset|forwards|fill|8000|px|getElementsByClassName|console|log|animate|50|pause|onfinish|Array|50px|height|classList|new|add|appendChild'.split('|'),0,{}))
**/
var Keyframes = [
[{transform: 'rotateX(90deg)', opacity: '0.3' }, {offset:0.5, transform: 'rotateX(0deg)', opacity: '1' }],
[{opacity: '0' }, {opacity: '1'}]
];
var EffectTiming = { duration: 8000,fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var items = new Array(), aniObj = new Array();
var vWindow = document.getElementById('vWindow');
for (i = 0; i < 1000; i+=50) {
let itemy = document.createElement('div');
itemy.style.setProperty('--index',parseInt(i / 50));
items.push(itemy);
itemy.classList.add('itemy');
vWindow.appendChild(itemy)
}
let chg_cur_pic = () => {
for (i = 0; i < items.length; i++) {
items.style.backgroundImage = "url(" + imgSet + ")"
}
vWindow.style.backgroundImage = "url(" + imgSet + ")";
lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;
for (j = 0; j < items.length; j++) {
aniObj.play()
}
};
for (j = 0; j < items.length; j++) {
items.style.backgroundImage = "url(" + imgSet + ")";
aniObj = items.animate(Keyframes, EffectTiming);
}
aniObj.addEventListener('finish', chg_cur_pic);
})();
</script>
本帖最后由 马黑黑 于 2022-11-4 23:28 编辑 <br /><br /><div id="tDiv" style="margin-left:calc(50% - 681px); padding: 10px; width: 1200px; min-height: 100px; border: 1px solid gray; position: relative;"></div>
<script>
tDiv.innerHTML = '654 - ' + tDiv.offsetLeft + '<br>margin-left: calc(50% - (帖子宽度的一半+81)px)';
</script>
186楼测试可以表明——
本坛，使用 relative 定位的帖子父框，假设帖子的宽度为1200排序，则左定位实现方式为下面的两种方法之一：
① left: calc(50% - 681px);
② margin-left: calc(50% - 681px);
其中，calc() 函数是CSS计算函数，小括号里面的数字运算特别注意，必须在运算符两边留一个空格；百分比可以与其他带单位的数值进行运算，这很方便，例子中的 681 是这样：1200÷2+81，81则为帖子正文头像所在的左边栏宽度的一半。
⚙️
本帖最后由 马黑黑 于 2022-11-10 19:54 编辑 <br /><br />OK?
discuz! x3.2 使用 gbk字符集，
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
۞
本帖最后由 马黑黑 于 2022-11-11 19:36 编辑 <br /><br /><p id="heart1">测试 ♥ <brr><br></p>
<script>
heart1.innerText += '\u2764';
</script>
本帖最后由 马黑黑 于 2022-11-12 20:58 编辑 <br /><br />**** Hidden Message *****
看看
本帖最后由 马黑黑 于 2022-11-18 22:20 编辑 <br /><br />nothing
<style>
.boxShadow {
box-shadow: 8px 8px 12px #000;
}
.dropShadow {
filter: drop-shadow(8px 8px 12px #000);
}
.dropShadow1 {
filter:
drop-shadow(260px 0px 0px #000);
}
.dropShadow2 {
filter: drop-shadow(0 -150px 0px silver);
}
</style>
<img class="dropShadow2" alt="" src="https://www.huachaowang.com/forum.php?mod=attachment&aid=NDQwMTJ8ZjAzNTFlYzZ8MTY3NTUwMzYyNnw3MTMwfDU2MzQ3&noupdate=yes" />