大众点评系统中功能实现的代码?
基于jquery的大众点评，分类导航实现代码html结构： 代码如下: 餐饮 餐饮频道 粤菜 。。。 购物 购物频道 超市/便利店 。。。 其他 jquery代码： 代码如下: css样式： 代码如下:BODY { background-color:#fff; color:#555; font: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif; letter-spacing: 0; margin: 0; } html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4...全部
基于jquery的大众点评，分类导航实现代码html结构： 代码如下: 餐饮 餐饮频道 粤菜 。。。 购物 购物频道 超市/便利店 。。。 其他 jquery代码： 代码如下: css样式： 代码如下:BODY { background-color:#fff; color:#555; font: 9pt/14px Tahoma, "宋体", Arial, Helvetica, Sans-Serif; letter-spacing: 0; margin: 0; } html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote { border: 0 none; margin: 0; outline: 0 none; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } UL, LI { list-style: none outside none; margin: 0; padding: 0; } IMG { border: medium none; margin: 0; padding: 0; cursor:pointer; } input, img, select { vertical-align: middle; } A { color: #666666; } A:link { color: #666666; text-decoration: none; } A:visited { color: #666666; text-decoration: none; } A:hover { color: #C90809; text-decoration: none; } /*导航*/ 。
pp_channels 。root-item, 。pp_channels 。root-name, 。pp_channels 。root-name span, 。pp_channels 。sub-list li a { background-image: url("bg。
png"); background-repeat: no-repeat; } 。G_chan-panel { position: absolute; z-index: 1000; top: 120px; left: 199px; visibility: hidden; } 。
pp_channels { width: 138px; padding: 0; border-width: 0 0 2px 1px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: -1px 1px 1px #ccc; -webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; } 。
pp_channels 。root-item { zoom: 1; position: relative; width: 139px; height: 34px; background-position: -13px -373px; overflow: visible; vertical-align: middle; } 。
pp_channels 。root-name { display: block; z-index: 1001; position: relative; border-top:1px solid #B9F5D2; padding-left: 10px; background-position: -10px -358px; cursor: pointer; } 。
pp_channels 。root-name span { display: block; border-right: 1px solid #B9F5D2; padding-left: 9px; height: 34px; font-size: 1。
2em; line-height: 34px; color: #000; background-position: -167px -358px; } 。pp_channels 。active 。
root-name { background: #fff; } 。pp_channels 。active 。root-name span { color: #C00; border-color: #fff; } 。
pp_channels 。no-sub 。root-name span { border-color: #fff; background-position: 20px -358px; } 。pp_channels 。
sub-list { left: 138px; top: -34px; padding: 5px 2px 5px 16px; width: 200px; overflow: hidden; _top: -35px; -moz-box-shadow: -1px 1px 1px #ccc; -webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; } 。
pp_channels 。active 。sub-list { visibility: visible; } 。pp_channels 。sub-list li { float: left; width: 83px; margin: 0 10px 5px 0; } 。
pp_channels 。sub-list 。main-cate { width: 200px; margin-right: -10px; font-weight: bold; } 。pp_channels 。
sub-list a { padding-left: 3px; line-height: 21px; background-position: -169px -418px; *background-position: -169px -420px; } 。
pp_channels 。sub-list a: hover { background-position: -169px -438px; *background-position: -169px -440px; } 。
pop-panel { z-index: 1000; position: absolute; visibility: hidden; border: 1px solid #B9F5D2; padding: 5px 9px; background: #fff; color: #61646E; #margin-left:-0px; _margin-left:-0px; } 。
pop-panel a { color: #61646E; } 。pop-panel a: hover { text-decoration:none; color: #C00; } 其他一些应用： 代码如下://定位 var X = $('#G_chan')。
offset()。top; var Y = $('#G_chan')。offset()。left; $("#G_chan-panel")。offset({ top: X 36, left: Y - 5 }); //鼠标经过 动画效果 防点击链接跳转 $("#G_chan")。
hover(function (event) { event || event。stopPropagation(); $("#G_chan-panel")。slideDown()。mouseleave(function () { $(this)。
slideUp() }); }); //点击 城市列表 下拉动画 防冒泡 $("#G_loc")。click(function (event) { event。preventDefault(); $("#G_loc-panel")。
slideToggle("slow"); });作者：曾祥展。收起
