js鼠标经过变换图片

合集下载

JS更换图片的用法

有些网页上的按钮,往往有两张不同的图片进行轮换,鼠标不动时,显示图片,鼠标移动到图片时候,显示另外一张图片.所以,就要使用下面几个javascript函数.<SCRIPT language=JavaScript type=text/JavaScript></SCRIPT>调用例子:<BODY bgColor=#333333 leftMargin=0 topMargin=0onload="MM_preloadImages('images/over_1.gif',''images/over_2.gif',''images/over_3.gif',''images /over_4.gif')"MARGINHEIGHT="0" MARGINWIDTH="0"><TR><TD><A onmouseover=MM_swapImage('Image111','','images/over_2.gif',1) onmouseout=MM_swapImgRestore() href="javascript:;"><IMGid=Image1 height=207 src="images/2.gif"width=16 border=0 name=Image111></A></TD></TR>。

js鼠标点击图片切换效果代码分享

js⿏标点击图⽚切换效果代码分享本⽂实例讲述了js⿏标点击图⽚切换效果。

分享给⼤家供⼤家参考。

具体如下：实现原理很简单，其实是多张图⽚叠加起来，点击图⽚后依次赋予图⽚⼀个class，使其看起来在表⾯⽽已，点击图⽚，可以实现图⽚的不断切换效果。

运⾏效果图：--------------------------------------⼩提⽰：浏览器中如果不能正常运⾏，可以尝试切换浏览模式。

为⼤家分享的js⿏标点击图⽚切换效果代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js⿏标点击图⽚切换效果</title><style type="text/css">*{margin:0;padding:0;border:none;outline:none;list-style:none;}#wrapper {width:280px;margin:20px auto;}#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}#imageContainer img {position:absolute;top:0;left:0;z-index:1;}#imageContainer img.active {z-index:3;}</style></head><body><div id="wrapper"><div id="imageContainer"><img src="images/01.jpg" class="active" width="280" height="280" /><img src="images/02.jpg" width="280" height="280" /><img src="images/03.jpg" width="280" height="280" /></div></div><script src="js/jquery.min.js"></script><script>var imageObject = {clickSwap : function(obj) {obj.click(function() {var activeImage = $(this).children('img.active');activeImage.removeClass('active');if (activeImage.next().length > 0) {activeImage.next().addClass('active');} else {$(this).children('img:first-child').addClass('active');}return false;});}};$(function() {imageObject.clickSwap($('#imageContainer'));});</script></body></html>以上就是为⼤家分享的js⿏标点击图⽚切换效果代码，希望⼤家可以喜欢。

jquery实现鼠标移入移出切换图片

jquery实现⿏标移⼊移出切换图⽚
在jquery中，可以使⽤mouseover和mouseout事件来实现⿏标移⼊移出图⽚时，改变图⽚的地址，从⽽实现图⽚的切换。

下⾯举例讲解jquery实现⿏标移⼊移出切换图⽚。

1.新建⼀个html⽂件，命名为test.html，⽤于讲解jquery实现⿏标移⼊移出切换图⽚。

2.在test.html⽂件内，使⽤img标签创建⼀张图⽚，⽤于测试。

3.在test.html⽂件内，设置img标签的id为myimg，⽤于下⾯获得img对象。

4.在js标签中，使⽤ready()⽅法在页⾯加载完成时，执⾏function⽅法，在function⽅法内，通过id获得img对象，使⽤on()⽅法给图⽚绑定事件。

5.在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。

查看效果：
总结
1.使⽤img标签创建⼀张图⽚，⽤于测试。

2.在js中，使⽤on()⽅法给图⽚绑定事件，在on()⽅法内，使⽤mouseover事件实现在⿏标移⼊图⽚时，通过attr()⽅法改变图⽚的路径；使⽤mouseout事件实现在⿏标移出图⽚时，通过attr()⽅法再次改变图⽚的路径，从⽽实现图⽚的切换。

自-jQuery实现鼠标滑过放大图片

本特效效果模仿百度图片效果。

效果图如下：打开页面效果鼠标放上去0.15秒，放大的层从小到大展开鼠标移开后，弹出层消失。

