当前位置：文档之家 › 鼠标滑过小图显示大图预览效果(html代码,css样式,javascript)

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

  • 格式：doc
  • 大小：727.50 KB
  • 文档页数：8
必须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的结束标签后
<!--把下面代码加到<head>与</head>之间-->
<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>
<!--把下面代码加到<body>与</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>

合集下载

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

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

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

最后的效果如下：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实现滚动鼠标放大缩小及拖动

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种代码篇)

实用的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动画效果自己理解的两种方法——练习笔记

实现⿏标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><!--利⽤⼀个空的<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值，即可改变已经脱离⽂档流的下划线的位置，从⽽达到效果（见图⼀）。