提示功能的检索框
分步骤介绍如何设计一个带选择和提示功能的检索框
好多网站的搜索输入框设计的很漂亮 , 接下来笔者将逐步介绍如何设置自己的搜索输入框 .
设计效果图 :
该效果主要采用 CSS 样式与 Javascript 进行实现 . 不得不说 CSS 样式功能很强大 , 而且效果很炫 , 笔者推荐一本书叫《 CSS 禅意花园》 , 你可以从中感悟 CSS 的唯美之处 .
我们分步 来介绍如何实现 .
第一步：如何实现带提示信息的输入框
我们知道输入框在 html 中使用 <input type= ”text” > 标签定义 , 针对输入框我们常用的事件为触焦 , 和脱焦 .
我们从其它网站这块应用可以看出 , 当输入框获得焦点时提示信息就消失了 , 当输入框失去焦点时输入框中的提示信息就出现了 .
所以我们只需要对不同的事件 , 添加不同的 CSS 样式 , 效果就可以完成了 .
代码如下 :
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gbk" >
< title > 焦点事件特效-搜索框 </ title >
< style >
.init {
color : gray ;
/* font-style:italic; */
width : 200px ;
}
.highlight {
color : black ;
/* font-style:normal; */
width : 200px ;
}
</ style >
< script >
function txt_onfocus(tag){
if (tag.value == tag.defaultValue){
tag.value = '' ;
tag.className = ' highlight ' ;
}
}
function txt_onblur(tag){
if (tag.value == '' ){
tag.value = tag.defaultValue;
tag.className = ' init ' ;
}
}
</ script >
</ head >
< body >
< input type ="text" onblur ="txt_onblur(this)" onfocus ="txt_onfocus(this)" value ="关键词" class ="init" >
< input type ="button" value ="找找看" >
</ body >
</ html >
效果图如下 :
接下来我们在这个基础上进行更完美的设计.
第二步 : 设计带选项的检索框
先写好 HTML 页面如下 , 进行相关数据展示 , 然后再进行 CSS 样式进行布局
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gbk" >
< title > 焦点事件特效-搜索框 </ title >
</ head >
< body >
< div class ="searchdiv" >
< div class ="searchTool" >
< form onsubmit ="return searchFooterFunc();" >
< span class ="choose" hoverable ="true" >
< span class ="chooseList" > 全部 </ span >
< b ></ b >
< div class ="choosePop" >
< ul >
< li >< a href ="#" value ="0" > 全部 </ a ></ li >
< li >< a href ="#" value ="1" > 作品 </ a ></ li >
< li >< a href ="#" value ="2" > 经验 </ a ></ li >
< li >< a href ="#" value ="3" > 作者 </ a ></ li >
</ ul >
</ div >
</ span >
< input type ="text" onblur ="txt_onblur(this)" onfocus ="txt_onfocus(this)" value ="请输入关键词" class ="searchTextInit" >
< input type ="button" value class ="searchBtn" >
</ form >
</ div >
</ div >
</ body >
</ html >
效果图如下 :
很丑吧, 的确很丑 , 如果我们看到的那些网站去掉 CSS 样式 , 就一个词形容：惨不忍睹 .
接下来我们用 CSS 进行布局 , 样式设计 .CSS 代码如下 :
<style>
body, button, input, select, textarea {
font : 12px/1.6 Verdana, Helvetica, sans-serif ;
}
.searchdiv {
height : 38px ;
padding : 8px 0 0 0 ;
background : #ffba00 ;
border-top : 1px solid #3e3e3e ;
border-bottom : 1px solid #3e3e3e ;
text-align : center
}
/* .footerSearch .searchBar{margin:0 auto;} */
.searchTool {
width : 360px ;
height : 32px ;
line-height : 32px ;
margin : 0px auto 0 auto ;
text-align : left ;
background : #fff ;
}
.choose {
float : left ;
cursor : pointer ;
height : 32px ;
width : 52px ;
display : inline-block ;
position : relative ;
line-height : 32px ;
font-size : 12px ;
text-align : center ;
padding-right : 10px ;
}
/* 下拉箭头样式 */
.choose b {
position : absolute ;
right : 8px ;
top : 14px ;
width : 0 ;
height : 0 ;
border-width : 4px 4px ;
border-style : solid ;
border-color : #868686 #fff #fff ;
font-size : 0 ; line-height : 0 ;
}
.searchTextInit {
height : 32px ;
line-height : 32px ;
border : 0 ;
border-left : 1px solid #eca128 ;
padding : 0 8px ;
font-size : 12px ;
color : #333 ;
color : gray ;
width : 250px ;
background : #fff ;
float : left
}
.searchTextInput {
height : 32px ;
line-height : 32px ;
border : 0 ;
border-left : 1px solid #eca128 ;
padding : 0 8px ; /* 上 右 下 左 */
font-size : 12px ;
color : black ;
width : 250px ;
background : #fff ;
float : left
}
.searchBtn {
float : left ;
height : 24px ;
width : 24px ;
background : #fff
url(images/bs.png) no-repeat center 0px ;
cursor : pointer ;
border : 0 ;
margin : 4px 0 0 4px ;
}
.searchBtn:hover {
background : #fff url(images/bs.png)
no-repeat center -24px ;
}
.choose ul {
border-bottom : 1px solid #eca128 ;
list-style : none ;
width : 64px ;
padding : 0px ;
}
.choose:hover b { border-color : #868686 #fff #fff ;}
.choose:hover .choosePop {
display : inline-block ;
}
.choosePop {
display : none ;
width : 64px ;
position : absolute ;
left : -1px ;
top : 20px ;
}
/* 鼠标离开列表上效果 */
.choosePop ul li a:link,.choosePop ul li a:visited {
color : #666 ;
background : #fff ;
}
/* 鼠标移动到列表上效果 */
.choosePop ul li a:hover,.choosePop ul li a:active {
color : #2d2d2d ;
background : #ffba00 ;
}
.choosePop ul li {
border-left : 1px solid #eca128 ;
border-right : 1px solid #eca128 ;
line-height : 24px ;
}
.choosePop ul li a {
display : block ;
font-size : 12px ;
text-decoration : none ;
}
</style>
这下我们看一下效果
第三步 : 整合并完善效果
然后将第一步的效果进行整合. 即可得到效果图所示的漂亮的检索框了 .
转载请注明出处:[ http://www.cnblogs.com/dennisit/archive/2013/03/20/2970976.html ]
热爱生活,热爱Coding,敢于挑战,用于探索 ...
分类: JavaWeb
标签: web前段设计 , 带消息提示 , 检索框
分步介绍如何实现精美的带二级栏目的导航栏.
许多企业门户网站几乎都有导航栏 , 各种风格 , 看起来很炫 , 这里将接一下如何用 CSS+DOM 操作实现一个精美的导航栏 , 风格整合恒生电子 + 多玩招聘网站 , 嘿嘿 , 因为跟这 2 家公司算是有渊源的 . 这辈子第一个 offer 是恒生电子的 ! 算是 初恋啊！而且这 2 哥们去年面试时选的地方都在西安佳德酒店！这是准备要搞基么 ( 邪恶一下 ). 个人感觉做的效果比多玩招聘网站的漂亮 , 那个颜色看着真心不爽！！数据呢就取了一下恒生电子的官网首页相关的，哎！打广告连广告费都没有！！废话不说啦 , 直接上代码！进行数据在 HTML 中展示 , 这里采用无序列表 <li> 标签进行数据展示 .
代码如下 :
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gbk" />
< title > 导航-下拉菜单 </ title >
</ head >
< body >
< ul id ="nav" >
< li >< a href ="#" > 关于我们 </ a >
< ul >
< li >< a href ="#" > 公司简介 </ a ></ li >
< li >< a href ="#" > 企业文化 </ a ></ li >
< li >< a href ="#" > 合作伙伴 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" > 解决方案 </ a >
< ul >
< li >< a href ="#" > 证劵期货 </ a ></ li >
< li >< a href ="#" > 基金理财 </ a ></ li >
< li >< a href ="#" > 财资管理 </ a ></ li >
< li >< a href ="#" > 其它 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" > 在线客服 </ a >
< ul >
< li >< a href ="#" > 证劵客服 </ a ></ li >
< li >< a href ="#" > 基财客服 </ a ></ li >
< li >< a href ="#" > 银行客服 </ a ></ li >
< li >< a href ="#" > 科技客服 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" > 诚聘英才 </ a >
< ul >
< li >< a href ="#" > 社会招聘 </ a ></ li >
< li >< a href ="#" > 校园招聘 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" > 联系我们 </ a >
< ul >
< li >< a href ="#" > 联系方式 </ a ></ li >
< li >< a href ="#" > 各事业部 </ a ></ li >
< li >< a href ="#" > 海外公司 </ a ></ li >
</ ul >
</ li >
</ ul >
</ body >
</ html >
此时的效果图如下 :
接下来为 HTML 页面添加 CSS 样式布局 +Javascript 代码进行 DOM 节点操作 .代码比较简单直接贴了,
< style >
* {
margin : 0 ;
padding : 0 ;
}
body {
font-size : 12px ;
}
a {
display : block ;
color : white ;
width : 185px ;
text-align : center ;
text-decoration : none ;
}
a:hover {
color : white ;
background : #C00 ;
}
/* 主菜单样式 */
#nav {
line-height : 40px ;
list-style-type : none ;
background-color : #404040 ;
margin-left : 100px ;
}
/* 一级菜单样式 */
#nav li {
float : left ;
width : 185px ;
font-family : "微软雅黑","Times New Roman",Georgia,Serif ;
font-size : 14px ;
border-right : 1px solid gray ;
background : #404040 ;
}
/* 二级菜单列表的样式 */
#nav li ul {
line-height : 35px ;
position : absolute ;
left : -1000px ;
list-style-type : none ;
text-align : center ;
width : 185px ; /* 很有趣的属性,该属性可以改变下拉列表显示方式,185为宽度表示单位宽 185*2时则下拉列表列为2显示 */
}
/* 二级菜单项的样式 */
#nav li ul li {
background : #CCC ;
border : 0px solid white ;
}
/* 二级菜单项中的超链接 */
#nav li ul a {
width : 185px ;
text-align : center ;
font-size : 12px ;
color : #F6F6F6 ;
}
/* 鼠标移动到一级菜单后应用的样式 */
#nav li.mouseover ul {
left : auto ;
}
</ style >
< script >
function createMenu(){
var items = document.getElementById( " nav " ).getElementsByTagName( " li " );
for ( var i = 0 ; i < items.length; i ++ ){
items[i].onmouseover = function (){
this .className = " mouseover " ;
}
items[i].onmouseout = function (){
this .className = "" ;
}
}
}
</ script >
保存 , 然后通过浏览器解析 , 即可得到如下漂亮的效果图 .
当然 , 这样的下拉列表是单个的 , 我们在有些情况下见到的下拉列表中可能并排显示 . 因为实例中我们定义的列表宽度为 185px, 所以我们可以通过修改二级栏目的 CSS 属性的宽度值实现下拉列表并排显示的效果 .
需要修改的代码如下 :
/*二级菜单列表的样式*/
#nav li ul{
line-height:35px;
position:absolute;
left:-1000px;
list-style-type:none;
text-align:center;
370px; /*很有趣的属性,该属性可以改变下拉列表显示方式,185为宽度表示单位宽 185*2时则下拉列表列为2显示*/
}
此时达到的效果将是下图所示：
至此,我们漂亮的导航栏就制作完成啦！谢谢捧场！
转载请注明出处:[ http://www.cnblogs.com/dennisit/archive/2013/03/20/2971431.html ]
热爱生活,热爱Coding,敢于挑战,用于探索 ...
分类: Web前段
标签: 导航栏 , Dom操作 , CSS样式
如何设计页面固定广告的效果
处于盈利的需要 , 很多网页上都会放置文字或图片广告 , 固定位置的广告出现在页面固定的位置 , 在用户拖动滚动条浏览网页的过程中 , 广告会根据页面滚动的位置自动调整 , 保持出现在用户的视野内 .
接下来介绍如何设计该种效果
固定广告的设计思路
1. 广告的设计
因为希望广告放置于页面特定的位置中 , 所以应该通过 CSS 广告元素的布局方式为绝对布局方式 (position:absolute), 具体做法是将广告图片与关闭广告的文字放入一个 div 层中 . 在通过 css 指定层的样式 .
2. 事件的处理
单击广告内容 , 进行相应的页面跳转
/*单击触发的事件*/
function adOnClick(){
window.location.href="http://www.cnblogs.com/dennisit/";
}
单击广告关闭按钮 , 执行层获取 , 样式隐藏 , 使用 divobj.innerHTML= ”” , 进行广告销毁
/*关闭触发的事件*/
function adClosed(){
var ad = document.getElementById("ad");
//隐藏层,并清空层中的内容
ad.style.display="none";
ad.innerHTML="";
}
3. 广告位置固定
使用 Javascript 进行事件监听操作 , 因为要监听的是窗体滚动事件 , 所以应对 window 对象添加 onscroll 事件 . 为了让广告保持在页面可视范围中的固定位置 ,
广告的纵坐标应该为 : 广告距离页面上端的相对距离 + 垂直滚动条滚动距离 .
广告的横坐标应该为 : 广告距离页面左端的相对距离 + 水平滚动条滚动距离 .
可以通过 document.body 的 scrollTop 属性获取垂直滚动条的滚动距离 , 通过 document.body 的 scrollLeft 属性获取水平滚动条的滚动距离 .
为了视觉上的动态效果 , 使用 window 对象的 setTimeout 方法定时进行移动 . 每次移动坐标距离的 1/5.
//记录widow.setTimeout定时操作的句柄
var timeHandler;
window.onscroll = function() {
//如果上一次的移动效果还未完成则终止
if (timeHandler) window.clearTimeout(timeHandler);
var ad = document.getElementById('ad');
/*
#ad中的相应属性值 left:10px; top:90px;
*/
var oldX = ad.offsetLeft; //获取广告的当前位置
var oldY = ad.offsetTop; //获取广告的当前位置
var targetX = 10 + document.body.scrollLeft; //计算出希望移动到的新位置
var targetY = 90 + document.body.scrollTop; //计算出希望移动到的新位置
//开始移动效果
move(oldX,oldY,targetX,targetY);
}
function move(oldX,oldY,targetX,targetY) {
var isMove = false; //是否需要移动
var ad = document.getElementById('ad');
//Y方向的判断
//判断是否已经接近了目标位置
if (oldY + (targetY - oldY) / 5 >= targetY) {
//如果已经接近了目标职位，将图片移动到目标位置
ad.style.top = targetY;
//释放句柄引用
timeHandler = null;
} else {
//如果远离目标位置，每次移动相距距离的1/5
oldY += (targetY - oldY) / 5;
ad.style.top = oldY;
isMove = true; //需要移动
}
//X方向判断
//判断是否已经接近了目标位置
if (oldX + (targetX - oldX) / 5 >= targetX) {
//如果已经接近了目标职位，将图片移动到目标位置
ad.style.left = targetX;
//释放句柄引用
timeHandler = null;
} else {
//如果远离目标位置，每次移动相距距离的1/5
oldX += (targetX - oldX) / 5;
ad.style.left = oldX;
isMove = true; //需要移动
}
//0.05秒后进行下一次移动
if(isMove){
timeHandler = window.setTimeout('move(' + oldX + ', ' + oldY + ',' + targetX + ', ' + targetY + ')', 50);
}
}
4. 特殊处理
当用户拖动滚动条时 , 如果上一次的移动距离效果还没有完成 , 则需要终止上一次的移动 , 从当前的位置开始新的移动效果 . 否则会出现连续拖动滚动条后广告图片抖动的不良效果 .
效果图 :
完整代码 :
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=GBK" >
< title > 固定位置的广告 </ title >
< style >
/* 用来模拟大页面,使页面出现垂直和水平滚动条 */
#container {
width : 2000px ;
height : 800px ;
background-color : #E6EEF9 ;
}
#ad {
position : absolute ;
left : 10px ;
top : 90px ;
width : 116px ;
height : 190px ;
background-color : #eee ;
font-size : 12px ;
}
.adtitle {
width : 116px ;
height : 25px ;
line-height : 25px ;
text-align : center ;
color : white ;
background-color : #C80901 ;
padding : 0px ;
}
.adcontent {
width : 116px ;
height : 142px ;
cursor : pointer ;
padding : 0px ;
margin : 0px ;
}
.adclose {
padding : 0px ;
text-align : center ;
width : 116px ;
height : 25px ;
line-height : 25px ;
background-color : #3E3E3E ;
cursor : pointer ;
}
</ style >
< script >
// 记录widow.setTimeout定时操作的句柄
var timeHandler;
window.onscroll = function () {
// 如果上一次的移动效果还未完成则终止
if (timeHandler) window.clearTimeout(timeHandler);
var ad = document.getElementById( ' ad ' );
/*
#ad中的相应属性值 left:10px; top:90px;
*/
var oldX = ad.offsetLeft; // 获取广告的当前位置
var oldY = ad.offsetTop; // 获取广告的当前位置
var targetX = 10 + document.body.scrollLeft; // 计算出希望移动到的新位置
var targetY = 90 + document.body.scrollTop; // 计算出希望移动到的新位置
// 开始移动效果
move(oldX,oldY,targetX,targetY);
}
function move(oldX,oldY,targetX,targetY) {
var isMove = false ; // 是否需要移动
var ad = document.getElementById( ' ad ' );
// Y方向的判断
// 判断是否已经接近了目标位置
if (oldY + (targetY - oldY) / 5 >= targetY) {
// 如果已经接近了目标职位，将图片移动到目标位置
ad.style.top = targetY;
// 释放句柄引用
timeHandler = null ;
} else {
// 如果远离目标位置，每次移动相距距离的1/5
oldY += (targetY - oldY) / 5 ;
ad.style.top = oldY;
isMove = true ; // 需要移动
}
// X方向判断
// 判断是否已经接近了目标位置
if (oldX + (targetX - oldX) / 5 >= targetX) {
// 如果已经接近了目标职位，将图片移动到目标位置
ad.style.left = targetX;
// 释放句柄引用
timeHandler = null ;
} else {
// 如果远离目标位置，每次移动相距距离的1/5
oldX += (targetX - oldX) / 5 ;
ad.style.left = oldX;
isMove = true ; // 需要移动
}
// 0.05秒后进行下一次移动
if (isMove){
timeHandler = window.setTimeout( ' move( ' + oldX + ' , ' + oldY + ' , ' + targetX + ' , ' + targetY + ' ) ' , 50 );
}
}
/* 单击触发的事件 */
function adOnClick(){
window.location.href = " http://www.cnblogs.com/dennisit/ " ;
}
/* 关闭触发的事件 */
function adClosed(){
var ad = document.getElementById( " ad " );
// 隐藏层,并清空层中的内容
ad.style.display = " none " ;
ad.innerHTML = "" ;
}
</ script >
</ head >
< body >
< div id ="ad" >
< div class ="adtitle" > 广告标题 </ div >
< div class ="adcontent" >
< img src ="images/info.png" onClick ="adOnClick()" />
</ div >
< div class ="adclose" onClick ="adClosed()" > 关闭 </ div >
</ div >
< div id ="container" >
</ div >
</ body >
</ html >
效果完成,欢迎前端大牛批评指教.
转载请注明出处:[ http://www.cnblogs.com/dennisit/archive/2013/03/20/2971969.html ]
热爱生活,热爱Coding,敢于挑战,用于探索 ...
分类: Web前段
标签: CSS样式 , web前端 , 固定广告
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息