當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浮动层图片鼠标指针移到自动放大

發布時間：2023/12/2 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了浮动层图片鼠标指针移到自动放大小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html code:

?1<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?2<html?xmlns="http://www.w3.org/1999/xhtml">
?3<head>
?4<title>締友計算機信息技術有限公司--浮動層圖片鼠標指針移到自動放大</title>
?5<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
?6<meta?http-equiv="imagetoolbar"?content="no">
?7<meta?name="description"?content="涂聚文,捷為工作室,經營信息流,物流,人力資源流,資本流的系統解決方案的開發與設計和服務,geoVI?studio.Geovin　Du.?Systems?Solution?to?Fund?flow,and?Information?flow,and?Material?flow,and?Control?flow,and?Human?Resource.Applied?software?development,design?and?service。.">
?8<meta?name="Robots"?content="all?index?follow?">
?9<meta?name="Author"?content="涂聚文"?/>
10<link?href="images/css.css"?rel="stylesheet"?type="text/css">
11<link?rel="shortcut?icon"?href="http://www.dupcit.com/favicon.ico"?type="image/x-icon"?/>
12<link?rel="icon"?href="http://www.dupcit.com/favicon.ico"?type="image/ico"?/>
13<link?rel="Bookmark"?href="http://www.dupcit.com/favicon.ico">?
14<link?rel="stylesheet"?type="text/css"?href="css/css.css"/>
15<script?type="text/javascript"?src="js/float.js">
16
17</script>
18
19</head>
20<body>
21<div?id="screen">
22????<div?id="box"">
23????????<img?src="http://www.dupcit.com/01.jpg"?title="涂聚文"?alt=""/>
24????????<img?src="http://www.dupcit.com/02.jpg"?title=" 涂聚文"alt=""/>
25????????<img?src="http://www.dupcit.com/03.jpg"?title="涂聚文"?alt=""/>
26????????<img?src="http://www.dupcit.com/04.jpg"?title="涂聚文"?alt=""/>
27????????<img?src="http://www.dupcit.com/05.jpg"?title="涂聚文"?alt=""/>
28????????<img?src="http://www.dupcit.com/06.jpg"?title="涂聚文"?alt=""/>
29????????<img?src="http://www.dupcit.com/07.jpg"?title="涂聚文"?alt=""/>
30
31????????<span?id="txt"></span>
32????????<span?id="tit"></span>
33????????<span?id="lnk">
34????????????<a></a>
35????????????<a></a>
36????????????<a></a>
37????????????<a></a>
38????????????<a></a>
39????????????<a></a>
40????????????<a></a>????????</span>????</div>
41</div>
42
43
44<span?id="LB0"?style="position:absolute;left:50%;top:50%;"><span?style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading</span>
45<span?style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span?id="LB1"?style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
46<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function?images_loading_bar(){m02=0;for(i=0;i<m01;i )m02 =(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100) 'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128);?else?setTimeout("images_loading_bar()",?64);};images_loading_bar();</script>
47
48<a?href="index.aspx">
49<img?src="images/geovindu.jpg"?width="140"?height="59"?border="0"></a>
50</body>
51</html>
css code:

?1/*
?2??浮動層圖片鼠標指針移到自動放大
?3??geovindu@163.com?www.dupcit.com?www.dusystem.com
?4??Geovin?Du?涂聚文
?5??2009-08-18
?6*/
?7
?8html?{
?9????????overflow:?hidden;
10????}
11????body?{
12????margin:?0px;
13????padding:?0px;
14????position:?absolute;
15????width:?100%;
16????height:?100%;
17????cursor:?crosshair;
18????background-color:?#FF0000;
19????}
20????#box?{
21????position:?absolute;
22????border:?gray?solid?1px;
23????visibility:?hidden;
24????background-color:?#FFFFFF;
25????}
26????#screen?{
27????position:?absolute;
28????left:?0px;
29????width:?100%;
30????top:?10%;
31????height:?80%;
32????border:?gray?solid?1px;
33????background-color:?#FFFFFF;
34????}
35????#box?img??{
36????????position:?absolute;
37????????border:?gray?solid?1px;
38????????cursor:?pointer;
39????}
40????#box?span?{
41????????position:?absolute;
42????????color:?#ccc;
43????????font-family:?verdana;
44????????font-size:?12px;
45????????width:?200px;
46????}
47????#box?a?{
48????????text-decoration:?none;
49????????color:#ff8000;
50????}
51????#box?a:hover????{
52????????text-decoration:?none;
53????????background:#ff8000;
54????????color:#ffffff;
55????}
56????#box?a:visited?{
57????????text-decoration:?none;
58????????color:#ff8000;
59????}
60????#box?a:visited:hover?{
61????????text-decoration:?none;
62????????background:#ff8000;
63????????color:#ffffff;
64????}
65????#lnk?{
66????????visibility:?hidden;
67????}
68.font?{
69????font-family:?Arial,?Helvetica,?sans-serif;
70????font-size:?20px;
71????color:?#FFFFFF;
72????font-weight:?bold;
73}
74.STYLE3?{font-family:?Arial,?Helvetica,?sans-serif;?font-size:?25px;?color:?#FFFFFF;?font-weight:?bold;?}
javacript code:
??1/*
??2??浮動層圖片鼠標指針移到自動放大
??3??geovindu@163.com?www.dupcit.com?www.dusystem.com
??4??Geovin?Du?涂聚文
??5??2009-08-18
??6*/
??7
??8document.onselectstart?=?new?Function("return?false");
??9O????=?new?Array();
?10box??=?0;
?11img??=?0;
?12txt??=?0;
?13tit??=?0;
?14W????=?0;
?15H????=?0;
?16nI???=?0;
?17sel??=?0;
?18si???=?0;
?19ZOOM?=?0;
?20rImg?=?0;
?21//
?22speed?=?.06;?//?animation?speed
?23delay?=?.5;?//?1?=?no?delay
?24//
?25
?26function?dText(){
?27????txt.style.textAlign?=?tit.style.textAlign?=?(sel<nI/2)?"left":"right";
?28????txt.innerHTML?=?O[sel].tx;
?29????tit.innerHTML?=?O[sel].ti;
?30}
?31
?32function?CObj(n,?s,?x,?tx,?ti){
?33????this.n????=?n;
?34????this.dim??=?s;
?35????this.tx???=?tx;
?36????this.ti???=?ti;
?37????this.is???=?img[n];
?38????this.vz???=?0;
?39????this.sx???=?0;
?40????this.x0???=?x;
?41????this.x1???=?0;
?42????this.zo???=?0;
?43????this.over?=?function()?{
?44????????with(this){
?45????????????if(n!=sel){
?46????????????????O[sel].dim?=?100;
?47????????????????O[n].dim?=?ZOOM?*?100;
?48????????????????sel?=?n;
?49????????????????l?=?0;
?50????????????????for(k=0;?k<nI;?k ){
?51????????????????????O[k].x0?=?l;
?52????????????????????l? =?O[k].dim;
?53????????????????}
?54????????????????txt.innerHTML?=?tit.innerHTML?=?"";
?55????????????????setTimeout("dText()",?32);
?56????????????}
?57????????}
?58????}
?59????this.anim?=?function?()?{
?60????????with(this){
?61????????????vz??=?speed*(vz (x1-sx)*delay);
?62????????????x1?-=?vz;
?63????????????sx??=?(n==0)?0:O[n-1].x0 O[n-1].dim;
?64????????????zo?-=?(zo-dim)*speed;
?65????????????l???=?(x1*si) 6*(n 1);
?66????????????w???=?zo*si;
?67????????????is.style.left???=?Math.round(l) 'px';
?68????????????is.style.top????=?Math.round((H-w*rImg)*.5) 'px';
?69????????????is.style.width??=?Math.round(w) 'px';
?70????????????is.style.height?=?Math.round(w*rImg) 'px';
?71????????????if(sel?==?n){
?72????????????????if(sel<nI*.5)?{
?73????????????????????tit.style.left?=?txt.style.left?=?Math.round(l w 6) 'px';
?74????????????????}?else?{
?75????????????????????tit.style.left?=?txt.style.left?=?Math.round(l-(nx*.25)-6) 'px';
?76????????????????}
?77????????????????txt.style.top?=?Math.round(-(w*rImg)*.25) 'px';
?78????????????????tit.style.top?=?Math.round((w*rImg)*.33) 'px';
?79????????????}
?80????????}
?81????}
?82}
?83
?84function?run(){
?85????for(j?in?O)O[j].anim();
?86????setTimeout("run()",?16);
?87}
?88
?89function?doResize(){
?90????tit.style.width?=?Math.round(nx*.25) 'px';
?91????txt.style.width?=?Math.round(nx*.25) 'px';
?92????tit.style.fontSize?=?(nx/30) 'px';
?93????txt.style.fontSize?=?(nx/70) 'px';
?94????with(box.style){
?95????????width??=?Math.round(W) 'px';
?96????????height?=?Math.round(H) 'px';
?97????????left???=?Math.round(nx/2-W/2) 'px';
?98????????top????=?Math.round(ny/2-H/2) 'px';
?99????}
100}
101
102function?resize(){
103????nx?=?scr.offsetWidth;
104????ny?=?scr.offsetHeight;
105????W??=??nx*90/100;
106????si?=?(W-((nI 1)*6))/((ZOOM*100) ((nI-1)*100));
107????H??=?(100*si*rImg) 14;
108????doResize();
109}
110onresize?=?resize;
111
112onload?=?function(){
113????scr?=?document.getElementById("screen");
114????box?=?document.getElementById("box");
115????tit?=?document.getElementById("tit");
116????txt?=?document.getElementById("txt");
117????img?=?box.getElementsByTagName("img");
118
119????Lnk?=?document.getElementById("lnk").getElementsByTagName("a");
120????nI??=?img.length;
121????ZOOM?=?nI;
122????rImg?=?img[0].height/img[0].width;
123????resize();
124????s?=?ZOOM?*?100;
125????x?=?0;
126????tit.innerHTML?=?img[0].title;
127????txt.innerHTML?=?img[0].alt;
128????for(i=0;?i<nI;?i )?{
129????????var?t?=?img[i].alt;
130????????if(Lnk[i].href!="")?t ='<br><a?href="' Lnk[i].href '">' Lnk[i].innerHTML '</a>';
131????????O[i]?=?new?CObj(i,?s,?x,?t,?img[i].title);
132????????img[i].alt?=?"";
133????????img[i].title?=?"";
134????????img[i].onmousedown?=?new?Function("return?false;");
135????????img[i].onmouseover?=?new?Function('O[' i '].over();');
136????????if(Lnk[i].href!=""){
137????????????/*?====?hyperlink?====?*/
138????????????img[i].onclick?=?new?Function('window.open("' Lnk[i].href '","_blank");');
139????????}
140????????x? =?s;
141????????s?=?100;
142????}
143????box.style.visibility?=?"visible";
144????run();
145}
146
147
更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的浮动层图片鼠标指针移到自动放大的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：文字阴影-CSS Text-Shadow
下一篇： koa2 mongdb 做后端接口的小d