东篱闲人 发表于 2022-3-11 19:52

【套用代码】最美的相遇

<style type="text/css">
.picBtn {
   
      width: 22px;
      height: 10px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/60ef06295132923bf8240703.gif') no-repeat;
      cursor: pointer;
      
</style>

<div style="position: relative; left:-400px; top: 150px; width:1400px;text-align:center;">
      <img alt="" src="https://s1.ax1x.com/2022/03/11/bIvYb6.jpg" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
      <div style="position:absolute; width:250px; left:100px; top: 100px; text-align:center;">

<center >
<p ><font color="#DF7401" size="3" >

               <marqueescrollamount="4" direction="left" >人海之中遇到了你，

遇到你是多么幸运。

爱的天空飘起了细雨，

点点滴滴都因为你。

柔柔春风吹拂着你，

我看到灿烂的花季。

十指相扣没有了距离，

爱情温暖在我心里。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。

柔柔春风吹拂着你，

我看到灿烂的花季。

十指相扣没有了距离，

爱情温暖在我心里。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。 </marquee>
                <p><audio id="music" src="http://music.163.com/song/media/outer/url?id=1382047753.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
            <div style="position:absolute; width:250px; left:750px; top: 500px; text-align:center;">

                <button id="picBtn" class="picBtn"></button>
          </div>
      </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/60ef06295132923bf8240703.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6225d3e65baa1a80ab525ee2.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6225d3e65baa1a80ab525ee2.png')";
})

</script>
<br><br><br><br><br><br><br><br>

大猫咪 发表于 2022-3-11 20:25

真漂亮{:4_187:} 这图做的真喜欢{:4_190:} ；老头真棒   {:4_179:}晚上好！

马黑黑 发表于 2022-3-11 20:40

这个大概是相遇与后宫之外的地儿的意思

小辣椒 发表于 2022-3-11 21:13

老头也是喜欢这些情意绵绵的。。。。{:4_172:}

小辣椒 发表于 2022-3-11 21:14

老头今生今世不分离{:4_187:}

千羽 发表于 2022-3-11 22:13

小辣椒推荐给俺看，忙着跑来了{:4_187:}

千羽 发表于 2022-3-11 22:14

真漂亮，{:4_199:}

千羽 发表于 2022-3-11 22:14

马黑黑 发表于 2022-3-11 20:40
这个大概是相遇与后宫之外的地儿的意思

哈哈{:4_189:}

千羽 发表于 2022-3-11 22:15

小辣椒 发表于 2022-3-11 21:13
老头也是喜欢这些情意绵绵的。。。。

哈哈{:4_205:}

小辣椒 发表于 2022-3-11 22:21

千羽 发表于 2022-3-11 22:15
哈哈

千羽会看源码吗

千羽 发表于 2022-3-11 22:24

小辣椒 发表于 2022-3-11 22:21
千羽会看源码吗

我们做图是有源代码的，不知小辣椒说源码在哪？

小辣椒 发表于 2022-3-11 22:26

千羽 发表于 2022-3-11 22:24
我们做图是有源代码的，不知小辣椒说源码在哪？

我指老头发帖的代码

css就一个图片，一个播放器按钮，很简单，不用上传，非常简单

小辣椒 发表于 2022-3-11 22:28

千羽 发表于 2022-3-11 22:24
我们做图是有源代码的，不知小辣椒说源码在哪？

我指你会看老头的源文件吗？不会我发你

千羽 发表于 2022-3-11 22:28

小辣椒 发表于 2022-3-11 22:26
我指老头发帖的代码

css就一个图片，一个播放器按钮，很简单，不用上传，非常简单

好的，我有时间就取了代码做哈{:4_181:}

千羽 发表于 2022-3-11 22:29

小辣椒 发表于 2022-3-11 22:28
我指你会看老头的源文件吗？不会我发你

你发给我吧，{:4_185:}

小辣椒 发表于 2022-3-11 22:29

千羽 发表于 2022-3-11 22:28
好的，我有时间就取了代码做哈

好的，这个是做音画的小播放器，上次让冬雨告诉你的，就是冬雨那个小播放器

马黑黑 发表于 2022-3-11 22:30

千羽 发表于 2022-3-11 22:14
哈哈

{:5_106:}

小辣椒 发表于 2022-3-11 22:30

千羽 发表于 2022-3-11 22:29
你发给我吧，

好的

小辣椒 发表于 2022-3-11 22:31

千羽 发表于 2022-3-11 22:29
你发给我吧，


<style type="text/css">
.picBtn {
   
      width: 22px;
      height: 10px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/60ef06295132923bf8240703.gif') no-repeat;
      cursor: pointer;
      
</style>

<div style="position: relative; left:-400px; top: 150px; width:1400px;text-align:center;">
      <img alt="" src="https://s1.ax1x.com/2022/03/11/bIvYb6.jpg" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
      <div style="position:absolute; width:250px; left:100px; top: 100px; text-align:center;">

<center >
<p ><font color="#DF7401" size="3" >

               <marqueescrollamount="4" direction="left" >人海之中遇到了你，

遇到你是多么幸运。

爱的天空飘起了细雨，

点点滴滴都因为你。

柔柔春风吹拂着你，

我看到灿烂的花季。

十指相扣没有了距离，

爱情温暖在我心里。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。

柔柔春风吹拂着你，

我看到灿烂的花季。

十指相扣没有了距离，

爱情温暖在我心里。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。

你是我最美的相遇，

你让我如此的痴迷。

把我的余生全交给你，

让我们永永远远在一起。

你是我最美的相遇，

你是我今生的唯一。

在我的世界全都是你，

让我们今生今世不分离。 </marquee>
                <p><audio id="music" src="http://music.163.com/song/media/outer/url?id=1382047753.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
            <div style="position:absolute; width:250px; left:750px; top: 500px; text-align:center;">

                <button id="picBtn" class="picBtn"></button>
          </div>
      </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/60ef06295132923bf8240703.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6225d3e65baa1a80ab525ee2.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/6225d3e65baa1a80ab525ee2.png')";
})

</script>
<br><br><br><br><br><br><br><br>

加林森 发表于 2022-3-11 22:32

老兄好浪漫，有情调。{:4_199:}
页: [1] 2 3
查看完整版本: 【套用代码】最美的相遇