·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
🔄最新发布📃文档资料库🆔加群看共享绿色软件切换到窄版
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!问题求助 › 代码修改求助
返回列表 发布新帖

代码修改求助

218 1
发表于 2021-9-12 19:22:25 | 查看全部 阅读模式

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

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

×
<style type="text/css">
.effshadow
{
  position: relative;
}
.effshadow:after
{
z-index: -1;
position: absolute;
content: "";
top: 15px;
left: 8px;
right: auto;
width: 50%;
height: 10%;
bottom: 80%;
max-width: 300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(183deg);
  -moz-transform: rotate(183deg);
  -o-transform: rotate(183deg);
  -ms-transform: rotate(183deg);
  transform: rotate(183deg);
}  
.effbox h1{
        text-align:left;
        height:25px;
        line-height:25px;
        position:relative;
        top:0px;
        color:#009ad9;
        font:20px/1.5 Tahoma,'Microsoft Yahei','Simsun';
        float:left;
         margin:0px;
}
.effbox h3{
        text-align:center;
        position:relative;
        font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
         margin:0px;
         height:30px;
}
.effbox {
        width:319px;
        height:37px;
        background:#FFF;
}
.shadowcon { width:100%; height:25px; margin:6px 5px 6px 10px; overflow:hidden;}
#rollBox{ height:25px; width:255px; overflow:hidden;list-style:none; margin:0; padding:0; position:relative; padding-left:5px; margin:50px auto; background:#FFf; cursor:pointer;}
.shadowcon li { list-style:none; line-height:25px; text-align:left;}
</style>
<div class="effbox">
<div class="effbox effshadow">
        <div class="shadowcon">
        <h3>
    <ul style="margin:5px 0 0 0;" id="rollBox">
    [loop]
    <li><a href="{url}" title="{title}"{target}>{title}（{starttime}）</a></li>
    [/loop]
    </ul>
    </h3></div></div></div>
   <script type="text/javascript">
var rollText={
        go:null,
        oParentUl:null,
        oUlH:null,
        liArr:null,
        childNode:null,
        timeout:null,
        run:function(id,delay){
                var oLiFirst=this.liArr[0];
                var liMarTop = oLiFirst.style.marginTop;
                var liTopNum=parseInt(liMarTop);
                var c = Math.abs(liTopNum);
                if(c< parseInt(this.oUlH)){
                        c++;
                        oLiFirst.style.marginTop ='-' + c + 'px';
                }else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
                        clearInterval(this.go);
                        this.oParentUl.removeChild(oLiFirst);
                        this.oParentUl.appendChild(oLiFirst);
                        this.liArr[this.liArr.length-1].style.marginTop='0px';
                        this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
                }

        },
        start:function(id,childtags,delay){

                this.childNode=childtags;
                this.oParentUl=document.getElementById(id);
                this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
                this.liArr=this.oParentUl.getElementsByTagName(childtags);
                for(var i=0;i<this.liArr.length;i++){
                        this.liArr<i>.style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';

                }
                this.go =setInterval(
                         function(obj,id,delay){
                        return function(){obj.run(id,delay)}
                }(this,id,delay),100);
                this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
                this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),100);};}(this);

        }
}
rollText.start('rollBox','li',3000);
function clone(){};
clone.prototype= rollText;
</script>



请问各位大神，这段代码如何修改才能让他最多能显示出5行数据，现在只能显示1行，应该调一下哪些数字大小？

小白一个，不懂代码，求大神帮忙修改一下吧
代码, 修改, 求助
我要说一句 收起回复
赞赏
回复

使用道具 举报

相关帖子

评论1

Discuz智能体Lv.8 发表于 2025-3-21 02:11:14 | 查看全部
你提供的代码片段主要涉及CSS样式和一些JavaScript代码，用于实现一个带有阴影效果的滚动文本区域。以下是对代码的详细解释和一些可能的改进建议：

### CSS部分

1. **`.effshadow` 类**：
   - 这个类用于创建一个带有阴影效果的元素。通过 `:after` 伪元素来实现阴影效果。
   - `position: relative;` 使得伪元素可以相对于该元素进行定位。
   - `:after` 伪元素设置了阴影的位置、大小、颜色和旋转角度。

2. **`.effbox h1` 和 `.effbox h3`**：
   - 这些样式定义了 `.effbox` 容器内的标题样式。
   - `h1` 和 `h3` 分别设置了不同的字体大小、颜色、对齐方式等。

3. **`.effbox` 类**：
   - 定义了一个固定宽度和高度的容器，背景为白色。

4. **`.shadowcon` 类**：
   - 定义了一个宽度为100%、高度为25px的容器，设置了外边距和溢出隐藏。

5. **`#rollBox`**：
   - 这是一个ID选择器，定义了一个高度为25px、宽度为255px的滚动区域，设置了溢出隐藏、列表样式、内边距和外边距。

6. **`.shadowcon li`**：
   - 定义了列表项的样式，去除了默认的列表样式，设置了行高和文本对齐方式。

### JavaScript部分

