鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)

合集下载

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果上一次在我的文库中分享了点击按钮，图片左右切换轮播效果代码，今天主要是分享【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。

最后的效果如下：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");});});。

canvas实现滚动鼠标放大缩小及拖动

canvas实现滚动⿏标放⼤缩⼩及拖动1、canvas实现滚动⿏标放⼤缩⼩2、实现⿏标拖动实现⽅式canvas转图⽚关键代码如下：<canvas class="canvas"></canvas><script type="text/javascript"> var canvas = document.getElementsByClassName('canvas'); var ctx = canvas.getContext("2d"); var img = new Image();$(function(){trackTransforms(ctx);var lastX=canvas.width/2, lastY=canvas.height/2;var dragStart,dragged;canvas.addEventListener('mousedown',function(evt){document.body.style.mozUserSelect = document.body.style.webkitUserSelect = erSelect = 'none';lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);dragStart = ctx.transformedPoint(lastX,lastY);dragged = false;},false);canvas.addEventListener('mousemove',function(evt){lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);dragged = true;if (dragStart){var pt = ctx.transformedPoint(lastX,lastY);ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);redraw();}},false);canvas.addEventListener('mouseup',function(evt){dragStart = null;if (!dragged) zoom(evt.shiftKey ? -1 : 1 );},false);var scaleFactor = 1.1;var zoom = function(clicks){if(clicks==1) return;var pt = ctx.transformedPoint(lastX,lastY);ctx.translate(pt.x,pt.y);var factor = Math.pow(scaleFactor,clicks);ctx.scale(factor,factor);ctx.translate(-pt.x,-pt.y);redraw();}var handleScroll = function(evt){var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;if (delta) zoom(delta);return evt.preventDefault() && false;};canvas.addEventListener('DOMMouseScroll',handleScroll,false);canvas.addEventListener('mousewheel',handleScroll,false);});img.src = canvas.toDataURL("image/png");function redraw(){// Clear the entire canvasvar p1 = ctx.transformedPoint(0,0);var p2 = ctx.transformedPoint(canvas.width,canvas.height);ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.clearRect(0,0,canvas.width,canvas.height);ctx.restore();ctx.drawImage(img,0,0);}function trackTransforms(ctx){var svg = document.createElementNS("/2000/svg",'svg'); var xform = svg.createSVGMatrix();ctx.getTransform = function(){ return xform; };var savedTransforms = [];var save = ctx.save;ctx.save = function(){savedTransforms.push(xform.translate(0,0));return save.call(ctx);};var restore = ctx.restore;ctx.restore = function(){xform = savedTransforms.pop();return restore.call(ctx);};var scale = ctx.scale;ctx.scale = function(sx,sy){xform = xform.scaleNonUniform(sx,sy);return scale.call(ctx,sx,sy);};var rotate = ctx.rotate;ctx.rotate = function(radians){xform = xform.rotate(radians*180/Math.PI);return rotate.call(ctx,radians);};var translate = ctx.translate;ctx.translate = function(dx,dy){xform = xform.translate(dx,dy);return translate.call(ctx,dx,dy);};var transform = ctx.transform;ctx.transform = function(a,b,c,d,e,f){var m2 = svg.createSVGMatrix();m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;xform = xform.multiply(m2);return transform.call(ctx,a,b,c,d,e,f);};var setTransform = ctx.setTransform;ctx.setTransform = function(a,b,c,d,e,f){xform.a = a;xform.b = b;xform.c = c;xform.d = d;xform.e = e;xform.f = f;return setTransform.call(ctx,a,b,c,d,e,f);};var pt = svg.createSVGPoint();ctx.transformedPoint = function(x,y){pt.x=x; pt.y=y;return pt.matrixTransform(xform.inverse());}}</script>。

实用的CSS鼠标滑过按钮特效(10种代码篇)

}
/*效果二*/
.button2{
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
overflow:hidden;
position: relative;
}
.button2:hover{
background-color: rgba(255,255,255,0.2);
}
.button5:hover::before{
opacity:0;
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
.button5::after{
content:'';
width:100%;
height:100%;
position: absolute;
height: 100%;
position: absolute;
left: -50px;
top: 0;
opacity:0;
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
}
.button2:hover::after{
left:0;
opacity:1;
opacity:0;
position: absolute;
left: 0;
top:0;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.5s ;
transition: all 0.5s ;
}
.button4:hover::after{

实现鼠标hover动画效果自己理解的两种方法——练习笔记

实现⿏标hover动画效果⾃⼰理解的两种⽅法——练习笔记练习前端技术学院的任务，需要实现“导航栏中的链接，随着⿏标悬浮的位置，相应的链接下出现红⾊线段”的效果（如图1），我的理解有简易与稍显复杂⼀些的⽅法：⾸先想到的就是直接利⽤伪元素，改变其底边框状态即可。

对应的代码及效果如下:1<html>2<head></head>3<body>4<div>5<ul>6<li><a href="#" class="Link-tit"><i>⾸页</i></a></li>7<li><a href="#" class="Link-tit"><i>最新活动</i></a></li>8<li><a href="#" class="Link-tit"><i>项⽬介绍</i></a></li>9<li><a href="#" class="Link-tit"><i>爱⼼社区</i></a></li>10<li><a href="#" class="Link-tit"><i>关于我们</i></a></li>11<li><a href="#" class="Link-tit"><i>登录</i></a></li>12</ul>13</div>14</body>15</html>css为：1ul li{2 width:120px;3 float:left;4 }5ul{6 list-style-type:none;7 }8div{float:right;/*实现整体的右对齐布局}9a:hover{10 color:red;11 border-bottom:3px solid red;/*实现⿏标悬浮时对应链接⾼亮红⾊且有红⾊底边框效果*/12 }此⽅法就没有了平滑的动作（动画效果），其效果如图：另⼀⽅法是⽤CSS3属性transition（过渡）实现，思路是利⽤该属性指定⿏标动作时变化的具体属性以及时间来控制其变化，⽤⼀个空的<li>放置变化的红⾊底线，具体代码如下：<html><head></head><body><div class="navigation"><ul><li><a href="#" class="Link-tit"><i>⾸页</i></a></li><li><a href="#" class="Link-tit"><i>最新活动</i></a></li><li><a href="#" class="Link-tit"><i>项⽬介绍</i></a></li><li><a href="#" class="Link-tit"><i>爱⼼社区</i></a></li><li><a href="#" class="Link-tit"><i>关于我们</i></a></li><li><a href="#" class="Link-tit"><i>登录</i></a></li><li class="move"></li></ul></div></body></html>CSS代码如下：1.head a{text-decoration:none;/*去除a⾃带的下划线*/}2ul{list-style-type:none;position:relative;}3.Link-tit:hover{color:red;}/*伪元素实现当⿏标停在链接上⾼亮显⽰*/4ul li{width:110px;float:left;line-height:20px;}5.move{border-bottom:3px solid red;position:absolute;left:0px;top:30px;6 transition:left .2s ease-in-out 0s; /*transition中的left值为.move类事件触发时随⿏标变化的属性*/7 -webkit-transition:left .2s ease-in-out 0s; /*chrome/safari浏览器*/8 -moz-transition:left .2s ease-in-out 0s; /*firefox浏览器*/9 -o-transition:left .2s ease-in-out 0s;} /*opera浏览器*/10li:nth-child(1):hover~.move{left:0px;}11li:nth-child(2):hover~.move{left:110px;}12li:nth-child(3):hover~.move{left:220px;}13li:nth-child(4):hover~.move{left:330px;}14li:nth-child(5):hover~.move{left:440px;}15li:nth-child(6):hover~.move{left:550px;}其中，:nth-child(n)为⼦代选择器，此处表⽰各个链接，prev~slibings表⽰同辈元素，改变.move的left值，即可改变已经脱离⽂档流的下划线的位置，从⽽达到效果（见图⼀）。

鼠标事件：鼠标点击出现下拉菜单,很基础的一个特效。

鼠标事件：鼠标点击出现下拉菜单，很基础的一个特效。

先上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=javascript>var intDelay = 30; //设置菜单显示速度，越大越慢var intInterval = 5;function MenuClick() {if (LayerMenu.style.display == "") {GradientClose();}else {LayerMenu.filters.alpha.opacity = 0; LayerMenu.style.display = ""; GradientShow();}}function GradientShow() {LayerMenu.filters.alpha.opacity += intInterval;if (LayerMenu.filters.alpha.opacity < 100) setTimeout("GradientShow()", intDelay);}function GradientClose() {LayerMenu.filters.alpha.opacity -= intInterval; if (LayerMenu.filters.alpha.opacity > 0) {setTimeout("GradientClose()", intDelay);}else {LayerMenu.style.display = "none"; }}</SCRIPT> <STYLE type=text/css>A{ FONT-SIZE: 10px; COLOR: #666666; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma"; TEXT-DECORATION: none }TD{ FONT-SIZE: 10px; COLOR: #999999; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma" }</STYLE> <META content="MSHTML 5.50.4134.600" name=GENERATOR> </head><body text=#000000 bgColor=#ffffff><DIV id=LayerMenu style="DISPLAY: none; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 8px; WIDTH: 68px; POSITION: absolute; TOP: 33px"><TABLE cellSpacing=1 cellPadding=0 width=100 bgColor=#999999 border=0><TBODY><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\music.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\map.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\movie.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\void.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR></TBODY></TABLE></DIV><A onfocus=this.blur() onclick=MenuClick() href="#"><imgsrc="img/images/music.png" width="30px" height="30px" border="0"></A></body></html>下面是我相对更改的地方。

JavaScript实现动态网页特效

JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。

通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。

以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。

例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。

2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。

可以通过设置定时器和改变图片的显示状态来实现。

这种效果常用于图片展示、轮播广告等地方。

3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。

可以通过设置事件监听和改变菜单的可见性来实现。

4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。

可以通过设置事件监听和编写验证函数来实现。

例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。

5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。

可以通过监听滚动事件和设置ajax 请求来实现。

这种效果常用于博客、社交媒体等网站上。

6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。

可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。

这种效果常用于网页中的广告、特效展示等地方。

7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。

可以通过设置事件监听、控制播放状态和改变样式来实现。

例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码

CSS实现⿏标移⼊时图⽚的放⼤效果及缓慢过渡效果的⽰例代码transform:scale()可以实现按⽐例放⼤或者缩⼩功能。

transition可以设置动画执⾏的时间，实现缓慢或者快速的执⾏动画，效果图如下：源码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>css实现⿏标移⼊时的放⼤效果</title><style type="text/css">div{width: 200px;height: 300px;margin:0 auto;margin-top: 100px;}div img{width: 100%;height: 100%;transition: all 0.6s; //设置动画执⾏的时间为0.6scursor: pointer;}div img:hover{transform: scale(1.2); //设置图⽚按照⽐例放⼤1.2倍}</style></head><body><div><img src="images/unnamed.jpg"></div></body></html>- 图⽚溢出div时遮罩：源码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>css实现⿏标移⼊时的放⼤效果</title><style type="text/css">div{width: 200px;height: 300px;margin:0 auto;margin-top: 100px;overflow: hidden; //图⽚超出div部分隐藏}div img{width: 100%;height: 100%;transition: all 0.6s; //设置动画执⾏的时间为0.6scursor: pointer;}div img:hover{transform: scale(1.3); //设置图⽚按照⽐例放⼤1.3倍}</style></head><body><div><img src="images/unnamed.jpg"></div></body></html>到此这篇关于CSS实现⿏标移⼊时图⽚的放⼤效果及缓慢过渡效果的⽰例代码的⽂章就介绍到这了,更多相关css⿏标移⼊图⽚放⼤内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

利用HTML自带的图片滚动标签实现效果

1、一般方式<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>注释：1) scrollAmount。

它表示速度，值越大速度越快。

2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。

2、水平滚动和垂直滚动（1）图片从右到左滚动<MARQUEE width=宽height=高onmouseover=stop() onmouseout=start() scrollAmount=速度loop=infinite deplay="0"><img src="图片地址"><img src="图片地址">···</MARQUEE>（2）图片从下到上滚动<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址"><img src="图片网址">···</marquee>3、给滚动图片加超链接用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。

用HTML5实现鼠标滚轮事件放大缩小图片的功能

⽤HTML5实现⿏标滚轮事件放⼤缩⼩图⽚的功能你我都知道在HTML5⽹页中添加⿏标滚轮事件能够更好的让⽤户与⽹页进⾏交互操作。

⽽在HTML5中，⿏标滚轮并不仅仅就只能上下滑动⽹页，实际上你还可以依靠这个完成更多的功能，⽐如视野平⾯的放⼤与缩⼩。

⼤部分浏览器都是⽀持⿏标滚轮事件的，所以你可以先订阅⿏标滚轮事件的⽅法，每当事件被触发时，你能获取⼀个名为wheelDelta 的属性，它代表刚才⿏标滚轮改变的⼤⼩，其中正值表⽰滚轮往下滑动，负值表⽰滚轮往上滑动。

数值的绝对值越⼤，滑动范围越⼤。

但不幸的是依然有⼀款浏览器是不⽀持⿏标滚轮事件的。

那就是FireFox。

Mozilla 已经实现了⼀个名为"DOMMouseScroll"的事件的处理，它会传递⼀个名为 event 且附带了名为 detail 属性的事件参数过来，然⽽，这个 detail 属性不同于wheelDelta，它只能返回正值，即只能坚持⿏标滚轮向下滚动的值。

你应该特别注意⼀下，Apple公司在Safari浏览器中也禁⽤了⿏标滚动控制页⾯上下滑动，但是此功能依然在webkit引擎中正常使⽤的，所以你写的代码是不会触发什么问题的。

添加⿏标滚轮事件处理⽅法⾸先我们在⽹页中添加⼀个图⽚，待会就能⽤⿏标滚轮控制此图⽚的缩放XML/HTML Code复制内容到剪贴板1. <img id="myimage" src="myimage.jpg" alt="my image" />现在来添加⿏标滚轮事件处理代码XML/HTML Code复制内容到剪贴板1. var myimage = document.getElementById("myimage");2. if (myimage.addEventListener) {3. // IE9, Chrome, Safari, Opera4. myimage.addEventListener("mousewheel", MouseWheelHandler, false);5. // Firefox6. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);7. }8. // IE 6/7/89. else myimage.attachEvent("onmousewheel", MouseWheelHandler);为了让不同浏览器都能⽀持的处理做法在下⾯这个案例中，我们将对Firefox的detail值取反然后返回1或者-1的其中⼀个XML/HTML Code复制内容到剪贴板1. function MouseWheelHandler(e) {2. // cross-browser wheel delta3. var e = window.event || e; // old IE support4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));现在我们直接决定图⽚的⼤⼩范围。

Vue实现图片监听鼠标滑轮滚动实现图片缩小放大功能

Vue实现图⽚监听⿏标滑轮滚动实现图⽚缩⼩放⼤功能Vue 实现图⽚监听⿏标滑轮滚动实现图⽚缩⼩放⼤功能
其实想要实现功能很简单，就是在⼀张图⽚上监听⿏标滑轮滚动的事件，然后根据上滚还是下滚实现图⽚的缩放。

其实就是这种效果：
其实代码不是很难。

HTML代码：
<img id="img" :src="src" alt="" @mousedown.prevent="dropImage" @mousewheel.prevent='gunlun'
:style="{transform:'scale('+multiples+')'}">
@mousewheel.prevent 来监听⿏标滑轮滚动。

没了，当⿏标在这个图⽚滚动滑轮的时候就会被这个时间监听到，然后就可以写⾃⼰的逻辑代码了。

JS代码：
// 滚轮滑动
gunlun(e) {
let direction = e.deltaY > 0 ? 'down' : 'up'
if (direction === 'up') {
// 滑轮向上滚动
} else {
// 滑轮向下滚动
}
},
然后就可以在⾥⾯编写⾃⼰的业务逻辑了。

单纯的使图⽚缩⼩放⼤还不⾄于使⽤防抖和节流啥的，但是如果需要请求后台记得做好防抖。

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

必须CSS样式
.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
*/
//--初始化变量--
var rT=true;//允许图像过渡
<div class="latestWeb">
<ul>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/01.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/01.jpg>')" onMouseOut="toolTip()"></a></div>
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
return document.body.scrollLeft;
}
}
/*
渐变的弹出图片
使用方法：
将js包含在网页body的结束标签后

<style type="text/css">
*{padding:0;margin:0;}
html{overflow:-moz-scrollbars-vertical;}
body{font:12px/22px "宋体";word-break:break-all;text-align:left;background:#C0C0C0;color:#4E4E4E;}
调用方法：
<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>
</li>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/03.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/03.jpg>')" onMouseOut="toolTip()"></a></div>
鼠标滑过小图显示大图预览效果（html代码,css样式，javascript)
一、预览效果：
二、代码部分（将以下代码复制粘贴到记事本，然后将后缀改成.htm或html即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
div.bodycontent ul{margin-left:0px;}
</style>
<script language="javascript">
function toolTip(str) {
}
</script>
</head>
<body>

</li>
<li class="">
<div style="width:90px;height:65px;"><a href="/effects"><img src="/js_img/8-24/images/04.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/04.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/06.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/06.jpg>')" onMouseOut="toolTip()"></a></div>
.latestWeb ul{overflow:hidden;_height:1%;}
.latestWeb li{float:left;border:1px solid #EBEAEA;width:150px;padding:17px 0 14px 22px;margin:14px 18px 0 0;}
</li>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/05.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/05.jpg>')" onMouseOut="toolTip()"></a></div>
if (self.pageXOffset) // all except Explorer
{
return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
.trans_msg{filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);}
div.bodycontent{font-family:Arial,Helvetica,sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
if (document.body) return document.源自ody.clientHeight;
return window.undefined;
}
function getViewportWidth() {
if (window.innerWidth!=window.undefined) return window.innerWidth;
</li>
<li class="">
<div style="width:90px;height:65px;"><a href=""><img src="/js_img/8-24/images/02.jpg" width=130px height=65px onMouseOver="toolTip('<img src=/js_img/8-24/images/02.jpg>')" onMouseOut="toolTip()"></a></div>