<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() { ...