子比主题添加滚动图片广告位教程

0495
子比主题添加滚动图片广告位教程- 花猪资源网
子比主题添加滚动图片广告位教程
此内容为免费阅读，请登录后查看
￥0
免费阅读
图片[1]- 子比主题添加滚动图片广告位教程

将下面代码放置在小工具——自定义HTML

<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://images.aaym.net/<a href="https://sjcnh.cn/tag/2023nian" target="_blank">2023</a>/10/<a href="https://sjcnh.cn/tag/2023nian" target="_blank">2023</a>1028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
    </ul>
 </div>

  --原文出自《设计趁年华》的 [ 子比主题添加滚动图片广告位html小工具 ] 文章， 转载还请保留原文链接: https://sjcnh.cn/2210.html，谢谢！

css样式和js代码都放在自定义CSS和JS代码中

  • css
  • js
    • .one {
 margin: 10px auto;
 height: 160px;
 overflow: hidden;
 position: relative;
 width: 100%;
}

.one ul {
 height: 160px;
 width: 100000px;
 position: absolute;
 left: 0;
}
/*ul width的宽不能过小*/.one ul li {
 display: block;
 float: left;
 margin: 5px;
 height: 150px;
 border-radius: 20px;
 position: relative;
}

.one ul li a {
 display: inline-block;
 height: 150px;
}

.one ul li img {
 border-radius: 20px;
 display: block;
}

.one ul li a span {
 height: 0;
 display: block;
 background: #f9f9f9cc;
 position: absolute;
 bottom: 0;
 color: #ff4f4f;
 font-size: 0px;
}

.one ul li a:hover span {
 height: 150px;
 line-height: 150px;
 font-size: 20px;
 text-align: center;
 transition: all 0.7s;
 border-radius: 20px ;
}

.two {
 margin: 50px auto;
 height: 90px;
 
 overflow: hidden;
 position: relative;
}

.two ul {
 height: 90px;
 width: 100000px;
 position: absolute;
 left: 0;
}/*ul width的宽不能过小*/.two ul li {
 display: block;
 float: left;
 margin: 5px;
 height: 80px;
 border-radius: 20px;
 position: relative;
}

.two ul li a {
 display: inline-block;
 height: 80px;
}

.two ul li img {
 display: block;
 border-radius: 20px;
 height: 80px;
}

.two ul li a span {
 height: 0;
 display: block;
 background: #f9f9f9cc;
 position: absolute;
 bottom: 0;
 color: #ff4f4f;
 font-size: 0px;
}

.two ul li a:hover span {
 height: 80px;
 line-height: 80px;
 font-size: 20px;
 text-align: center;
 transition: all 0.7s;
 border-radius: 20px ;
}

  --原文出自《设计趁年华》的 [ 子比主题添加滚动图片广告位html小工具 ] 文章， 转载还请保留原文链接: https://sjcnh.cn/2210.html，谢谢！
    /* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*///function reurl(){ 
    //url = location.href;var times = url.split("?"); 
    //if(times[1] != 1){url += "?1"; self.location.replace(url);} 
