分类
商品
- 商品
- 店铺
- 资讯
效果图.png
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" type="text/css" href="upload.css"/> <script type="text/javascript" src="upload.js"></script></head><body> <img src="壁纸1.jpg" onclick="imgSee(this)" > <div class="imgSee" style="z-index: 999;"> <div id="imgbox"> <img id="imgSeeimg"> </div> <!--功能区--> <div class="function"> <i class="imgEnlarge" onclick="enlarge()"></i> <i class="imgNarrowe" onclick="narrowe()"></i> <i class="imgIcon" onclick="imgRotate()"></i> <a onclick="imgDisappea(this)"></a> </div> </div> </body></html>#prompt3 { width: 100px; height: 100px; /*z-index: 999;*/ float: left; /*border: 1px solid black;*/ text-align: center; position: relative;}#imgSpan { position: absolute; /*top: 25px;*/ /*left:15px;*/ /*background-color: #52a7f8;*/ color: #ffffff; border-radius: 5px; width: 100px; height: 100px; /*padding-top: 36px;*/}#imgSpan:hover{ background-color: #1879d4;}.filepath { width: 100%; height: 100%; opacity: 0;}#previewImg{ float: left;}#previewImg p{ width: 100px; height: 100px; margin-right: 5px; float: left; position: relative; padding-bottom:17px ;}#previewImg img{ width: 100px; height: 100px; border: 1px solid #d4d4d4; padding: 5px;}#previewImg span{ cursor:pointer; position: absolute; bottom:-10px; display: none; background: #999999; border-radius: 5px; color: #fff; padding: 2px 5px; left: 30px;}#previewImg p:hover .delSpan{ display: inline-block;}.imgSee{ width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.1); top: 0; left: 0; display: none;}#imgbox{ width: 800px; height: 800px; position: absolute; top: 50%; left: 50%; margin-top: -400px; margin-left: -400px; text-align: center;}#imgSeeimg{ display: inline-block;}.function a{ display: block; width: 32px; height: 32px; background-image: url(x.png); text-decoration: none; color: #000000; background-size: 100%;}.function{ width: 150px; background-color: #FFFFFF; position: absolute; display: flex; justify-content: space-between; right: 6%; top: 50px;}.imgIcon{ display: block; width: 32px; height: 32px; background-image: url(xuanzhuan.png); background-size: 100%;}.imgEnlarge{ display: block; width: 32px; height: 32px; background-image: url(./fangda.png); background-size: 100%;}.imgNarrowe{ display: block; width: 32px; height: 32px; background-image: url(./suoxiao.png); background-size: 100%;}function changepic() { var file = document.getElementById('file') var reads = new FileReader(); var preview = $('#file').parent().prev(); var str = '' f = file.files[0]; // 将图片存入 reads.readAsDataURL(f); reads.onload = function() { str = "<p><img src='" + this.result + "' onclick='imgSee(this)' title='点击查看图片'/><span class='delSpan' onclick='del(this)'>删除</span></p>" preview.append(str); } if (preview.children().length >= 2) { file.parentNode.style.cssText = 'display: none;' return } file.value = null }; // 删除写法 function del(e) { // 兼容IE的写法 document.getElementById('file').value = null document.getElementById('prompt3').style.cssText = 'display: block;' e.parentNode.parentNode.removeChild(e.parentNode); // e.parentNode.remove() } // 查看图片函数 // 先保存原始宽度 var initialWith = 0 // 显示图片 function imgSee(e) { var imgDisplay = document.getElementsByClassName('imgSee')[0]; document.onselectstart = function(){return false;} imgDisplay.style.cssText = 'display: block; z-index: 999' document.getElementById('imgSeeimg').src = e.src document.getElementById('imgSeeimg').style.cssText = "transform:rotate(0deg)" n=0 document.getElementById('imgSeeimg').style.marginTop = (800-document.getElementById('imgSeeimg').height)/2 + 'px' } // 点击后图片消失 function imgDisappea(e) { document.onselectstart = function(){return true;} e.parentNode.parentNode.style.cssText = 'display: none;' document.getElementById('imgSeeimg').style.cssText = '' } var n=0 var i=1 // 点击后图片旋转90度 function imgRotate(){ let img = document.getElementById('imgSeeimg') var time = setInterval(function(){ n +=5 if(n==90*i){ i++ clearInterval(time) } img.style.transform= "rotate("+n+"deg)" },30) } window.onload = function(){ var dv = document.getElementById('imgSeeimg'); var x = 0; var y = 0; var l = 0; var t = 0; var isDown = false; //鼠标按下事件 dv.onmousedown = function(e) { //获取x坐标和y坐标 x = e.clientX; y = e.clientY; e.preventDefault(); //获取左部和顶部的偏移量 l = dv.offsetLeft; t = dv.offsetTop; //开关打开 isDown = true; //设置样式 dv.style.position = 'absolute' document.getElementById('imgSeeimg').style.marginTop = '0px' var nx = e.clientX; var ny = e.clientY; var nx = e.clientX; var ny = e.clientY; var nl = nx - (x - l); var nt = ny - (y - t); dv.style.left = nl + 'px'; dv.style.top = nt + 'px'; dv.style.cursor = 'move'; } //鼠标移动 window.onmousemove = function(e) { if (isDown == false) { return; } document.getElementById('imgSeeimg').style.marginTop = '0px' // dv.style.position = 'absolute' //获取x和y var nx = e.clientX; var ny = e.clientY; //计算移动后的左偏移量和顶部的偏移量 var nl = nx - (x - l); var nt = ny - (y - t); dv.style.left = nl + 'px'; dv.style.top = nt + 'px'; } //鼠标抬起事件 dv.onmouseup = function() { //开关关闭 isDown = false; dv.style.cursor = 'default'; } } // 放大图片功能 function enlarge(){ var width= document.getElementById('imgSeeimg').width var n = width var time = setInterval(function(){ n = n+10 if(n>width*1.2){ clearInterval(time) } document.getElementById('imgSeeimg').style.width = n+'px' },30) } function narrowe(){ // if(initialWith!=0){ // document.getElementById('imgSeeimg').style.width = initialWith+'px' // } var width = document.getElementById('imgSeeimg').width var n = width var time = setInterval(function(){ n = n-10 if(n<width*0.8){ clearInterval(time) } document.getElementById('imgSeeimg').style.width = n+'px' },30) }
fangda.png
suoxiao.png
x.png
xuanzhuan.png
壁纸1.jpg
送码官方微信
手机访问领取大礼包