`
zhouxianglh
  • 浏览: 267435 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DIV和Image 的一些JavaScript 操作

阅读更多
<html>
<head>
<title>JavaScript</title>
<style type="text/css">
#pic {
	position:absolute;
	left:0px;
	top:80px;
	width:120px;
	height:120px;
	z-index:1;
	border: thin dashed #CC00FF;
}
#select {
	position:absolute;
	left:0px;
	top:80px;
	width:40px;
	height:40px;
	z-index:2;
	border: thin dashed #CC00FF;
}
#display {
	position:absolute;
	left:120px;
	top:80px;
	width:600px;
	height:600px;
	z-index:1;
	border: thin dashed #CC00FF;
	background-repeat: no-repeat;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
var multiples = 1;
var path;

$("document").ready(function() {
    $("#select").bind("mousedown", 
    function(event) {
        mouseDown(event);
    });
    $("#file").bind("change", 
    function(event) {
        addImage(this);
    });
});
//添加图片
function addImage(obj) {
    if (obj) {
        if (window.navigator.userAgent.indexOf("MSIE") >= 1)
        {
            path = obj.value;
        }
        else if (window.navigator.userAgent.indexOf("Firefox") >= 1)
        {
            path = obj.files[0].getAsDataURL();
        }
    }
    var disImage = new Image();
    disImage.src = path;
	disImage = editImage(disImage);
	$("#pic").empty();
	$("#pic").get(0).appendChild(disImage);
	$("#display").css("background-image","url(" + path+ ")");
}
//设置图片
function editImage(image){
	for(multiples = 1;image.width>=120 || image.height>=120;multiples ++){
		image.width = image.width * 0.8;
		image.height = image.height * 0.8;
	}
	return image;
}
//移动图片
function moveImage(newX,newY){
	newX = (0- newX)*12;
	newY = (80 - newY)*12;
	$("#display").css("background-position",newX + "px " + newY + "px");
}
//移动select
function mouseDown(a) {
    var o = $("#select").get(0);
    //var o = document.getElementById("display");
    var d = document;
    var x = a.clientX + d.body.scrollLeft - o.offsetLeft;
    var y = a.clientY + d.body.scrollTop - o.offsetTop;
    d.onmousemove = function(a)
    {
        if (!a) a = window.event;
        var newX = a.clientX + document.body.scrollLeft - x;
        var newY = a.clientY + document.body.scrollTop - y;
        if (newX >= 0 && newX <= 80 && newY >= 80 && newY <= 160) {
            o.style.left = newX;
            o.style.top = newY;
			moveImage(newX,newY);
        }
    };
    d.onmouseup = function()
    {
        d.onmousemove = null;
        d.onmouseup = null;
    };
}
</script>
</head>
<body>
<input type="file" id="file"/>
<div id="pic"></div>
<div id="select"></div>
<div id="display"></div>
</body>
</html>
 

 

分享到:
评论

相关推荐

    DIV+CSS与javascript的结合运用.docx

    在这一领域内,DIV+CSS 和 JavaScript 成为了构建高质量、交互性强的网页的重要工具。这两种技术的结合不仅能够提升网页的视觉效果,还能增强用户与网页之间的互动体验。 #### 二、DIV+CSS的基本概念及其优势 **1....

    流程进度条(css+div+image)

    一个简单的流程进度条通常由两部分组成:容器(通常是div元素)和进度指示器。容器用于包裹整个进度条,而进度指示器则表示已完成的部分。在HTML中,我们可以创建如下的基础结构: ```html &lt;div class="progress-...

    css + div + javascript 图片轮换

    总结来说,“css + div + javascript 图片轮换”是一种结合了前端三大核心技术的动态效果实现方式。通过CSS控制样式,HTML结构化数据,JavaScript处理交互,可以轻松地在网页上创建出吸引人的图片轮播效果。这种技术...

    JavaScript img+div放大镜

    JavaScript img+div放大镜是一种常见的网页交互效果,用于在用户鼠标悬停在图片上时,显示一个放大版的图像,以便用户能更清晰地查看图片细节。这种效果常见于电商网站的产品展示,提升用户体验。本教程将深入探讨...

    Div块上下左右循环滚动

    这些图片可以通过CSS的`background-image`属性或者JavaScript的DOM操作添加到Div元素中。 总的来说,“Div块上下左右循环滚动”是一个结合了HTML、CSS和JavaScript的网页动态效果,通过类设计和JavaScript动画,...

    A JavaScript Image Gallery

    这个主题基于《JavaScript DOM编程艺术》一书中的示例,这本书是学习JavaScript和DOM操作的重要资源。DOM(Document Object Model)是HTML和XML文档的结构化表示,它允许我们通过JavaScript来操作页面元素。 在创建...

    div 显示图片特效(一张张图片的切换)

    本文将详细讲解如何通过`div`和JavaScript实现一张张图片的平滑切换。 首先,我们需要理解`div`元素。`div`是HTML中的一个块级元素,全称为“division”,即分区或分组。它主要用于组织和布局页面内容,可以通过CSS...

    div内容转成图片格式

    1. **选择目标div**:获取需要转换的`div`元素,可以通过JavaScript的`document.getElementById`或`querySelector`等方法实现。 2. **复制div到canvas**:由于`canvas`无法直接将`div`内容绘入,我们需要先将`div`...

    HTML加js图片的翻转缩放移动和div分层

    这里的`id`属性将用于JavaScript中的选中和操作。 接着,我们使用JavaScript来实现图片的翻转、缩放和移动。这通常涉及到CSS样式的变化和事件监听器的设置。例如,我们可以添加以下JavaScript代码: ```javascript...

    使用用jquer技术实现的imagemenu

    在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细讲解如何利用jQuery技术来实现一个功能丰富的图像菜单,即"imagemenu"。 首先,我们需要理解...

    对层的删除和添加,并且可以删除div层的时候排序

    在网页设计和开发中,`div`元素是一个非常基础且重要的组成部分。`div`全称为“division”,中文译为“分隔”或“区域”,它主要用于组织和布局页面内容。本教程将深入探讨如何在HTML中对`div`层进行添加、删除以及...

    DIV+CSS+JQUERY源码实例

    jQuery是一个轻量级的JavaScript库,简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它的出现使得JavaScript的开发变得更加高效和便捷。例如,使用jQuery实现一个简单的点击事件: ```javascript $...

    div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作

    在网页设计和开发中,"div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作" 是一种常见的交互设计技术,用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层,让用户专注于当前的任务...

    DIV折叠展开DIV折叠展开

    在这段代码中,首先定义了两个JavaScript函数`panall()`和`pan(divid)`。接着,在HTML部分,通过使用`&lt;div&gt;`标签创建了一个点击后可以展开/收起所有DIV的按钮,并通过设置`onclick`属性调用`panall()`函数。同时,还...

    div+css图片处理特效

    总的来说,结合`div`、CSS和JavaScript,开发者可以创造出无数创新的图片处理特效,提升网站的吸引力和互动性。通过深入学习和实践这些技术,设计师和开发者能够构建出更加生动、富有吸引力的网页界面。

    Image Puzzle Game in JavaScript Free Source Code.zip

    今天我们将深入探讨一个基于JavaScript实现的图片拼图游戏的源代码,通过这个项目,我们可以学习到JavaScript的基本语法、DOM操作以及事件处理等关键知识点。 首先,我们需要理解项目的核心功能。图片拼图游戏通常...

    jquery点击div层图片爆炸碎裂效果

    1. **jQuery**:这是一个JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个特效中,jQuery用于监听div元素的点击事件,并触发相应的动画。 2. **前端开发**:这里涉及到的是客户端的网页开发,主要在...

    HTML DIV下载为图片 JS下载IDV为图片下载例子(亲测有效)

    总结,将HTML`&lt;div&gt;`转换为图片并下载,主要依靠JavaScript的`&lt;canvas&gt;`和`toDataURL()`方法。通过理解这些概念和技术,你可以轻松实现类似功能,提升用户体验。提供的`JS图片下载demo`应该包含了一个完整的工作示例...

    div转png.zip

    需要注意的是,`html2canvas`并非完美无缺,对于某些复杂的CSS样式、Web字体和IFrame的支持可能有限,因此在实际应用中可能需要进行一些调整和优化。 总的来说,`html2canvas`为开发者提供了一种方便的方式,将动态...

    div+css防相册

    然后,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。在防相册中,我们可以利用jQuery来监听用户的鼠标行为,比如阻止右键菜单弹出: ```javascript $(document).ready(function() { ...

Global site tag (gtag.js) - Google Analytics