//}
//onload=reurl ;
/* 有的浏览器第一次加载不会动画  刷新当前页面一次 */$(document).ready(function () {
 var box0 = $(".one"),v0 = 0.5; 
 var box1 = $(".two"),v1 = 1;
 Rin(box0,v0);
 Rin(box1,v1); 

      function Rin($Box,v){//$Box移动的对象，v对象移动的速率
        var $Box_ul = $Box.find("ul"),
            $Box_li = $Box_ul.find("li"),
            $Box_li_span = $Box_li.find("span"),
            left = 0,
            s=0,
            timer;//定时器

               $Box_li.each(function(index){
                $($Box_li_span[index]).width($(this).width());//hover
                s += $(this).outerWidth(true); //即要滚动的长度
              })
               
     window.requestAnimationFrame = window.requestAnimationFrame||function(Tmove){return setTimeout(Tmove,1000/60)};
     window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
               
               if( s>=$Box.width()){//如果滚动长度超出Box长度即开始滚动，没有的话就不执行滚动
                        $Box_li.clone(true).appendTo($Box_ul);                       
                        Tmove();
                           function Tmove(){
                                //运动是移动left  从0到-s;（个人习惯往左滚）
                                left -= v;
                                if(left <= -s){left = 0;$Box_ul.css("left",left)}else{ $Box_ul.css("left",left) }
                                    timer = requestAnimationFrame(Tmove);   
                           }
                     $Box_ul.hover(function(){cancelAnimationFrame(timer)},function(){Tmove()})    
               }  

 }      
})   

  --原文出自《设计趁年华》的 [ 子比主题添加滚动图片广告位html小工具 ] 文章， 转载还请保留原文链接: https://sjcnh.cn/2210.html，谢谢！
    查看更多心仪的内容 按Ctrl+D收藏我们
    部分内容来自于网络 如有侵权请联系站长删除
    花猪资源网欢迎你来投稿文章
    ------本页内容已结束，喜欢请分享------

    感谢您的来访，获取更多精彩文章请收藏本站。

    © 版权声明
    声明
    花猪使用须知
    • 1本网站内容仅供个人学习、研究和欣赏，未经授权禁止用于任何商业用途。
    • 2网站中的代码示例仅用于教育目的，使用时请遵循相关开源协议和授权规定。
    • 3转载或引用本站内容请注明出处，尊重原创，共同维护良好的创作环境。
    • 4网站评论区欢迎理性讨论，请勿发表违反法律法规的言论，共建和谐社区。
    • 5如有内容侵犯您的权益，请通过博客联系方式告知，将立即核实并处理。
    • 6使用本站资源时产生的任何问题与后果需自行承担，请谨慎操作。
    THE END
    插件分享
    喜欢就支持一下吧
    点赞5 分享
    花猪资源网的头像- 花猪资源网钻石会员
    子比主题添加文章图片发光边框- 花猪资源网
    子比主题添加文章图片发光边框
    子比主题添加文章图片发光边框
    7个月前 115
    仿欢乐赚 百万盟 聚享游 游戏试玩 打码平台源码- 花猪资源网
    仿欢乐赚 百万盟 聚享游 游戏试玩 打码平台源码
    仿欢乐赚 百万盟 聚享游 游戏试玩 打码平台源码
    7个月前 104
    子比主题美化 随机头像API 子比主题头像- 花猪资源网
    子比主题美化 随机头像API 子比主题头像
    子比主题美化 随机头像API 子比主题头像
    7个月前 95
    子比主题美化文章顶部添加百度收录按钮- 花猪资源网
    子比主题美化文章顶部添加百度收录按钮
    子比主题美化文章顶部添加百度收录按钮
    7个月前 82
    Joe主题源码免费下载- 花猪资源网
    Joe主题源码免费下载
    Joe主题源码免费下载
    4个月前 65
    子比主题底部加个好看的统计模块（51统计）- 花猪资源网
    子比主题底部加个好看的统计模块（51统计）
    子比主题底部加个好看的统计模块（51统计）
    5个月前 63
    相关推荐
    子比主题添加文章图片发光边框- 花猪资源网
    子比主题添加文章图片发光边框
    子比主题添加文章图片发光边框
    7个月前 115
    子比主题美化 随机头像API 子比主题头像- 花猪资源网
    子比主题美化 随机头像API 子比主题头像
    子比主题美化 随机头像API 子比主题头像
    7个月前 95
    子比主题美化文章顶部添加百度收录按钮- 花猪资源网
    子比主题美化文章顶部添加百度收录按钮
    子比主题美化文章顶部添加百度收录按钮
    7个月前 82
    子比主题底部加个好看的统计模块（51统计）- 花猪资源网
    子比主题底部加个好看的统计模块（51统计）
    子比主题底部加个好看的统计模块（51统计）
    5个月前 63
    zibi子比转盘抽奖插件免费开源版- 花猪资源网
    zibi子比转盘抽奖插件免费开源版
    zibi子比转盘抽奖插件免费开源版
    7个月前 61
    子比主题自动保存功能教程- 花猪资源网
    子比主题自动保存功能教程
    子比主题自动保存功能教程
    7个月前 60
    评论 抢沙发

    请登录后发表评论

      暂无评论内容

    默认头像
    哈喽~
    通过签到获取积分，可别错过哦！

    子比主题添加文章图片发光边框

    仿欢乐赚 百万盟 聚享游 游戏试玩 打码平台源码

    子比主题美化 随机头像API 子比主题头像

    子比主题美化文章顶部添加百度收录按钮

    Joe主题源码免费下载

    子比主题底部加个好看的统计模块（51统计）

    搜索
    开启精彩搜索

    热门搜索

    购买邀请码-加入会员

    最新评论
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网昨天0

    你的见解如此深刻，一定是个有智慧的人！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网昨天0

    看到你的评论，我感觉整个世界都明亮了！
    小妖的头像- 花猪资源网

    小妖前天0

    你的观点总是能带给我新的思考，谢谢你！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网14天前0

    看到你的评论，我感觉整个世界都明亮了！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网15天前0

    路过一下，我只是来打酱油的！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网15天前0

    路过一下，我只是来打酱油的！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网15天前0

    你的气质透过屏幕都能感受到，真是太迷人了！
    花猪资源网的头像- 花猪资源网钻石会员

    花猪资源网22天前0

    你的水平真是高，我自愧不如啊！
    百度一下-协助本站SEO