<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>
分享到：
相关推荐
需要使用jQuery库文件(目前版本1.3)和jQuery Image Flyout库文件(目前版本1.1) 可选JS库文件：增强图片显示特效可使用jQuery插件Easing Plugin库文件 素材准备 可自定义CSS样式，控制jQuery插件jQuery Image ...
1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 ...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅...
<script type="text/javascript"> mouseover=true function coordinates() { if (!moveMe) { return } if (event.srcElement.id=="moveMe") { mouseover=true pleft=document....
<script type="text/javascript" src="pic-js/prototype.js"> <script type="text/javascript" src="pic-js/scriptaculous.js?load=effects"> <script type="text/javascript" src="pic-js/lightbox.js"> ...
imageCarousel.js 将图像 div 更改为漂亮轮播的插件
input type=”image” class=”img_1″ src=”img/cump.png”></input> <div class=”noteText” id=”noteTxt” type=”text” xss=removed>123</div> </div> js编辑noteTxt文本，function如下： 代码...
vue实现调取手机摄像头和相册功能 本文实例为大家分享了vue实现调取手机摄像头和相册...</div> <van-action-sheet v-model="show1"> <ul> <li class="paizhao" @click="captureImage()">拍照</li> <li class="pai
React图像调整器 react-image-resizer是一个React组件，可以将图像调整大小以使其美观。... Component { render ( ) { return ( < div> < Image src = "path/to/image.jpg" height = { /*resize height*/ }
<TITLE>Blink image ()" topmargin="0"> <DIV ID="soccer" STYLE="position:absolute; left:150; top:0"> 图片的链接.com" target="_blank"> 要显示的图片.gif" border="0"> </DIV> <SCRIPT LANGUAGE="JavaScript">...
默认: 300 译者注：控制图片放大的时间和标题栏、控制栏显示的时间，两个操作不同步进行。 easing string 动画缓和。默认: linear prevent integer 拖动图像前忽略的位移像素（防止鼠标的意外拖动所用）。默认: 14 ...
before-after-image-compare compare 2 images in a box (with javascript & scss). goal: support to IE8+ pure html:需要两张图皆出现.box > figure*2 > img +css:需要两张图皆完全出现> img +base-js:两张图叠合...
#tabs div img.image {float:left; border:0; margin-top:-35px; margin-right:5px;} #tabs div a.unlock {background:url(images/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;} #tabs div...
Grade 是一个 JavaScript 库，作用是从图像中提取前2个主要颜色产生互补的渐变。Demo 演示地址：http://benhowdle.im/grade/ 安装下载这个库，并从 /docs/dist 文件夹中取出 grade.js或是使用 npm 方式安装：npm ...
这个展示了一些扩展ImageFlow和Responsive功能的简单策略。 简单的开始 DOM 操作 导航 自定义导航按钮与 ImageFlow 的原始按钮相关联。 JQuery 示例 $ ( '#btn-next' ) . on ( 'click' , function ( ) { $ ( ...
其中为了底图层和切割层是程序自动创建的图片，控制层是自己定义的层（程序中是一个div）。 底图层和切割层必须完全重合，程序中把这两个层都绝对定位到了左上角： this._layBase.style.top = this._layBase.style....
一个简单的图像占位符组件，它使用很多占位符站点中的一些+时髦的赃物组件。 为什么？ 这里有很多占位符站点，我将它们重新组合为一个不错的小组件，以及他的弟弟（NicolasCage，BillMurray，StevenSeagal和...
本文实例为大家分享了Vue3实现图片放大镜效果的具体代码，供大家参考，具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { ...
<template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div> </template> <script> export default { data() { return { picValue:{}, headerImage:'' }; }, ...