页面代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><HTML xmlns=""><HEAD><META content="text/html; charset=utf-8" http-equiv="Content-Type"><TITLE>demo</TITLE><SCRIPT language="JavaScript" type="text/javascript" src="demo_"></SCRIPT><STYLE>html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,font,img,strong,dl,dt,dd,ol,ul,li,fieldset,form,label ,legend{margin:0;padding:0;}a{ color:#fff; text-decoration:none;}a img{ border:none;}li{ list-style-type:none;}body{ background:#000; color:#fff; font-size:12px; font:Arial,Verdana,"宋体"}.wrapper{ overflow:hidden; width:1130px; margin:0 auto;}.header{ overflow:hidden; padding:20px 0 50px;}.main{ width:1000px; margin:0 auto 30px; overflow:hidden;}#detial{ overflow:hidden; width:750px; padding-top:20px;}.shopPic{ overflow:hidden; width:720px; float:right;}.shopPic a{ float:left; display:inline-block;}.detialItem{ overflow:hidden; margin-bottom:5px; width:720px;}.itemTop{ overflow:hidden; line-height:40px; border-bottom:1px solid #fff; margin-bottom:20px;}.itemTop h2{ float:left; margin-left:10px;}.more{ float:right; background:#fff; color:#333; display:block; height:20px; line-height:20px; width:50px; text-align:center; margin-top:12px; margin-right:10px; font-family:'微软雅黑';}.more:hover{ text-decoration:underline;}.itemIfor{ float:left; width:150px; float:left; margin-left:23px;}.picTitle{ font-size:14px; font-weight:bold; color:#A0BC1D; line-height:30px; padding:0 5px;} .itemIfor p{ padding:0 5px; line-height:20px;}.popup{width:300px; height:380px; background-color:#fff; border:solid 1px #ccc;}#tempdiv{ overflow:hidden; display:none;position:absolute;}</STYLE><META name="GENERATOR" content="MSHTML 9.00.8112.16441"></HEAD><BODY><div class="wrapper"><div class="main"><div id="detial"><div class="detialItem"><div class="itemTop"><h2>列表1</h2><a href="#" class="more">More..</a></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥111.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥222.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥333.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div></div><div class="detialItem"><div class="itemTop"><h2>列表2</h2><a href="#" class="more">More..</a></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div><div class="itemIfor"><a href="#"><img src="demo_" width="150" height="150" /></a><a href="#" class="picTitle">商品名称</a><p>￥123.00</p></div></div></div></div></div><div style="display:none" id="template"><a href="Thref"><img src="Timg" width="150" height="150"/></a><a href="Thref" class="picTitle">TprdName</a><p style="color:#000">Tprice</p></div><SCRIPT>var popupdiv={init:function(){//初始化$this = this;//保存本对象$("#detial .itemIfor").each(function(i){var children = $(this).children();var itemobj = new Object();itemobj.href = $(children[0]).attr("href");//获取链接itemobj.productName = $(children[1]).text();//获取产品名称itemobj.price = $(children[2]).text();//获取价格$(children[0]).find("img").mouseenter(function(){//给所有图片添加鼠标进入事件var template = $("#template").html();//获取模板//替换模板内容template = $this.setValue(template,/Thref/g,itemobj.href);template = $this.setValue(template,/TprdName/g,itemobj.productName);template = $this.setValue(template,/Tprice/g,itemobj.price);template = $this.setValue(template,/Timg/g,$(this).attr("src"));var htmlobj = new Object();htmlobj.html = template;htmlobj.offset = $(this).position();//获取图片精确位置htmlobj.width = $(this).outerWidth();//获取图片宽度htmlobj.height = $(this).outerHeight();//获取图片高度$this.createPopup(htmlobj);//创建div}).mouseleave(function(){clearTimeout($this.poptimmer);});//鼠标移除图片时清除定时器，以避免鼠标移出了图片还弹出效果图});},setValue:function(template,reg,value){return template.replace(reg,value);},createPopup:function(opts){var div = "<div id='tempdiv'><div class='popup'>"+opts.html+"</div><div>";if($("#tempdiv").html()!=null)$("#tempdiv").remove();$("body").append(div);//设置定时器this.poptimmer = setTimeout(function(){$("#tempdiv").css({width:opts.width+"px",height:opts.height+"px",left:opts.offset.left+"px",t op:opts.offset.top+"px"}).show();var children = $("#tempdiv").children();//计算放大图的实际大小var innerWidth = $(children[0]).outerWidth();var innerHeight = $(children[0]).outerHeight();//计算放大图的左顶点位置var diff = innerWidth - opts.width;var newTop = opts.offset.top - diff/2;var newLeft = opts.offset.left - diff/2;$("#tempdiv").animate({width:innerWidth+"px",height:innerHeight+"px",left:newLeft+"px",top:newTop+"px"},{duration:150,step:function(){//执行动画的时候每一步都改变图片大小$(this).find("img").attr({width:$(this).outerWidth(),height:$(this).outerWidth()});}});//animate end},500);//setTimeout end$("#tempdiv").mouseleave(function(){$(this).stop().html("").remove();});},poptimmer:null//定时器}popupdiv.init();</SCRIPT></BODY></HTML>图片和jquery插件请放在demo_file 文件夹中：。

js实现轮播图效果纯js实现图片自动切换

js实现轮播图效果纯js实现图⽚⾃动切换本⽂实例为⼤家分享了纯js实现图⽚⾃动切换的具体代码，供⼤家参考，具体内容如下1.⿏标经过的时候左右两个⼩按钮会⾃动弹出，⾃动播放停⽌，点击左右⼩按钮可以切换图⽚；2. ⿏标离开，恢复⾃动播放；3. 点击下⽅中间⼏个⼩圆圈，也会⾃动切换图⽚；源代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style>* {margin: 0;padding: 0;}/* 轮播图盒⼦样式 */.lunbotu {position: relative;width: 520px;height: 280px;margin: 50px auto;background-color: blue;overflow: hidden;}/* 左右按钮样式 */.left,.right {display: none;position: absolute;top: 50%;margin-top: -15px;width: 30px;height: 30px;background-color: cornsilk;border-radius: 15px;text-align: center;line-height: 30px;cursor: pointer;z-index: 1;}.left {left: 0;}.right {right: 0;}li {list-style: none;}/* 设置图⽚的ul的样式 */.firstul {position: absolute;top: 0;left: 0;width: 500%;}.firstul li {float: left;/* display: none; */}/* 设置⼩圆圈的样式 */ol {/* width: 90px; */padding: 0 5px 0 5px;position: absolute;bottom: 10px;left: 50%;margin-left: -45px;background-color: darkgrey;text-align: center;border-radius: 9px;}ol li {display: inline-block;width: 15px;height: 15px;border-radius: 50%;margin-right: 5px;background-color: white;cursor: pointer;}.current {background-color: red;}</style><script src="animation.js"></script></head><body><div class="lunbotu"><div class="left">></div><div class="right"><</div><ul class="firstul"><li><a href=""><img src=" images/1.jpg" alt=""> </a></li><li><a href=""><img src=" images/2.jpg" alt=""> </a></li><li><a href=""><img src=" images/3.gif" alt=""> </a></li><li><a href=""><img src=" images/4.webp" alt=""> </a></li> </ul><ol class="firstol"></ol></div><script>// 1.获取事件源var lunbotu = document.querySelector('.lunbotu');var leftBox = document.querySelector('.left');var rightBox = document.querySelector('.right');var ul = lunbotu.querySelector('ul');var ol = lunbotu.querySelector('ol');var right = document.querySelector('.right');var left = document.querySelector('.left');var lunbotuWidth = lunbotu.offsetWidth;// console.log(ul)// console.log(ol)// 第⼀步：// ⿏标经过轮播图的时候，左右⼩按钮弹出lunbotu.addEventListener('mouseenter', function () {leftBox.style.display = 'block';rightBox.style.display = 'block';// ⿏标经过轮播图的时候，停⽌定时器clearInterval(timer);})// ⿏标离开轮播图的时候，左右⼩按钮隐藏lunbotu.addEventListener('mouseleave', function () {leftBox.style.display = 'none';rightBox.style.display = 'none';timer = setInterval(function () {right.click();}, 2000)})// 第⼆步：// 1.动态⽣成⼩圆圈// 2.⼩圆圈的个数要跟图⽚⼀样// 3.先得到ul⾥⾯图⽚的张数(图⽚放⼊li⾥⾯，所以就是li的个数) // 4.利⽤循环动态⽣成⼩圆圈(这个⼩圆圈要放⼊ol⾥⾯)// 5.创建节点createElement('li')]// 6.插⼊节点ol.appendChild(li)// 7.第⼀个⼩圆圈需要添加current类for (var i = 0; i < ul.children.length; i++) {// 创建⼀个livar li = document.createElement('li')// 记录当前⼩圆圈的索引号通过⾃定义属性来做li.setAttribute('index', i);// 把li添加到olol.appendChild(li);}// 排他思想：让⼩Li变⽩⾊for (var i = 0; i < ol.children.length; i++) {ol.children[i].addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';} this.className = 'current';// 点击⼩圆圈的时候切换到对应的图⽚// 得到索引号 indexvar index = this.getAttribute('index');// 解决⼩bugnum = index;num_ol = index;// console.log(lunbotuWidth);// console.log(index)animation(ul, - index * lunbotuWidth)})}// 给第⼀个li变颜⾊ol.children[0].className = 'current';// 克隆第⼀个livar first = ul.children[0].cloneNode(true);ul.appendChild(first);// 第三步:// 点击右边按钮事件var num = 0;// 点击右侧按钮的时候⼩圆圈跟着滚动var num_ol = 0;// 节流阀，防⽌点击过快，最后才加这句优化var flag = true;// 右侧按钮：right.addEventListener('click', function () {if (flag) {flag = false; // 关闭节流阀if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animation(ul, -num * lunbotuWidth, function () {flag = true;});num_ol++;if (num_ol == ol.children.length) {num_ol = 0}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[num_ol].className = 'current';}});// 左侧按钮：left.addEventListener('click', function () {if (flag) {flag = false;if (num == 0) {ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';num = ul.children.length - 1;}num--;animation(ul, -num * lunbotuWidth, function () {flag = true;});num_ol--;// num_ol=0的时候需要，点击左侧按钮，需要转跳到ol.children.length-1的位置 if (num_ol < 0) {num_ol = ol.children.length - 1}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[num_ol].className = 'current';}});// ⾃动播放图⽚var timer = setInterval(function () {right.click();}, 2000)</script></body></html>5.Js⽂件的代码// 封装了⼀个动画js⽂件function animation(obj,target,fn1){// console.log(fn1);// fn是⼀个回调函数，在定时器结束的时候添加// 每次开定时器之前先清除掉定时器clearInterval( obj.timer);obj.timer = setInterval(function(){// 步长计算公式越来越⼩// 步长取整var step = (target - obj.offsetLeft) /10;step = step > 0 ? Math.ceil(step) :Math.floor(step);if(obj.offsetLeft == target){clearInterval( obj.timer);// 如果fn1存在，调⽤fnif(fn1){fn1();}}else{// 每50毫秒就将新的值给obj.leftobj.style.left = obj.offsetLeft +step +'px';}},30)}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

js⿏标点击按钮切换图⽚-图⽚⾃动切换-点击左右按钮切换特效代码今天来分享⼀下⿏标点击按钮，图⽚进⾏切换+图⽚⾃动切换+点击左右按钮图⽚进⾏切换的三种效果的组合代码。

最后的效果如下：Html代码部分：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>图⽚轮播效果制作_赵⼀鸣随笔博客</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/style.js"></script></head><body><div class="banner"><ul class="pic"><li><a href="#"><img src="images/1.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/2.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/3.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/4.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/5.jpg" alt="美⼥" width="350" height="495"></a></li></ul><ul class="anniu"><li class="on"></li><li></li><li></li><li></li><li></li></ul><ul class="lr"><li class="pre"><a href="#"> < </a></li><li class="next"><a href="#"> > </a></li></ul></div></body></html>Css代码部分：*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer} .banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer} Javascript代码部分：$(function(){//⿏标滑过banner，左右按钮进⾏显⽰和隐藏$(".banner").hover(function(){$(".lr").show();},function(){$(".lr").hide();});//点击下⾯的⼩按钮，图⽚进⾏左右切换效果$(".anniu li").click(function(){$(this).addClass("on").siblings().removeClass("on");var num=$(this).index();$(".pic").animate({marginLeft:-350*num},"slow");});//图⽚⾃动轮播效果var a=0;var automatic=setInterval(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");},6000);//点击左右按钮，图⽚进⾏切换效果$(".pre").click(function(){a--;a=(a+5)%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});$(".next").click(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});});。

JSmousemove事件：鼠标移动事件

JSmousemove事件：⿏标移动事件在JavaScript 中，mousemove 事件是⼀个实时响应的事件，当⿏标指针的位置发⽣变化时（⾄少移动⼀个像素），就会触发 mousemove 事件。

该事件响应的灵敏度主要参考⿏标指针移动速度的快慢以及浏览器跟踪更新的速度。

⽰例下⾯⽰例演⽰了如何综合应⽤各种⿏标事件实现页⾯元素拖放操作的设计过程。

实现拖放操作设计需要解决以下⼏个问题。

定义拖放元素为绝对定位以及设计事件的响应过程，这个⽐较容易实现。

清楚⼏个坐标概念：按下⿏标时的指针坐标，移动中当前⿏标指针坐标，松开⿏标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。

算法设计：按下⿏标时，获取被拖放元素和⿏标指针的位置，在移动中实时计算⿏标偏移的距离，并利⽤该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。

如下图所⽰，其中变量 ox 和 oy 分别记录按下⿏标时被拖放元素的纵横坐标值，它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。

变量 mx 和 my 分别表⽰按下⿏标时，⿏标指针的坐标位置。

⽽ event.mx 和 event.my 是事件对象的⾃定义属性，⽤它们来存储当⿏标移动时⿏标指针的实时位置。

当获取了上⾯ 3 对坐标值之后，就可以动态计算拖动中元素的实时坐标位置，即 x 轴值为 ox+event.mx-mx，y 轴为 oy+event.my-my。

当释放⿏标按钮时，就可以释放事件，并记下松开⿏标指针时拖动元素的坐标值，以及⿏标指针的位置，留待下⼀次拖放操作时调⽤。

1 <div id="box" ></div>2 <script>3// 初始化拖放对象4var box = document.getElementById("box");5// 获取页⾯中被拖放元素的引⽤指针6 box.style.position = "absolute"; // 绝对定位7 box.style.width = "160px"; // 定义宽度8 box.style.height = "120px"; // 定义⾼度9 box.style.backgroundColor = "red"; // 定义背景⾊10// 初始化变量，标准化事件对象11var mx, my, ox, oy; // 定义备⽤变量12function e(event){ // 定义事件对象标准化函数13if( ! event){ // 兼容IE浏览器14 event = window.event;15 event.target = event.srcElement;16 yerX = event.offsetX;17 yerY = event.offsetY;18 }19 event.mx = event.pageX || event.clientX + document.body.scrollLeft;20// 计算⿏标指针的x轴距离21 event.my = event.pageY || event.clientY + document.body.scrollTop;22// 计算⿏标指针的y轴距离23return event; // 返回标准化的事件对象24 }25// 定义⿏标事件处理函数26 document.onmousedown = function(event){ // 按下⿏标时，初始化处理27 event = e(event); // 获取标准事件对象28 o = event.target; // 获取当前拖放的元素29 ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标30 oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标31 mx = event.mx; // 按下⿏标指针的x轴坐标32 my = event.my; // 按下⿏标指针的y轴坐标33 document.onmousemove = move; // 注册⿏标移动事件处理函数34 document.onmouseup = stop; // 注册松开⿏标事件处理函数35 }36function move(event){ // ⿏标移动处理函数37 event = e(event);38 o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离39 o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离40 }41function stop(event){ // 松开⿏标处理函数42 event = e(event);43 ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标44 oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标45 mx = event.mx ; // 记录⿏标指针的x轴坐标46 my = event.my ; // 记录⿏标指针的y轴坐标47 o = document.onmousemove = document.onmouseup = null;48// 释放所有操作对象49 }50 </script>。

jQuery实现的鼠标滑过切换图片代码实例

jQuery实现的⿏标滑过切换图⽚代码实例
jQuery实现的⿏标滑过切换图⽚代码实例:
有时候⽹页需要这样的简单效果，那就是当⿏标滑过默认图⽚的时候，能够实现图⽚的切换，可能在实际应⽤中，往往没有这么简单，不过⼤家可以⾃⾏扩展⼀下，下⾯简单介绍⼀下次效果。

html静态代码如下:
<body>
<img src="images/mayi.jpg"/>
</body>
jquery切换代码:
$(document).ready(function(){
var newImage=new Image();
var oldImage=$('img').attr('src');
newImage.src='images/new.jpg';
$('img').hover(function(){
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
})
})
以上代码是实现切换的核⼼，原理很简单，就是为图⽚的注册hover事件处理函数，当⿏标悬浮的时候，修改图⽚的src属性值即可。

制作鼠标移动时交换图片

制作鼠标移动时交换图片如何正确而且规范地使用，鼠标移动，点击时交换不同的图片；相信大家经常用的方式是Dreamweaver 里的鼠标经过图象功能，也就是写一段js 在客户端执行，当然这种方式可以用简单的样式表来实现。

大家都知道<a href="#">a</a>怎么用样式表来定义下划线，删除线，字体颜色等等。

那么，我们用<a>属性来放背景图。

下面的代码参考：<style>img { border-style: none } /* 图片边框 */a { background: url(step01.gif) } /* 连接的样式 */a:hover { background: url(step02.gif) } /* 鼠标移动时的样式 */ a:active { background: url(step03.gif) } /* 鼠标点击时的样式 */ </style><a href="#"><img src="spacer.gif" width="47" height="47" alt=""></a>看看是不是实现了一大堆js的效果？由于a属性没有width和height，因此我们使用一张透明背景的图片 spacer.gif ，把A属性给撑大。

如果当两张交换的图片不一样大时怎么做？我想可以试试利用浏览器的BUG，假设a属性的width和height，然后产生对下面属性img的width和height发生反映。

下面的代码参考：<style>img { border-style: none } /* 图片边框 */a { background: url(step01.gif); width: 47px; height: 47px } /* 连接的样式 */a:hover { background: url(step02.gif); width: 20px; height: 20px } /* 鼠标移动时的样式 */a:active { background: url(step03.gif); width: 30px; height: 30px } /* 鼠标点击时的样式 */</style><a href="#"><img src="spacer.gif" alt=""></a>。

js鼠标移动、鼠标按下、鼠标释放和点击事件。

js⿏标移动、⿏标按下、⿏标释放和点击事件。

⿏标移动：mousemove⿏标按下：mousedown⿏标释放：mouseup点击事件：click<body><div class="box"></div><script> var box=document.getElementById("box"); box.onmousedown=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmouseup=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onmousemove=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY } box.onclick=function(e){ box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY }//当⿏标按下，⿏标释放，和点击事件同时执⾏的时候，系统依次执⾏⿏标按下、⿏标释放、⿏标点击。

