html点击图片弹出大图特效代码（js点击图片弹出大图）

今天给各位分享html点击图片弹出大图特效代码的知识，其中也会对js点击图片弹出大图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Html图片按钮效果代码？
• 2、【求教】用html代码制作 鼠标点击图片的时候出现图片框并在图片上显示文字
• 3、HTML5中，如何为图片制作放大镜效果？
• 4、网页中的图片弹出放大效果怎么做？
• 5、ASP中点击小图在原窗口弹出图层显示大图这个效果怎样实现?

Html图片按钮效果代码？

那就给图片一个onclick事件就可以了，图片按钮无非是点击它的时候会出现一些动作。代码如下：

script type="text/javascript

function active(){

alert('图片按钮点击‘);

}

/script

img src='...' onclick='active()' /

【求教】用html代码制作 鼠标点击图片的时候出现图片框并在图片上显示文字

不知道这个是不是你要找的。

headstyle type="text/css"

#floater {

position: absolute;

left: 500;

top: 146;

width: 125;

visibility: visible;

z-index: 10;

}/style

/head

body

div ID="floater" style="left: 590px; top: 158px"

p align="center"img SRC="2259.gif" alt="图片显示的文字" WIDTH="150" HEIGHT="60"br

font color="#FF8040"网页特效/font/p

/divscript LANGUAGE="JavaScript"

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0; lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

!-- STALKER CODE --

function heartBeat() {

if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelTop += percent;

if(NS) document.floater.top += percent;

lastScrollY = lastScrollY + percent;

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelLeft += percent;

if(NS) document.floater.left += percent;

lastScrollX = lastScrollX + percent;

}

}

!-- /STALKER CODE --

!-- DRAG DROP CODE --

function checkFocus(x,y) {

stalkerx = document.floater.pageX;

stalkery = document.floater.pageY;

stalkerwidth = document.floater.clip.width;

stalkerheight = document.floater.clip.height;

if( (x stalkerx x (stalkerx+stalkerwidth)) (y stalkery y (stalkery+stalkerheight))) return true;

else return false;

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement;

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement;

if (whichIt == null) { return true; }

}

whichIt.style.pixelLeft = whichIt.offsetLeft;

whichIt.style.pixelTop = whichIt.offsetTop;

currentX = (event.clientX + document.body.scrollLeft);

currentY = (event.clientY + document.body.scrollTop);

} else {

window.captureEvents(Event.MOUSEMOVE);

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater;

StalkerTouchedX = e.pageX-document.floater.pageX;

StalkerTouchedY = e.pageY-document.floater.pageY;

}

}

return true;

}

function moveIt(e) {

if (whichIt == null) { return false; }

if(IE) {

newX = (event.clientX + document.body.scrollLeft);

newY = (event.clientY + document.body.scrollTop);

distanceX = (newX - currentX); distanceY = (newY - currentY);

currentX = newX; currentY = newY;

whichIt.style.pixelLeft += distanceX;

whichIt.style.pixelTop += distanceY;

if(whichIt.style.pixelTop document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;

if(whichIt.style.pixelLeft document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;

if(whichIt.style.pixelLeft document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;

if(whichIt.style.pixelTop document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;

event.returnValue = false;

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

if(whichIt.left 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;

if(whichIt.top 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;

if( (whichIt.left + whichIt.clip.width) = (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

return false;

}

return false;

}

function dropIt() {

whichIt = null;

if(NS) window.releaseEvents (Event.MOUSEMOVE);

return true;

}

!-- DRAG DROP CODE --

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown = grabIt;

window.onmousemove = moveIt;

window.onmouseup = dropIt;

}

if(IE) {

document.onmousedown = grabIt;

document.onmousemove = moveIt;

document.onmouseup = dropIt;

}

if(NS || IE) action = window.setInterval("heartBeat()",1);

/script

/boyd

HTML5中，如何为图片制作放大镜效果？

制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。

这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对画布进行裁剪与保存画布状态的相关知识实现的。

上面是给出示例的效果图。这是不是你想要的放大镜效果呢？

下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。

!DOCTYPE html

html

head

meta charset="utf-8"

title放大镜/title

!—HTML代码设计：一个简单的canvas元素--

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//获取canvas对象以及图片对象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现

isMagnified = false,

//init函数只要是在图片加载时绘制出图形

init = function() {

img.onload = function() {

//绘制原始图片

context.drawImage(img, 0, 0);

//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//设置标记值

isMagnified = false;

},

//magnify函数的作用是绘制具有放大镜效果的图形

magnify = function() {

//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态

context.save();

//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。

context.lineWidth = 10;// 线条宽度

context.shadowColor = '#000';// 阴影的颜色黑色

context.shadowBlur = 15;// 模糊级别为15

context.shadowOffsetX = 5;// 形状与阴影的水平距离5

context.shadowOffsetY = 5;// 形状与阴影的垂直距离5

//保存画布当前状态即我们设置阴影属性后的状态方便后面使用

context.save();

//绘制出放大镜把手的图形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//对图片进行裁剪，裁剪出的图形是一个圆形。

context.beginPath();

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.clip();

//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。

var magnified = new Image();

magnified.src = dataUrl;

//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性

context.restore();

//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。

context.restore()；

//设置标记值，实现点击后放大效果消失。

isMagnified = true;

};

//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像

init();

//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理

$('canvas').click(function() {

if (isMagnified) {

init();//绘制原始图像

}

else {

magnify();//绘制放大的图像

}

});

}

/script

script src="jquery.js"/script

/body

/html

对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。

网页中的图片弹出放大效果怎么做？

img src="图片地址" onMouseOver=“width=200,height=200" alt="网站logo" onMouseOut=“width=300,height=300"

复制以上代码，把图片链接放上去，测试下效果，发现鼠标放上去图片变大，也显示图片名称为”网站logo"

ASP中点击小图在原窗口弹出图层显示大图这个效果怎样实现?

MM_showHideLayers('Layer1','','hide')

这里 点击执行了这个js函数

你把这个函数找出来研究下嘛

.........

你直接把他的js文件down下来 找一下里面的MM_showHideLayers函数

这个函数的功能就是

html点击图片弹出大图特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js点击图片弹出大图、html点击图片弹出大图特效代码的信息别忘了在本站进行查找喔。