1. **`rollText` 对象**：
   - 这个对象用于实现文本的滚动效果。
   - `go`、`oParentUl`、`oUlH`、`liArr`、`childNode`、`timeout` 是对象的属性，用于存储滚动相关的DOM元素和定时器。
   - `run` 方法用于实现文本的滚动逻辑。它通过改变 `marginTop` 的值来实现文本的滚动效果。
   - `start` 方法用于初始化滚动效果，获取相关的DOM元素并启动滚动。

### 改进建议

1. **CSS优化**：
   - 可以考虑将一些重复的样式合并，减少代码冗余。
   - 使用CSS变量来管理颜色、字体等常用样式，方便后续维护。

2. **JavaScript优化**：
   - 可以将 `rollText` 对象的属性和方法封装得更清晰，避免全局变量的污染。
   - 使用 `requestAnimationFrame` 代替 `setTimeout` 来实现更流畅的动画效果。

3. **兼容性**：
   - 确保代码在现代浏览器和旧版浏览器中都能正常工作。可以使用Babel等工具进行代码转换。

### 示例代码优化

  1. .effshadow {
  2.   position: relative;
  3. }

  5. .effshadow:after {
  6.   z-index: -1;
  7.   position: absolute;
  8.   content: "";
  9.   top: 15px;
  10.   left: 8px;
  11.   width: 50%;
  12.   height: 10%;
  13.   background: #777;
  14.   box-shadow: 0 15px 10px #777;
  15.   transform: rotate(183deg);
  16. }

  18. .effbox h1, .effbox h3 {
  19.   margin: 0;
  20.   font-family: Tahoma, 'Microsoft Yahei', 'Simsun';
  21. }

  23. .effbox h1 {
  24.   text-align: left;
  25.   height: 25px;
  26.   line-height: 25px;
  27.   color: #009ad9;
  28.   font-size: 20px;
  29.   float: left;
  30. }

  32. .effbox h3 {
  33.   text-align: center;
  34.   font-size: 12px;
  35.   height: 30px;
  36. }

  38. .effbox {
  39.   width: 319px;
  40.   height: 37px;
  41.   background: #FFF;
  42. }

  44. .shadowcon {
  45.   width: 100%;
  46.   height: 25px;
  47.   margin: 6px 5px 6px 10px;
  48.   overflow: hidden;
  49. }

  51. #rollBox {
  52.   height: 25px;
  53.   width: 255px;
  54.   overflow: hidden;
  55.   list-style: none;
  56.   margin: 50px auto;
  57.   padding-left: 5px;
  58.   background: #FFF;
  59.   cursor: pointer;
  60. }

  62. .shadowcon li {
  63.   list-style: none;
  64.   line-height: 25px;
  65.   text-align: left;
  66. }
复制代码

  1. var rollText = {
  2.   go: null,
  3.   oParentUl: null,
  4.   oUlH: null,
  5.   liArr: null,
  6.   childNode: null,
  7.   timeout: null,

  9.   run: function(id, delay) {
  10.     var oLiFirst = this.liArr;
  11.     var liMarTop = oLiFirst.style.marginTop;
  12.     var liTopNum = parseInt(liMarTop);
  13.     var c = Math.abs(liTopNum);

  15.     if (c < parseInt(this.oUlH)) {
  16.       c++;
  17.       oLiFirst.style.marginTop = '-' + c + 'px';
  18.     } else if (Math.abs(liTopNum) == parseInt(this.oUlH)) {
  19.       clearInterval(this.go);
  20.       this.oParentUl.removeChild(oLiFirst);
  21.       this.oParentUl.appendChild(oLiFirst);
  22.       this.liArr.style.marginTop = '0px';
  23.       this.timeout = setTimeout(function(obj, id, childtags, delay) {
  24.         return function() {
  25.           obj.start(id, childtags, delay);
  26.         };
  27.       }(this, id, this.childNode, delay), delay);
  28.     }
  29.   },

  31.   start: function(id, childtags, delay) {
  32.     this.childNode = childtags;
  33.     this.oParentUl = document.getElementById(id);
  34.     this.oUlH = this.oParentUl.currentStyle ? this.oParentUl.currentStyle : window.getComputedStyle(this.oParentUl, null);
  35.     this.liArr = this.oParentUl.getElementsByTagName(childtags);
  36.     for (var i = 0; i < this.liArr.length; i++) {
  37.       // 初始化逻辑
  38.     }
  39.     this.go = setInterval(this.run.bind(this, id, delay), 20);
  40.   }
  41. };
复制代码


希望这些解释和建议对你有所帮助！如果你有更多问题，欢迎继续提问。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

More猜你喜欢

关闭

站长推荐

点我👉扫码添加站长微信，获取即时帮助！
点我👉扫码添加站长微信，获取即时帮助！
遇到问题别担心，添加站长微信，第一时间为您解决！专属客服在线等，享受一对一服务！

查看 »

AI智能体

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:3.21.41.164,GMT+8, 2025-4-12 03:57 , Processed in 0.356629 second(s), 79 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服
快速回复 返回顶部 返回列表