<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 成为了构建高质量、交互性强的网页的重要工具。这两种技术的结合不仅能够提升网页的视觉效果,还能增强用户与网页之间的互动体验。 #### 二、DIV+CSS的基本概念及其优势 **1....
一个简单的流程进度条通常由两部分组成:容器(通常是div元素)和进度指示器。容器用于包裹整个进度条,而进度指示器则表示已完成的部分。在HTML中,我们可以创建如下的基础结构: ```html <div class="progress-...
总结来说,“css + div + javascript 图片轮换”是一种结合了前端三大核心技术的动态效果实现方式。通过CSS控制样式,HTML结构化数据,JavaScript处理交互,可以轻松地在网页上创建出吸引人的图片轮播效果。这种技术...
JavaScript img+div放大镜是一种常见的网页交互效果,用于在用户鼠标悬停在图片上时,显示一个放大版的图像,以便用户能更清晰地查看图片细节。这种效果常见于电商网站的产品展示,提升用户体验。本教程将深入探讨...
这些图片可以通过CSS的`background-image`属性或者JavaScript的DOM操作添加到Div元素中。 总的来说,“Div块上下左右循环滚动”是一个结合了HTML、CSS和JavaScript的网页动态效果,通过类设计和JavaScript动画,...
这个主题基于《JavaScript DOM编程艺术》一书中的示例,这本书是学习JavaScript和DOM操作的重要资源。DOM(Document Object Model)是HTML和XML文档的结构化表示,它允许我们通过JavaScript来操作页面元素。 在创建...
本文将详细讲解如何通过`div`和JavaScript实现一张张图片的平滑切换。 首先,我们需要理解`div`元素。`div`是HTML中的一个块级元素,全称为“division”,即分区或分组。它主要用于组织和布局页面内容,可以通过CSS...
1. **选择目标div**:获取需要转换的`div`元素,可以通过JavaScript的`document.getElementById`或`querySelector`等方法实现。 2. **复制div到canvas**:由于`canvas`无法直接将`div`内容绘入,我们需要先将`div`...
这里的`id`属性将用于JavaScript中的选中和操作。 接着,我们使用JavaScript来实现图片的翻转、缩放和移动。这通常涉及到CSS样式的变化和事件监听器的设置。例如,我们可以添加以下JavaScript代码: ```javascript...
在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细讲解如何利用jQuery技术来实现一个功能丰富的图像菜单,即"imagemenu"。 首先,我们需要理解...
在网页设计和开发中,`div`元素是一个非常基础且重要的组成部分。`div`全称为“division”,中文译为“分隔”或“区域”,它主要用于组织和布局页面内容。本教程将深入探讨如何在HTML中对`div`层进行添加、删除以及...
jQuery是一个轻量级的JavaScript库,简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它的出现使得JavaScript的开发变得更加高效和便捷。例如,使用jQuery实现一个简单的点击事件: ```javascript $...
在网页设计和开发中,"div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作" 是一种常见的交互设计技术,用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层,让用户专注于当前的任务...
在这段代码中,首先定义了两个JavaScript函数`panall()`和`pan(divid)`。接着,在HTML部分,通过使用`<div>`标签创建了一个点击后可以展开/收起所有DIV的按钮,并通过设置`onclick`属性调用`panall()`函数。同时,还...
总的来说,结合`div`、CSS和JavaScript,开发者可以创造出无数创新的图片处理特效,提升网站的吸引力和互动性。通过深入学习和实践这些技术,设计师和开发者能够构建出更加生动、富有吸引力的网页界面。
今天我们将深入探讨一个基于JavaScript实现的图片拼图游戏的源代码,通过这个项目,我们可以学习到JavaScript的基本语法、DOM操作以及事件处理等关键知识点。 首先,我们需要理解项目的核心功能。图片拼图游戏通常...
1. **jQuery**:这是一个JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个特效中,jQuery用于监听div元素的点击事件,并触发相应的动画。 2. **前端开发**:这里涉及到的是客户端的网页开发,主要在...
总结,将HTML`<div>`转换为图片并下载,主要依靠JavaScript的`<canvas>`和`toDataURL()`方法。通过理解这些概念和技术,你可以轻松实现类似功能,提升用户体验。提供的`JS图片下载demo`应该包含了一个完整的工作示例...
需要注意的是,`html2canvas`并非完美无缺,对于某些复杂的CSS样式、Web字体和IFrame的支持可能有限,因此在实际应用中可能需要进行一些调整和优化。 总的来说,`html2canvas`为开发者提供了一种方便的方式,将动态...
然后,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。在防相册中,我们可以利用jQuery来监听用户的鼠标行为,比如阻止右键菜单弹出: ```javascript $(document).ready(function() { ...