//获取X、Y的位置有两种⽅法。

1. e.clientX e.clientY 此⽅法是按照窗⼝左上⾓为原点进⾏获取的。

2. e.pageX e.pageY 此⽅法是按照⽂档左上⾓为原点进⾏获取的。

</script></body>事件委托：将⼦元素将要执⾏的事件委托给⽗元素，⽗元素执⾏事件时，通过事件对象，来判断是哪个⼦元素触发的事件。

事件冒泡：事件由内部向外部传播，外层如果有相同的事件，也会触发。

javascript实现跟随鼠标移动的图片

javascript实现跟随⿏标移动的图⽚本⽂实例为⼤家分享了javascript实现图⽚跟随⿏标移动的具体代码，供⼤家参考，具体内容如下实现思路1、给 document 绑定 mousemove 事件，获取⿏标的坐标：e.pageX ，e.pageY2、将图⽚设置成绝对定位：position: absolute;3、获取图⽚元素对象，将⿏标的 x , y 坐标分别赋值给图⽚的 left ， top 值，为了时⿏标在图⽚中间，可以减去图⽚宽⾼的⼀半，让图⽚位置向上向左，注意：不要忘记加上单位 ‘px'⼩知识：e.clientX- - -获取⿏标 x 轴坐标，相对于浏览器窗⼝可视区e.clientY- - -获取⿏标 Y 轴坐标，相对于浏览器窗⼝可视区e.pageX- - -获取⿏标 x 轴坐标，相对于⽂档页⾯e.pageY- - -获取⿏标 Y 轴坐标，相对于⽂档页⾯e.screenX- - -获取⿏标 x 轴坐标，相对于电脑屏幕e.screenY- - -获取⿏标 Y 轴坐标，相对于电脑屏幕⽰例代码⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取⿏标坐标</title><style>img {/* width: 80px;height: 90px; */position: absolute;}</style></head><body><img src="images/斑.png" alt=""><script>var img = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x = e.pageX;var y = e.pageY;img.style.top = y - 40 + 'px';img.style.left = x - 48 + 'px';})</script></body></html>页⾯效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

