`
crabdave
  • 浏览: 1294825 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

网页中的个人头像选择框（转）

 
阅读更多

网页中的个人头像选择框（转）

 

1、先看个效果

 

 

2、源文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
body,td,div  {font:12px 宋体}
label        {height:119px;padding:3px 0px 0px 4px}
.link_box    {text-align:left;cursor:default}
.link_head   {width:100%;height:123;border:2px inset}
.link_text   {background:#fff;padding-left:2px}
.link_arrow0 {font:14px marlett;text-align:center;width:22;height:100%;border:2px outset;background:buttonface}
.link_arrow1 {font:14px marlett;text-align:center;width:22;height:100%;border:1px solid buttonshadow;padding:2px 0px 0px 2px;background:buttonface}
.link_value  {position:absolute;visibility:hidden;border:1px solid;overflow:auto;overflow-x:hidden;filter:alpha(opacity:0)}
.link_record0{width:100%;height:120;border-top:1px solid #eee;background:#fff;color:#000;padding-left:2px}
.link_record1{width:100%;height:120;border-top:1px solid #047;background:#058;color:#fe0;padding-left:2px}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//選單淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//選單淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度顯示指標位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替換顯示內容
el.parentElement.parentElement.childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).childNodes(0).innerHTML=el.innerHTML
}
document.onclick=dropdownHide
</script>
 </head>

 <body>
<div class=link_box style="width:150px" onselectStart="return false">
<div class=link_head onclick="dropdown(value2)">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td><div class=link_text><img src="3.gif" align="absmiddle"><label>请选择</label></div></td>
<td width=22 align=right><div class=link_arrow0 onmousedown="this.className='link_arrow1'" onmouseup="this.className='link_arrow0'" onmouseout="this.className='link_arrow0'">6</div></td>
</tr></table>
</div>
<div id=value2 class=link_value style="width:30%;height:30%">
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);" ><img src="1.jpg" align="absmiddle"><label>笑死你</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);"  ><img src="2.jpg"  align="absmiddle"><label>反省一下</label></div>
<div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);"   ><img src="3.gif"   align="absmiddle"><label>下班啦</label></div>
</div>
</div>
 </body>
</html>

 

3、改改，加个table，这样就可以分几行展示：

<div id=value2 class=link_value style="width:650px;height:30%">
<table>
   <tr>
     <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="1.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="2.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="3.gif" align="absmiddle"></div></td>
   </tr>
   <tr>
     <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="1.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="2.jpg" align="absmiddle"></div></td>
  <td><div class=link_record0 onmouseover="hiLight(this)" onclick="CheckMe(this);">
<img src="3.gif" align="absmiddle"></div></td>
   </tr>
</table>
</div>

 

效果：

 源文件见附件！

 

分享到：
| 解决HSQL中java.lang.NoClassDefFoundError ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    创意CSS3头像展示网页特效

    在网页设计中，头像展示不仅仅是基本信息的呈现，更是一个展现个人风格或品牌形象的窗口。以下将详细探讨CSS3在这个领域中的应用及相关的知识点。 1. **CSS3选择器**：CSS3引入了更精确的选择器，如类选择器、ID...

    amazeui框架点击弹出头像上传代码.zip

    在这个"amazeui框架点击弹出头像上传代码.zip"压缩包中，包含了一个利用AmazeUI实现的头像上传功能，特别适用于网页中的个人资料编辑或用户头像更换场景。 首先，我们来详细解析这个功能的核心知识点： 1. **Amaze...

    jsp js java网页头像切割实例

    在网页开发中，头像裁剪功能是一种常见的需求，它允许用户上传个人照片并自定义裁剪区域，以便展示在网站上。本实例主要探讨如何使用JSP、JavaScript（JS）以及Java技术来实现这一功能。以下是这个实例涉及的关键...

    简单的个人网页，HTML+CSS

    在这个个人网页中，我们可能会看到如`.bg-image`用于设置背景图片，`.avatar`用于设置头像样式。此外，CSS还支持盒模型、布局方式（如Flexbox和Grid）、响应式设计等，使得网页能在不同设备上良好显示。 3. **动态...

    头像上传更改插件html

    在这个插件中，CSS将用于美化头像选择框、预览区域以及整个界面的视觉效果。例如，可以使用CSS设置按钮的边框、背景色、字体样式等，同时调整预览图片的大小和位置，使其适应不同的屏幕尺寸。 为了实现“take_photo...

    ASP.NET头像前剪切

    在ASP.NET环境中，实现用户头像在线剪切是一项常见的需求，尤其在社交网络、论坛或者个人资料设置等场景中。本教程将详细讲解如何利用Jcrop和swfupload这两个工具来构建这一功能。 首先，Jcrop是一个强大的...

    网页头像剪裁预览

    网页头像剪裁预览是一种常见的用户界面功能，主要用于在线平台让用户自定义并预览自己的个人头像。这种功能在社交媒体、论坛、博客、电子商务网站等广泛应用，它允许用户选择一张图片，然后通过裁剪工具调整选定区域...

    jsp头像上传编辑截取实例

    这个实例适用于网站或应用中用户个人资料的头像管理，让用户能够自定义选择大小并裁剪上传的图片。 首先，让我们了解JSP的基本概念。JSP是一种动态网页技术，它允许开发人员将Java代码嵌入到HTML或XML文档中，以...

    头像编辑器

    "头像编辑器"是一款专为网页设计的头像编辑工具，它借鉴了类似QQ头像编辑的功能，让用户能够在网页上方便地裁剪、编辑个人头像。这款工具主要使用JavaScript语言开发，可能还结合了CSS3和HTML5等前端技术，以实现...

    个人简介简历类网页模板

    简历网页应清晰地划分各个部分，如头像、个人信息、教育背景、工作经验、技能列表、项目案例和个人陈述等，使用适当的标签如`&lt;header&gt;`, `&lt;section&gt;`, `&lt;article&gt;` 和 `&lt;footer&gt;`来组织内容。 2. **CSS样式**：CSS...

    圆形头像剪切

    这个功能允许用户上传个人照片，然后将其裁剪成圆形，以便适应应用内的圆形头像展示。 首先，我们要理解圆形头像的优势。在视觉设计上，圆形头像通常给人一种更加友好和亲近的感觉，同时也能突出用户的面部特征。...

    头像编辑器上传工具

    在这款头像编辑器中，Flash被用来实现图像处理的动态效果和实时交互性，让用户能够轻松地调整自己的头像，满足社交媒体和个人网站等对头像个性化的需求。 头像编辑器的核心功能包括： 1. **图像裁剪**：用户可以...

    asp版头像切割、剪裁代码

    2. **ImgCropper**：这可能是用于图像剪裁的JavaScript库，允许用户通过拖动选择框或者调整选择框大小来裁剪图片。ImgCropper通常会返回选定区域的坐标和比例，这些信息随后会被用来处理服务器端的图片。 3. **...

    仿qq、微信群组组合头像

    在群组中，每个成员都有自己的头像，而群组头像则需要将这些个人头像组合成一个整体。 1. **组合头像的设计** - **布局模式**：常见的布局模式有圆形、矩形或不规则形状，比如“字母表”型（按照成员名字首字母...

    WEB带头像二维码

    1. **个性化展示**：WEB带头像二维码允许用户将个人头像与网页链接结合，形成独特的二维码。当他人扫描这个二维码时，不仅可以看到用户的头像，还能直接跳转到用户的个人网页，展示个人信息、作品集或社交平台账号。...

    截取头像上传

    在IT行业中，头像上传是一项常见的功能，尤其在社交网络、论坛、博客和个人资料设置等应用场景中。"截取头像上传"这个话题涉及到的技术主要包括图像处理、前端开发和后端服务。以下是对这一主题的详细说明： 1. **...

    ASP头像网

    【ASP头像网】是一个基于ASP技术开发的网站源码，专用于创建和管理个人头像的在线平台。ASP（Active Server Pages）是微软推出的一种服务器端脚本环境，允许开发者编写动态网页并处理服务器端的数据。这个源码提供了...

    头像上传插件 带裁切 缩略图，旋转等功能

    在IT行业中，头像上传插件是常见的网页交互功能，尤其在社交网络、论坛或个人中心等场景下，用户往往需要上传自己的头像以展示个人形象。本插件集成了裁切、缩略图生成以及旋转等多种功能，使得用户体验更加完善。...

    Jcrop ssh 头像上传前后台

    在IT行业中，头像上传是一项常见的功能，尤其在社交网络、论坛或个人资料管理的系统中。本项目基于"Jcrop ssh 头像上传前后台"的标题和描述，我们可以探讨以下几个关键知识点： 1. **Jcrop**：Jcrop是一款...

Magicbox
Global site tag (gtag.js) - Google Analytics