请教图片效果问题：做如东方财富网首页顶部图片效果

哥斯拉 · 发表于 2021-7-1 11:59:51

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

请教一个图片效果问题：做如东方财富网首页顶部图片效果和弹出可收缩广告图 ( https://www.eastmoney.com )
已找到样式代码但不知道放在社区那个文件上可以做出这样效果，请教各位大侠

<style type="text/css">
      .baokuang{height:800px;width:100%;background:url(//g1.dfcfw.com/g4/202106/20210623175012.png) repeat-x 0 0 #FFF;}
      .baokuang .bkImg,.baokuang .bkImg .cImgDiv {background:url(//g1.dfcfw.com/g4/202106/20210623182133.png) no-repeat center top;}
      .baokuang .bkImg {width:100%; height:800px;margin:0 auto;}
      .baokuang .bkImg .cImgDiv{width:1000px; height:40px; margin:0 auto; position:relative;}
      .baokuang .bkImg .clickMap { display:block; height:40px; width:100%; text-indent:-100em; overflow:hidden;}
      .baokuang .bkImg .close{background:url(//g1.dfcfw.com/g4/202106/20210623120249.png) no-repeat;width:44px; height:18px;cursor:pointer; position:absolute; right:0px; bottom:20px; text-indent:-100em; overflow:hidden;}
      .pageCont { background:#FFF; height:0; overflow:hidden; margin-top:-760px;}
      .top-advert{margin-top:0; padding-top: 0;}
      .emfloat_wrapper{margin-top:30px;}
      </style>
</head>

<body>
      <div id="baokuangBox" class="baokuang">
         <div class="bkImg">
            <div class="cImgDiv">
                     <a class="clickMap" > </a>
                  <span class="close">关闭</span>
            </div>
         </div>
      </div>
      <div id="pageCont" class="pageCont"></div>

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 08:46:30

要在Discuz论坛中实现类似东方财富网首页顶部图片效果和弹出可收缩广告图的效果，你可以按照以下步骤进行操作：

### 1. 创建自定义CSS文件
首先，你需要将你提供的CSS代码保存到一个自定义的CSS文件中。你可以将这个文件命名为`custom.css`，并将其放置在Discuz模板目录下的`css`文件夹中。例如，如果你的模板是`default`，那么路径可能是：

template/default/css/custom.css

复制代码

### 2. 在模板文件中引入CSS文件
接下来，你需要在Discuz的模板文件中引入这个自定义的CSS文件。通常，你可以在`header.htm`文件中添加以下代码来引入CSS文件：

<link rel="stylesheet" type="text/css" href="{STYLEURL}css/custom.css" />

复制代码

将这段代码放在`<head>`标签内。

### 3. 在模板文件中添加HTML结构
你需要在模板文件中添加与CSS对应的HTML结构。你可以在`header.htm`文件中添加以下代码：

<div class="baokuang">
<div class="bkImg">
<div class="cImgDiv">
<a href="#" class="clickMap">点击区域</a>
<a href="#" class="close">关闭</a>
</div>
</div>
</div>
<div class="pageCont">
</div>

复制代码

将这段代码放在`<body>`标签内的合适位置，通常是在页面顶部。

### 4. 添加JavaScript代码
为了实现广告图的弹出和收缩效果，你需要添加一些JavaScript代码。你可以在`footer.htm`文件中添加以下代码：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var closeButton = document.querySelector('.baokuang .bkImg .close');
var baokuang = document.querySelector('.baokuang');
var pageCont = document.querySelector('.pageCont');
closeButton.addEventListener('click', function(e) {
e.preventDefault();
baokuang.style.display = 'none';
pageCont.style.marginTop = '0';
});
});
</script>

复制代码

这段代码会在页面加载完成后，监听关闭按钮的点击事件，并在点击时隐藏广告图并调整页面内容的位置。

### 5. 调整页面内容
根据你的需求，你可能需要调整页面内容的位置和样式。你可以通过修改`pageCont`类的CSS样式来实现这一点。

### 6. 测试和调整
完成以上步骤后，刷新你的Discuz论坛页面，查看效果是否符合预期。如果效果不理想，你可以进一步调整CSS和JavaScript代码。

### 7. 其他注意事项
- 确保图片路径正确，并且图片资源可以正常加载。
- 如果需要在不同页面显示不同的广告图，可以通过条件判断在模板文件中动态生成HTML结构。
- 如果需要更复杂的交互效果，可以考虑使用jQuery或其他JavaScript库。

通过以上步骤，你应该能够在Discuz论坛中实现类似东方财富网首页顶部图片效果和弹出可收缩广告图的效果。如果有任何问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。