滑动门 | 易学教程

jquery插件之tab标签页或滑动门

阅读更多关于 jquery插件之tab标签页或滑动门

该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。此插件旨在实现目前较为流行的tab标签页或滑动门特效，在此插件中默认使用的是鼠标滑过事件，您也可以根据自己的实际需求将滑过事件hover改为点击事件click。整体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab标签页/滑动门</title> <style> *{margin:0;padding:0;font-size:12px;} li{list-style:none;} .tabs{margin:20px;width:400px;height:250px;} .tabs_nav{margin-left:1px;} .tabs_nav li{float:left;border:1px solid #ddd

Sliding Panels - 滑动门插件

阅读更多关于 Sliding Panels - 滑动门插件

Sliding Panels - 滑动门插件 1）Colorful Sliders With jQuery & CSS3 使用 jQuery 和 CSS3 的特性来创建3D 动态的幻灯效果。主要功能：创建幻灯效果、动态改变柱状图、能够和 jQuery 整合。主页: http://tutorialzine.com/2010/03/colorful-sliders-jquery-css3/ 演示地址: http://demo.tutorialzine.com/2010/03/colorful-sliders-jquery-css3/demo.html 更新日期: 2011-10-19 2)divSlider基于jquery的水平滑动的导航菜单. 主页: http://www.36ria.com/2012 演示地址: http://www.36ria.com/demo/divSlider/ 3)Tiny Carousel 是一个轻量级jQuery Slideshow插件用于展示基于html的内容。支持水平和垂直滑动，支持通过按纽或分页导航内容，可以设置每次滑动的内容块数，易于定制。主页: http://baijs.nl/tinycarousel/ 4)Slide Top Panel 基于Jquery，为用户提供简单的固定于顶部的滑动条。主页: http://www

css html应用实例1：滑动门技术的简单实现

阅读更多关于 css html应用实例1：滑动门技术的简单实现

关于滑动门，现在的页面中好多地方都会用到滑动门，一般用作于导航背景，它的官方解释如下：滑动门：根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。为什么很多人喜欢用滑动门呢，因为有些时候导航的字体长度不一致，长长短短实在不好弄背景图片之类啥的，如果单独根据不同的长度调用不同的背景图片太麻烦不说服务器压力也太大，所以滑动门技术应运而生，它可以根据元素本身的长度而调节背景图片的长度，至始至终只用到两张图片，网页加载速度提高不说，程序员工作量也减少了。效果图如下： 1.准备图片如下：（left.jpg和right.jpg是由1.jpg分割而来的）) 2.代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .top{height: 35px;width: 600px;margin: 0 200px;background: url("imags/2.jpg"); } .top ul{margin: 0;padding: 0;list-style: none;} .top ul li{float: left;line-height: 30px;} .top ul li:nth-child

CSS——滑动门技术及应用

阅读更多关于 CSS——滑动门技术及应用

先来体会下现实中的滑动门,或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。一般的经典布局都是这样的： <li> <a href="#"> <span>导航栏内容</span> </a> </li> 总结： a 设置背景左侧，padding撑开合适宽度。 span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。之所以a包含span就是因为整个导航都是可以点击的。来源： https://www.cnblogs.com/superjishere/p/11692995.html

滑动门简介

阅读更多关于滑动门简介

先来体会下现实中的滑动门,或者你可以叫做推拉门：滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。一般的经典布局都是这样的： <li> <a href="#"> <span>导航栏内容</span> </a></li> 总结： a 设置背景左侧，padding撑开合适宽度。 span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。之所以a包含span就是因为整个导航都是可以点击的。来源： https://www.cnblogs.com/jiumen/p/11393223.html