js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一：此方法在页面没有滚动条时无法缩放
JQuery
function hideMax(){
$(".MAX_div").remove();
$("#Cover_Div").hide();
}
function showMax(url){
$("#Cover_Div").show();
var Image=function(){
return document.createElement("img");
}
var DIV=function(){
return document.createElement("div");
}
var div=new DIV();
var close_div=new DIV();
var close_img=new Image();
var img=new Image();
var _enter=false;
$(".MAX_div").remove();
div.setAttribute("class","MAX_div");
close_div.setAttribute("class","close");
close_div.setAttribute("title","点击关闭");
img.setAttribute("class","showMax");
img.src=url;
close_img.src="tpl/images/delete.png";
img.onmouseover=function(){
_enter=true;
}
img.onmouseout=function(){
_enter=false;
}
close_div.onclick=function(){
hideMax();
}
close_div.appendChild(close_img);
div.appendChild(img);
div.appendChild(close_div);
document.body.appendChild(div);
//var _z=9999;
var close=$(".close");
$(document).ready(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var wd;//窗口
$(".showMax").click(function(){
//alert("click");//点击（松开后触发）
//this.style.cursor = "default";//鼠标形状
//this.style.zIndex = 999;
}).mousedown(function(e){
_move=true;
wd=$(this);
//this.style.cursor = "move";//鼠标形状
// this.style.zIndex = _z;//窗口层次
// _z++;
_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top")));
/* wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
var closeX=e.pageX-c_x;
var closeY=e.pageY-c_y;
wd.css({top:y,left:x});//控件新位置
close.css({top:closeY,left:closeX});
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
});
});
});
//$(".showMax").mouseover(function(){
var scrollTop = $(window).scrollTop();
var initTop=scrollTop;
var screenheight = window.screen.availHeight; //获取屏幕高
$(window).scroll( function() {
scrollTop = $(window).scrollTop();;
var w=parseInt($(".showMax").css("width"));
var h=parseInt($(".showMax").css("height"));
if(scrollTop > initTop&&_enter){
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
close.css("margin-left",(w-125)<125?125:(w-125)+"px");
$(window).scrollTop(initTop);//保持滚动条距离底部0px
}
if(scrollTop <initTop&&_enter){
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
close.css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
$(window).scrollTop(initTop);//保持滚动条距离底部0px
}
//initTop=scrollTop;
});
//})
function imgdragstart(){return false;}
for(i in document.images)document.images[i].ondragstart=imgdragstart;
}
CSS
.showMax{
padding:5px;
padding-top:30px;
border-radius:3px;
position:fixed;
z-index:;
top:25%;
width:280px;
height:500px;
left:50%;
margin-left:-140px;
background-color:orange;
cursor:move;
}
.MAX_div{
}
.close{
color:#ffffff;
position:fixed;
z-index:;
width:14px;
height:14px;
top:25%;
left:50%;
margin-left:125px;
margin-top:8px;
}
li >img:hover{
border:1px solid orange;
cursor:crosshair;
}
#Cover_Div{
position: fixed;
z-index:;
width: 100%;
height: 100%;
left:;
top:;
min-width: 700px;
min-height: 740px;
opacity: 0.5;
filter: alpha(opacity = 50);
background-color: #ffffff;
display:none;
}
.cut{
font-weight:bold;
font-weight:normal\0;
font-size:18px;
height:30px;
max-height:35px;
color:#FFFFFF;
font-family:楷书;
}
Html
<img onclick="showMax('url")" src="url" style="width:288px;height:216px;" />
<div id="Cover_Div" onClick="hideMax()"></div>
方法二：
JS（其它同上）
function hideMax(){
$(".MAX_div").remove();
$("#Cover_Div").hide();
}
var _enter=false;
var scrollFunc = function (e) {
e = e || window.event;
if(_enter){
if (e&&e.preventDefault){
e.preventDefault();
e.stopPropagation();
}else{
e.returnvalue=false;
}
}
var w=parseInt($(".showMax").css("width"));
var h=parseInt($(".showMax").css("height"));
if (e.wheelDelta&&_enter) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
$(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
$(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
}
} else if (e.detail&&_enter) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向下滚动时
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
$(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
}
if (e.detail< 0) { //当滑轮向上滚动时
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
$(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");
}
} } //给页面绑定滑轮滚动事件
if (document.addEventListener) {
//webkit
document.addEventListener('mousewheel', scrollFunc, false);
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}else if(window.attachEvent){//IE
document.attachEvent('onmousewheel',scrollFunc);
}
function showMax(url){
$("#Cover_Div").show();
var Image=function(){
return document.createElement("img");
}
var DIV=function(){
return document.createElement("div");
}
var div=new DIV();
var close_div=new DIV();
var close_img=new Image();
var img=new Image();
$(".MAX_div").remove();
div.setAttribute("class","MAX_div");
close_div.setAttribute("class","close");
close_div.setAttribute("title","点击关闭");
img.setAttribute("class","showMax");
img.src=url;
close_img.src="img/delete.png";
img.onmouseover=function(){
_enter=true;
}
img.onmouseout=function(){
_enter=false;
}
close_div.onclick=function(){
hideMax();
}
close_div.appendChild(close_img);
div.appendChild(img);
div.appendChild(close_div);
document.body.appendChild(div);
//var _z=9999;
var close=$(".close");
$(document).ready(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var wd;//窗口
$(".showMax").click(function(){
//alert("click");//点击（松开后触发）
//this.style.cursor = "default";//鼠标形状
//this.style.zIndex = 999;
}).mousedown(function(e){
_move=true;
wd=$(this);
//this.style.cursor = "move";//鼠标形状
// this.style.zIndex = _z;//窗口层次
// _z++;
_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top")));
/* wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
var closeX=e.pageX-c_x;
var closeY=e.pageY-c_y;
wd.css({top:y,left:x});//控件新位置
close.css({top:closeY,left:closeX});
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
});
});
});
//禁止拖动页面图片在新窗口打开
function imgdragstart(){return false;}
for(i in document.images)document.images[i].ondragstart=imgdragstart;
}
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小的更多相关文章
- 点击图片查看大图（纯js）
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- jQuery插件——imgbox（点击图片查看大图）
需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...
- jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- android开发:点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
- ionic中点击图片看大图的实现
在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...
- js手写图片查看器（图片的缩放、旋转、拖拽）
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- 点击小图查看大图jQuery插件FancyBox魔幻灯箱
今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- spring的父子容器
在创建ssm项目工程时,经常需要读取properties资源配置文件,传统的方法当然可以. 但是spring提供了更简便的方法,@value注解. 在page.properties文件中,配置分页信息 ...
- 关于Gson定制的分析
首先,为什么需要定制呢?很多同学可能觉得默认的不也挺好的嘛?最开始,我也是觉得的,而且我们一开始也是用默认的解析方式的,因为我们与外部约定的数据格式一直都比较稳定.但当外部数据不稳定,那么Gson默认 ...
- python子域名收集器
今天心血来潮做了一个子域名收集器.过程是蛋疼啊!这里先感谢一下qpython群的咸鱼大佬,在换页的时候出了点毛病,讲到后面我们就知道了. 思路: 代码开始: 我们要用到的模块是 Requests Bs ...
- CTFCrackTools在Windows下显示A Java Exception has occurred的解决方案
打CTF做密码学的人一定少不了用这个工具,CTFCrackTools,这个几乎可以号称密码学的神器,但是呢,最近博主遇到了一些麻烦事,每次打开的时候都是显示A Java Exception has o ...
- python内建函数isinstance基础用法
语法:isinstance(object,type) 作用:来判断一个对象是否是一个已知的类型. 其第一个参数(object)为对象,第二个参数(type)为类型名(int...)或类型名的一个 ...
- JAVA爬虫实践（实践一：知乎）
爬虫顺序 1.分析网站网络请求 通过浏览器F12开发者工具查看网站的内容获取方式. 2.模拟HTTP请求,获取网页内容. 可以采用HttpClient,利用JAVA HttpClient工具可以模拟H ...
- spring的applicationContext.xml没有自动提示（使用本地的文档）
http://www.springframework.org/schema/beans/spring-beans.xsd Window>>preference>>搜索xml(X ...
- LinkedHashMap 源码详细分析（JDK1.8）
1. 概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题.除此之外,Linke ...
- Eclipse版本
Eclipse 3.1 IO 木卫一,伊奥 2005Eclipse 3.2 Callisto 木卫四,卡里斯托 2006Eclipse ...
- IDEA、Matlab 注释
IDEA ctrl+/ 多行代码分行注释,再按一次取消 ctrl+shift+/ 多行代码注释在一个块里,只在开头和结尾有注释符号 Matlab 注释:Ctrl+/ Ctrl+R 取消注释:Ctrl+ ...