大话主席-＞列表切换

最新推荐文章于 2022-12-26 18:38:31 发布
最新推荐文章于 2022-12-26 18:38:31 发布
阅读量293 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44093213/article/details/113647376
版权

不懂大话主席是什么百度哈，有插件的下载就好
效果图：
在这里插入图片描述
记得引入
在这里插入图片描述

css

<style>
    li{
        list-style-type: none;
    }
    a{
        text-decoration:none ; 
        color: #000;
    }
    div,a{
        font-family: '微软雅黑';
    }
    .yyxw_wz{
        float: left;
        margin-left: 30px;
        background-color: #fff;
        width: 585px;
        height: 100%;
    }
    .hd,.hd ul{
        height: 58px;
        margin-bottom: 10px;
    }
    .hd ul,.bd ul{
        padding: 0px;
        margin: auto;
    }
    .on{
        transition: all 0.5s ease 0s;
        border-bottom: 3px solid #019983;
    }
    .bd ul li{
        width: 100%;
        height: 50px;
        float: left;
    }
    .bd ul li div{font-size: 14px;}
    </style>

html

    <div class="yyxw_wz">
        <div class="hd">
            <ul>               
                <li style="        cursor: pointer;
                padding-top: 20px;
                                height: 35px;
                                width: 25%;
                                float: left;
                                text-align: center;
                                ">
                    <a>医院动态</a>
                </li>
                <li style="        cursor: pointer;
                padding-top: 20px;
                                height: 35px;
                                width: 25%;
                                float: left;
                                text-align: center;
                                ">
                    <a>最新公告</a>
                </li>
                <li style="margin-left: 40%;
                padding-top: 20px;
                height: 35px;
                width: 9%;
                text-align: right;
                float: left;">
                    <a href="#">更多+</a>
                </li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                 <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;width: 80%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                 <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
            </ul>
            <ul>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;width: 80%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                 <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                 <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">告别排长队！放射科优化预约流程，患者看病就医更方便.. </div>
                        <div>2019-10-26</div>
                    </a>
                </li>
                <li><a href="#">
                        <div style="width: 3%;text-align: center;float: left;"><img src="../2020-1-1融水医院/images/xyxw_xtb1.png"></div>
                        <div style="float: left;
                                width: 75%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin-right: 5%;">柳州市人民医院血管外科开展2019年“世界血栓日-关注血管…</div>
                        <div>2019-10-26</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

jq

 <script type="text/javascript">jQuery(".yyxw_wz").slide();</script>
白菜成才
关注
大话主席jquery.SuperSlide电脑端支持拖拽移动端支持滑动
qq_44681558的博客
09-04 483
使用时,修改slider=$(’.ban’);改成你的class或id值,ismousedown = true要是不想使用的到时候,直接改成false就禁用了 电脑端拖拽代码 if(ismousedown = true){ let _start=0,_end=0,slider=$('.ban'); slider.on('mousedown',function(e){if(e.button==0){_start=e.clientX-slider.offset().left;}}); slider.on('m
SuperSlide2实现图片滚动特效
09-04
-- 其他相关HTML代码 --> </div> ``` CSS部分主要负责样式布局，例如设置图片列表的对齐方式、控制导航按钮的显示与隐藏、位置和样式等。`.prev`和`.next`类用于定义左右箭头的样式，通过`opacity`调整透明度，`...
SuperSlide2.1.1所有案例 TouchSlide1.1触屏滑动特效插件 大话主席
05-24
做网站常用的特效（面包屑导航条，焦点图，TAB切换.........)反正，很齐全
TouchSlide - 大话主席
weixin_33858485的博客
01-20 136
http://www.superslide2.com/TouchSlide/downLoad.html 首  页如何使用查看参数案例演示下载页面交流反馈SuperSlide TouchSlide - 大话主席 前言 TouchSlide是开源的纯javascript触屏滑动特效插件，请尊重原创，保留头部版权，在保留版权的前提下可应用于个人或商业用途。 下载插件和全部案...
实现table切换
weixin_30908649的博客
03-05 539
http://down.admin5.com/info/2015/1211/130283.html 引入jquery <script type="text/javascript">$(function(){ $('.tabPanel ul li').hover(function(){ $(this).addClass('hit').siblings().removeCla...
大话主席（superslide和 touchslide）插件的使用
whiteGay的博客
10-27 2055
　　对于实现效果来说，插件的办事效率真的是太高了，而且里边也被处理过兼容性，用起来实在是特别方便，现在我们来说说大话主席中的slide插件，它分为pc端（superslide）和移动端（touchsl...
好的图片滚动特效合集SuperSlide2.1-demo
10-15
3. **随机切换**：图片切换顺序随机，增加视觉惊喜。 4. **网格切换**：图片以网格形式变换，适合展示多张小图。 5. **3D效果**：利用CSS3实现的3D翻转效果，为页面增添立体感。 6. **缩放效果**：图片在切换时有...
SuperSlide v2.1.1 所有案例
10-16
* Copyright 2011-2013, 大话主席 * * 请尊重原创，保留头部版权 * 在保留版权的前提下可应用于个人或商业用途 * v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误 ...
最详细的SuperSlide收费版2.1带demo
12-06
最详细的SuperSlide收费版带demo 2.0+2.1版本全套源码资料
superslide
08-17
superslide 一个代码 多种效果
SuperSlide所有效果-不全你来打我
12-24
jquery.SuperSlide.2.1.1.js （11KB，SuperSlide压缩文件） jquery.SuperSlide.2.1.1.source.js （20KB，SuperSlide源文件） demo（所有基础效果源代码） otherDemo（所有扩展效果源代码）
最详细的SuperSlide收费版带demo
09-22
最详细的SuperSlide收费版带demo 而且是两个版本的 积分也非常实惠
大话主席轮播图插件demo
li947011039的博客
04-14 482
SuperSlide - 焦点图/幻灯片 <style type="text/css"> /* css 重置 */ *{margin:0; padding:0; list-style:none; } body{ background:#fff; font:normal 12px/22px 宋体; } img{ border:0; } a{ text-d...
SuperSlide 大话主席动态加载数据的方法
最新发布
Qian_v1的专栏
12-26 659
【代码】大话主席动态加载数据的方法。
如何让浮动后的li在ul中居中显示
热门推荐
zamamiro的博客
03-29 1万+
其实，只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; li 再设 display: inline; 就可以了。 html标签 div id="footer"> ul> li>内容li> ul> div> css样式 #f
让ul中的li居中显示小技巧!
alisa6655的博客
08-02 662
在一个ul中,有很多li列表.要使li居中显示, 需要给li加:display:inline;(不需要加浮动元素了) 给ul加:text-align:center; 转载于:https://www.cnblogs.com/hellome/p/3887221.html...
万能的SuperSlide
前端笔记
03-21 1893
SuperSlide是大话主席的力作，是广大网页设计人员的福音，一个js基本上可以解决网站上大部分的特殊效果，很牛B，一些扩展效果是收费的，不过只要19，本人由于好奇，买了，目前在研究。http://www.superslide2.com/ 这是官网。
《大话无线通信》- 无线通信空中接口与GSM系统解析
例如，如果你正在开发一个基于网页的电话应用，Selenium可以帮助你编写自动化脚本来测试通话功能，验证信号强度显示，或者检查网络切换的正确性。 对于无线通信初学者，这本书提供了一个很好的起点，通过通俗易懂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值