`
步青龙
  • 浏览: 299009 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
博客专栏
72ba33fb-eefe-3de1-bd65-82a6e579265d
Java面试
浏览量：0
社区版块
存档分类
最新评论

放大图片的JS处理 可编辑下拉框

CSSJavaScriptXHTMLHTML 
阅读更多

可编辑的下拉框

<div style="position:relative;">  
	<span style="margin-left:100px;width:18px;overflow:hidden;"> 
		<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">  
			<option value="www.souzz.net"> souzz </option>  
			<option value="www.eWebSoft.com"> eWebSoft </option>  
			<option value="WEB开发者"> WEB开发者 </option>  
		</select>
	</span>
	<input name="box" style="width:100px;position:absolute;left:0px;">  
</div>
 

 

<!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>
<title>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置）_365CSS.CN</title>
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
        smallpic.width=smallX;
        smallpic.height=smallY;
        bigpic.width=srcX;
        bigpic.height=srcY;
        view.style.width=viewX;
        view.style.height=viewY;
        smallbox.style.borderWidth=border;
        bigbox.style.borderWidth=border;
        if (window.event){
                smallbox.style.width=smallpic.offsetWidth+border*2;
                smallbox.style.height=smallpic.offsetHeight+border*2;
                bigbox.style.width=bigX+border*2;
                bigbox.style.height=bigY+border*2;
        }else{
                smallbox.style.width=smallpic.offsetWidth;
                smallbox.style.height=smallpic.offsetHeight;
                bigbox.style.width=bigX;
                bigbox.style.height=bigY;
        }
        move(event);
}
function move(e){
        var e = window.event?window.event:e;
        var iebug = 0;
        if (window.event){
                var vX = e.offsetX - viewX/2;
                var vY = e.offsetY - viewY/2;
        }else{
                var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
                var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
                iebug = 2;
        }
        if (vX < 0) vX = 0;
        if (vY < 0) vY = 0;
        if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
        if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
        bigpico.style.marginLeft = - vX * bl 
        bigpico.style.marginTop = - vY * bl 
        view.style.left = vX + smallbox.offsetLeft + border;
        view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<body>
<div id="head"></div>
<div id="smallbox"><img src="http://2a.zol-img.com.cn/product_small/2_120x90/612/ceG2AXgWpz0x.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div>
<div id="bigbox" style="display:none"><div id="bigpico"><img src="http://2a.zol-img.com.cn/product_small/2_120x90/612/ceG2AXgWpz0x.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
</div>
<div id="view" onmousemove="move(event) "style="display:none"></div>
</body>
</html>
分享到：
| Java基础特殊应用
评论
发表评论

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

相关推荐

    combox实现的可编辑下拉框

    本文将深入探讨如何使用JavaScript实现一个可编辑的下拉框，并阐述其核心知识点。 ### 1. 可编辑下拉框的概念 传统的下拉框允许用户从预定义的选项中进行选择，但不支持用户直接在框内输入自定义值。而可编辑...

    可编辑下拉框（html）

    可编辑下拉框，用javascript 实现

    可编辑的下拉框(JavaScript)

    2. **JavaScript事件监听**：通过JavaScript监听用户的键盘事件和点击事件，例如`onkeyup`用于处理用户输入，`onclick`用于切换下拉框编辑状态。 3. **动态添加选项**：当用户输入新内容并提交时，JavaScript将新值...

    可编辑下拉框 动态修改添加下拉框选项

    参考别人文献 同时结合实际修改部分代码做出的一个可编辑的下拉框，并且修改过程同时会动态把没有的选项加入到下拉框中

    可编辑下拉框.zip

    总结来说，创建一个“可编辑下拉框”涉及JavaScript编程、DOM操作、事件处理以及可能的CSS样式设计。当现有的解决方案无法满足需求时，开发者需要具备分析和改进代码的能力，以适应特定业务场景。通过这个案例，我们...

    可编辑下拉框

    1. **源代码**：这是实现可编辑下拉框功能的核心代码，可能包含一个或多个类，实现了下拉框与输入框的融合，以及相应的事件处理，如点击、输入等。 2. **使用文档**：可能是一个markdown或PDF文件，详细介绍了如何在...

    Android 自定义可编辑下拉框

    "Android 自定义可编辑下拉框"是一个常见的需求，特别是在创建表单或者需要用户输入并选择特定值时。本教程将深入探讨如何实现这样一个功能，并提供已优化的代码和界面设计。 首先，我们来理解下拉框（Spinner）的...

    可编辑下拉框 可以自动匹配

    总的来说，可编辑下拉框结合自动匹配功能是提高Web应用交互性的关键工具，其背后涉及JavaScript编程、数据处理和UI设计等多个方面。正确地运用这些知识点，可以为用户提供更加便捷、高效的输入体验。

    可编辑的下拉框 既可以编辑，又可以下拉选择

    可编辑的下拉框 既可以编辑，又可以下拉选择 很不错的

    基于ASP.NET实现的可编辑的下拉框控件程序例子

    接下来，为了使下拉框具有可编辑性，我们需要利用JavaScript来监听`DropDownList`的`OnSelectedIndexChanged`事件，以及处理文本输入框的值。当用户在下拉框中做出选择时，`OnSelectedIndexChanged`事件会被触发，...

    HTML可编辑下拉框_JS自动补全

    总之，HTML可编辑下拉框结合JavaScript自动补全功能是提高网站或应用交互性的一个有效手段。通过监听用户输入、过滤选项并动态显示匹配项，我们可以创建一个既直观又高效的输入体验。对于开发者来说，掌握这项技术有...

    可编辑下拉框.动态加载数据

    现在可以编辑下拉框,可根据输入的内容重新加载下拉框的内容.令客户选择查找起来更方便. 使用方法.将此js复制到项目中.在用到需要编辑下拉框的jsp界面中引用此js.在body 属性里. 调用onload事件. ();"&gt; 测试方法:点击...

    Jquery可编辑下拉框控件

    这种可编辑下拉框控件的一个典型实现是`Selectize.js`，正如压缩包中的文件名`selectize.js-master`所示。Selectize.js是一个轻量级且高度可定制的插件，它将`&lt;input type="text"&gt;`元素转换为具有下拉选项的可编辑框...

    Android实现仿QQ登录可编辑下拉框

    在Android开发中，创建一个仿QQ登录的可编辑下拉框是一种常见的需求，它结合了EditText的文本输入功能和Spinner的下拉选择功能，同时提供了更友好的用户交互体验。本示例将通过使用EdiText、PopupWindow、ListView和...

    js 可输入下拉框（jquery）

    在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...

    可编辑的下拉框

    可以对下拉框的内容进行编辑， 也可以删除下拉框中的内容

    js实现下拉框选择要显示图片的方法

    最后，出于对可访问性和SEO优化的考虑，可以添加适当的`alt`属性到`&lt;img&gt;`标签中，为图片提供文本替代说明。 综合以上内容，通过使用HTML、CSS和JavaScript，我们可以实现一个简单的下拉框与图片显示相结合的交互...

    asp.net 可编辑下拉框

    通过分析和学习这些代码，开发者可以了解如何在自己的项目中实现可编辑下拉框，包括前端HTML/CSS/JS代码和后端C#或VB.NET的处理逻辑。这是一个很好的学习资源，可以帮助提升ASP.NET Web应用的交互性和用户体验。

    asp.net可输入可选择下拉框

    在这种情况下，“asp.net可输入可选择下拉框”应运而生，它结合了文本框和下拉框的优点，提供了更灵活的交互体验。 首先，我们需要理解这个自定义用户控件的工作原理。通常，它是通过JavaScript或者jQuery在客户端...

    可编辑下拉框 支持常用浏览器

    标题中的“可编辑下拉框 支持常用浏览器”指的是在网页开发中，实现一个具有编辑功能的下拉框（Dropdown）控件，并且这个控件能在主流的浏览器上正常工作，如Chrome、Firefox、Safari和Edge等。在Web应用中，下拉框...

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