• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery自定义滚动条插件示例分享

jquery自定义滚动条插件示例分享

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了自定义,滚动条插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

<body>
<div class="info"><span class="blue">malihu </span><br /><span class="big">Custom Scrollbar </span>plugin</div>
<!-- content block -->
<div id="mcs_container">
 <div class="customScrollBox">
  <div class="container">
      <div class="content">
          <h1>Adjustable scroller height with easing</h1>
    <p><a href="#" onclick="LoadNewContent('mcs_container','dynamic_content.html');return false">Load new content dynamically</a></p>
             <p style="color:#C96;">Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
             <p class="alt"><em>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</em></p>
             <img src="mcsImg1.jpg" />
             <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
                <p class="alt">Etiam sed massa felis, aliquam pellentesque est. Quisque quis ante tortor, sed egestas risus. Maecenas varius adipiscing nulla, nec rhoncus est mattis id. Aenean blandit convallis nisi at fringilla. Nunc id massa eu sapien fringilla posuere.</p>
             <img src="mcsImg2.jpg" />
             <p style="color:#C96;">Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem, eleifend ut gravida eget, tristique id orci. Nam adipiscing, sem in mattis vulputate, risus libero adipiscing risus, eu molestie mi justo eget nulla.</p>
                <p>Cras venenatis metus et urna egestas non laoreet orci rutrum. Pellentesque ullamcorper dictum nisl a tincidunt. Quisque et lacus quam, sed hendrerit mi. Mauris pretium, sapien et malesuada pulvinar, lorem leo viverra leo, et egestas mi nisl quis odio. </p>
                <p>Aliquam erat volutpat. Sed urna arcu, tempus eu vulputate adipiscing, consectetur et orci. Vivamus congue, nunc vitae fringilla convallis, libero massa lacinia lorem, id convallis mauris elit ut leo. Nulla vel odio sem. Duis lorem urna, congue vitae rutrum sed, tincidunt vel tortor. In hac habitasse platea dictumst. Nunc vitae enim ante, vitae facilisis massa. Etiam sagittis sapien at nibh fermentum consectetur convallis lacus blandit.</p>
             <h1>the end.</h1>
   </div>
  </div>
  <div class="dragger_container">
      <div class="dragger"></div>
  </div>
 </div>
    <a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
</div>

<!-- content block -->
<div id="mcs2_container">
 <div class="customScrollBox">
  <div class="container">
      <div class="content">
          <h1>Adjustable scroller height without easing</h1>
    <p><a href="#" onclick="LoadNewContent('mcs2_container','dynamic_content.html');return false">Load new content dynamically</a></p>
             <p class="alt">Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam.</p>
             <p><em>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis.</em></p>
                <img src="mcsImg2.jpg" />
             <p>In hac habitasse platea dictumst. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper.</p>
             <h1>the end.</h1>
   </div>
  </div>
  <div class="dragger_container">
      <div class="dragger">▒</div>
  </div>
 </div>
</div>

<!-- content block -->
<div id="mcs3_container">
 <div class="customScrollBox">
  <div class="container">
      <div class="content">
          <h3>Adjustable scroller height with 1/3 range and greater easing, without mouse-wheel support</h3>
             <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
             <p>consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. Nulla facilisi. Nam vel augue odio, dignissim mattis dolor. Nullam at mi aliquet quam interdum consectetur. Duis tempus mauris in lorem dictum eget euismod urna aliquet. In vestibulum tempor porta.</p>
             <p>Morbi porttitor rhoncus nisi, eget vehicula quam sodales at. Maecenas ipsum tellus, mollis quis faucibus i

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Easyui Datagrid自定义按钮列(最后面的操作列)
  • jQuery自定义多选下拉框效果
  • jQuery自定义元素右键点击事件(实现案例)
  • jQuery自定义图片上传插件实例代码
  • jQuery Validate 相关参数及常用的自定义验证规则
  • jQuery自定义插件详解及实例代码
  • jQuery Validate插件自定义验证规则的方法
  • jQuery简单自定义图片轮播插件及用法示例
  • 基于jQuery实现Accordion手风琴自定义插件
  • jQuery自定义组件(导入组件)

相关文章

  • jQuery中filter()和find()的区别深入了解
  • Jquery实现的table最后一行添加样式的代码
  • 海量经典的jQuery插件集合
  • jquery.form.js框架实现文件上传功能案例解析(springmvc)
  • jQuery中unbind()方法用法实例
  • jQuery实现hover合成事件的方法
  • javascript 自定义回调函数示例代码
  • jQuery flip插件实现的翻牌效果示例【附demo源码下载】
  • jquery实现下拉框功能效果【实例代码】
  • JQuery each()函数如何优化循环DOM结构的性能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Jquery增加鼠标中间功能mousewheel的实例代码
    • 动态获取复选框checkbox选中个数的jquery代码
    • jquery获取当前日期的方法
    • layui弹出层效果实现代码
    • 50个比较实用jQuery代码段
    • jquery处理json对象
    • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
    • 使用jquery与图片美化checkbox和radio控件的代码(打包下载)
    • jQuery maxlength文本字数限制插件
    • 轻松实现jQuery添加删除按钮Click事件

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有