使用JS实现鼠标放上图片进行放大离开实现缩小功能

使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能，具体代码如下所⽰：<!DOCTYPE html><html><head><title></title></head><body><div id= 'div_jpg' style="width: 200px;height: 200px;"><img src="./128206.jpg" id="img" style="width: 100%;height: 100%;"></div><script>var img = document.getElementById('img')var s1,s2console.log(img)// 图⽚放⼤效果i = 100;img.addEventListener('mouseover',function(){clearInterval(s1);s1 = setInterval(function(){i+=0.1;img.style.width = (i)+'%';img.style.height = (i)+'%';i = parseFloat(i);if(i>=120) clearInterval(s1);},1);})img.addEventListener('mouseout',function(){clearInterval(s2);s2 = setInterval(function(){i-=0.1;img.style.width = (i)+'%';img.style.height = (i)+'%';i = parseFloat(i);if(i<=100) clearInterval(s2);})})</script></body></html>分享源码，喜欢的朋友点击查看：到此这篇关于使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能的⽂章就介绍到这了,更多相关js图⽚放⼤离开缩⼩内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

js鼠标滚动图片变大小

js⿏标滚动图⽚变⼤⼩<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><script>window.onload = function(){var img = document.getElementById("img");if(myBrowser() == "FF"){img.addEventListener("DOMMouseScroll",fun,false);}else{img.onmousewheel = fun;}};function fun(e){var ev = e || window.event;var mun = ev.wheelDelta || ev.detail;if(mun>0){img.style.width = img.offsetWidth*1.2 + "px";}else{img.style.width = img.offsetWidth*0.8 + "px";}}function myBrowser() {var userAgent = erAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera") > -1;//判断是否Opera浏览器if(isOpera) {return "Opera";}//判断是否Firefox浏览器if(userAgent.indexOf("Firefox") > -1) {return "FF";}if (userAgent.indexOf("Chrome") > -1) {return "Chrome";}if (userAgent.indexOf("Safari") > -1) {return "Safari";}if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}}</script></head><body><img src="./图⽚放⼤图⽚/imgA_2.jpg" alt="" id="img"/></body></html>。

JS鼠标滑过图片时切换图片实现思路

JS⿏标滑过图⽚时切换图⽚实现思路在很多⽹站上我们会发现当⿏标滑过⼀张图⽚后，这张图⽚切换为了另外的⼀张图⽚。

这⾥⼩编说说这是怎么实现的。

在写Javascript代码前我们必须要有实验的HTML代码复制代码代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Jquery deal images</title><script src="./js/jquery.js" type="text/javascript"></script><script type="text/javascript"></script></head><body><img src="./images/img02.png" /></body></html>下⾯来重点分析JS代码复制代码代码如下:$(document).ready(function(){var newImage = new Image(); //预载⼊图⽚var oldImage = $('img').attr('src');newImage.src = './images/img03.jpg';$('img').hover(function(){ //⿏标滑过图⽚切换$('img').attr('src',newImage.src);},function(){$('img').attr('src',oldImage);});});这⾥⼤家迷惑的是为什么要预载⼊图⽚呢？因为在⽹站上不像我们本地调试，图⽚下载这么快。

Vue.js鼠标悬浮更换图片功能

Vue.js⿏标悬浮更换图⽚功能最近⾃⼰做的项⽬中设计师要求分类栏中⿏标悬停更换图⽚，⼤致实现出来的效果就是这样：这个在jQuery中是个很简单的事，但是在vue中我还是第⼀次实现。

⾸先将所有的选中后图⽚都覆盖到没选中图⽚上html代码如下<ul><li><a href=""><img src="../../../img/goods/study.png" alt="学习"><img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习"></a></li><li><a href=""><img src="../../../img/goods/life.png" alt="⽣活"><img class="hide_tab" src="../../../img/goods/life_1.png" alt="⽣活"></a></li><li><a href="" ><img src="../../../img/goods/sport.png" alt="运动"><img class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动"></a></li><li><a href=""><img src="../../../img/goods/clothes.png" alt="服饰"><img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服饰"></a></li><li><a href="" ><img src="../../../img/goods/hat.png" alt="鞋帽"><imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽"></a></li><li><a href="" ><img src="../../../img/goods/food.png" alt="⾷品"><img class="hide_tab" src="../../../img/goods/food_1.png" alt="⾷品"></a></li><li><a href=""><img src="../../../img/goods/other.png" alt="其他"><img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他"></a></li></ul>css代码如下.right {float: left;ul {margin-left: 1px;li {display: inline-block;margin-left: 12px;width: 100px;height: 100px;a{position: relative;display: inline-block;width: 100px;height: 100px;.hide_tab{position: absolute;bottom: 0;}}}}}其实就是很简单的通过position:absolute进⾏了布局，现在选中样式的图⽚已经全部覆盖到了没有选中样式图⽚之上了。

js上一张图片下一张图片

js上⼀张图⽚下⼀张图⽚实现效果：⿏标经过左半部分，显⽰左按钮，点击显⽰上⼀张图；⿏标经过右半部分，显⽰右按钮，点击显⽰下⼀张图。

有淡⼊淡出效果。

js代码：function picNext(id){var picBox = document.getElementById(id),picArray = picBox.getElementsByTagName('img'),len = picArray.length,boxWidth = picBox.offsetWidth;picArray[0].style.display = 'block';//创建左右按钮var cssText1 = 'width:41px; height:48px; top:50%; margin-top:-20px; cursor:pointer; left:10px; z-index:10',cssText2 = 'width:41px; height:48px; top:50%; margin-top:-20px; cursor:pointer; right:10px; z-index:10',leftPic = new Image(),rightPic = new Image();leftPic.style.cssText = cssText1;leftPic.src = 'images/btn_left.gif';rightPic.style.cssText = cssText2;rightPic.src = 'images/btn_right.gif';picBox.appendChild(leftPic);picBox.appendChild(rightPic);//⿏标经过移出function getEvent(event){return event ? event : window.event;}picBox.onmousemove = function(e){e = getEvent(e);if(e.clientX + document.documentElement.scrollLeft - picBox.offsetLeft < boxWidth/2){leftPic.style.display = 'block';rightPic.style.display = 'none';}if(e.clientX + document.documentElement.scrollLeft - picBox.offsetLeft > boxWidth/2){rightPic.style.display = 'block';leftPic.style.display = 'none';}}picBox.onmouseout = function(){leftPic.style.display = 'none';rightPic.style.display = 'none';}//点击事件var now = 0;function fadeIn(el){el.style.opacity = 0;el.style.filter = 'alpha(opacity = 0)';el.style.display = 'block';var n = 0;function fadeShow(){if (n < 1){n += 0.1;el.style.opacity = n;el.style.filter = 'alpha(opacity = '+n*100+')';var setTimeId = setTimeout(fadeShow, 50);}else{el.style.opacity = 1;el.style.filter = 'alpha(opacity = 100)';clearTimeout(setTimeId);}}fadeShow();}function fadeOut(el){el.style.opacity = 1;el.style.filter = 'alpha(opacity = 100)';var n = 1;function fadeHide(){if (n > 0){n -= 0.1;el.style.opacity = n;el.style.filter = 'alpha(opacity = '+n*100+')';var setTimeId = setTimeout(fadeHide, 50);}else{el.style.opacity = 0;el.style.filter = 'alpha(opacity = 0)';clearTimeout(setTimeId);el.style.display = 'none';}}fadeHide();}leftPic.onclick = function(){if (now == 0){alert('已经是第⼀张！')}else{fadeOut(picArray[now]);fadeIn(picArray[now-1]);now--;}}rightPic.onclick = function(){if (now == (len - 1)){alert('已经最后⼀张！')}else{fadeOut(picArray[now]);fadeIn(picArray[now+1]);now++;}}}picNext('pic_box');使⽤说明：picNext(id)，只需传⼊图⽚的box的id即可，此box设置为相对定位，⾥边的图⽚设置绝对定位并隐藏。

Dreamweaver鼠标经过时更换图像怎么设置

aver鼠标经过时更换图像的设置方法欢迎大家阅读
Dreamweaver鼠标经过时更换图像怎么设置
在使用Dreamweaver的时候，鼠标经过时如何更换图像呢?下面是店铺为大家介绍Dreamweaver鼠标经过时更换图像的设置方法,欢迎大家阅读。
Dreamweaver鼠标经过时更换图像的设置方法
首先：可以用PS等制图软件设置两张图片
其中一张是网站显示的图片，另一张是鼠标移动上后所显示的图片。
然后：选择菜单中的“插入”--选择“图像对象”
其次：选择“鼠标经过图像”
最后：将原始图像和鼠标经过图像链接输入以及URL路径即可完成。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

js鼠标经过变换图片
深度学习研究院作者：dongtso
（一）dreamweaver自动生成的鼠标经过变换图片的js
以前做网站时，但凡用到鼠标经过变换图片的需求，一般都是用的dreamweaver自带的那个功能，让其自动生成，但是这样每页都会自动生成这样一段代码：
<script type="text/javascript">
<!—
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&yers&&i<yers.length;i++) x=MM_findObj(n,yers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
</script>
(二) 将dreamweaver自动生成的js独立出来调用
在网站减肥工程中，我改写了一下，将其单独出来，命名为：mouseimg.js，改了一下其太长的函数名，其他的什么也没改，放在每个要用到文件前进行加载即可，文件如下：function outimg() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function loadimg() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=loadimg.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&yers&&i<yers.length;i++) x=MM_findObj(n,yers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function overimg() { //v3.0
var i,j=0,x,a=overimg.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
示例：
<body onload="loadImage('images/topmenu_02_2.jpg','images/topmenu_03_2.jpg')">
<a href="#" onmouseout="outimg()"
onmouseover="overimg('Image2','','images/topmenu_02_2.jpg',1)"><img
src="images/topmenu_02_1.jpg" name="Image2" width="45" height="36" border="0" id="Image2" /></a>
注释：默认时显示：topmenu_02_1.jpg，鼠标划过时显示：topmenu_02_2.jpg
(三)自定义js调用
后来，又发现了一个，更为简单的js函数，我将其命名为：mouseover.js，放在每个要用到文件前进行加载即可，文件如下：
function changeImg(id, path)
{
document.getElementById(id).src=path;
}
示例：
<a href="#"><img id="img3" src="images/topmenu_03_1.jpg " width="83" height="36" onMouseOver="changeImg('img3','images/topmenu_03_2.jpg')"
onMouseOut="changeImg('img3','images/topmenu_03_1.jpg')"></a>
（四）自生成与自定义的js对比
区别：
Mouseimg.js和mouseover.js的区别是前者写入<a href="#">，而后者<img>标签中的。

（五）后记
以上记录，仅供我个人以后调用查询。

或许还有更多更好的方法，那么请你告许我。