Heim > Web-Frontend > js-Tutorial > Bewegen Sie die Maus über das Bild, um die Anzeige anstelle der Lupe zu vergrößern. effect_javascript-Fähigkeiten

Bewegen Sie die Maus über das Bild, um die Anzeige anstelle der Lupe zu vergrößern. effect_javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:44:30
Original
1489 Leute haben es durchsucht

ToopTip.js:

复制代码 代码如下:

function getViewportHeight() {
if (window.innerHeight!=window.undefined) return window.innerHeight;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;

return window.undefined;
}
function getViewportWidth() {
if (window.innerWidth!=window.undefined) return window.innerWidth;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;

return window.undefined;
}

/**
* Ruft den echten Scroll-Top ab
*/
function getScrollTop() {
if (self.pageYOffset) // alle außer Explorer
{
return self. pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
return document.documentElement.scrollTop;
}
else if (document.body) // alle anderen Explorer
{
return document.body.scrollTop;
}
}
function getScrollLeft() {
if (self.pageXOffset) // alle außer Explorer
{
return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
return document.documentElement.scrollLeft;
}
else if (document.body) // alle anderen Explorer
{
return document.body.scrollLeft;
}
}
/*
[html]
渐变的弹出图片
使用方法:
将ToolTip.js包含在网页body的结束标签后
调用方法:
[code]


必须CSS样式
复制代码 代码如下:

.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
*/
//--Variablen initialisieren--
var rT=true;//Bildübergang zulassen
var bT=true;//Bild ein- und ausblenden zulassen
var tw =150 ;//Breite des Eingabeaufforderungsfelds
var endaction=false;//Endanimation
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all; ie4 = document .all;
offsetY = 20;
var toolTip;
function initToolTips()
{
tempDiv = document.createElement(" div") ;
tempDiv.id = "toolTipLayer";
tempDiv.style.position = "absolute";
tempDiv.style.display = "none";
document.body.appendChild( tempDiv);
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer" ).style ;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE); .visibility = "visible";
toolTipSTYLE.display = "none";
document.onmousemove = moveToMouseLoc; )
{
try {
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = " versteckt";
}
else
{
//-Bildübergang, Ausblendverarbeitung--
if (!endaction) {toolTipSTYLE.display = "none";}
if ( rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply(); >document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play(); ) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 ||. document .all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document. all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none ";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//------------------- --
}
}
else // show
{
if(!fg) fg = "#777777"
if(!bg) bg = "#eeeee" ;
var content =
''
'
'
< /table> ;';

if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.visibility = " sichtbar" ;
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if (ie4)
{
document.all("toolTipLayer").innerHTML=content
toolTipSTYLE.display='block'
//--Bildübergang, Einblendverarbeitung- -
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0; document.all ("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all( "msg1" ).filters[0].opacity=cssopaction;
if (rT) document.all("msg1").filters[1].Play(); "msg1" ).filters[2].Play();
//-------
}
}
} Catch(e) {}
}
function moveToMouseLoc(e)
{
var scrollTop = getScrollTop();
var scrollLeft = getScrollLeft(); ns4||. ns6)
{
x = e.pageX scrollLeft;
y = e.pageY - scrollTop;
}
x = event.clientX scrollLeft;
y = event.clientY;
}

if (x-scrollLeft > getViewportWidth() / 2) {
x = x - document.getElementById("toolTipLayer") .offsetWidth - 2 * offsetX;
}

if ((y document.getElementById("toolTipLayer").offsetHeight offsetY)>getViewportHeight()) {
y = getViewportHeight()-document .getElementById( "toolTipLayer").offsetHeight-offsetY;
toolTipSTYLE.left = (x offsetX) 'px';
toolTipSTYLE.top = (y offsetY scrollTop) 'px'; return true;
}
initToolTips();


Hauptseite:
Index.css einführen




Code kopieren


Der Code lautet wie folgt:


















引入ToopTip.js
复制代码 代码如下:





index.css:
复制代码 代码如下:

/*首页*/
html { overflow:-moz-scrollbars-vertical; } /*Firefox-Bildlaufleiste immer anzeigen*/
body{ font:12px/22px "宋体"; word-break:break-all; text-align:left; Hintergrund:#C0C0C0; color:#4E4E4E;}
ul,li{ list-style:none;}
a{ color:#333; text-decoration:none;}
a:hover{ color:#ff722d; text-decoration:none;}
img{ border:0;}
a img,a:hover img{ border:0;}
.latestWeb{ width:980px; margin:10px auto 0;}
.latestWeb ul{ overflow:hidden; _height:1%;}
.latestWeb li{ float:left; border:1px solid #EBEAEA; Breite: 150 Pixel; Polsterung:10px; Rand:14px 14px 0 0; }
.trans_msg{ filter:alpha(opacity=100,enabled=1) RevealTrans(duration=.2,transition=1) blendtrans(duration=.2);}
div.bodycontent{font-family: Arial, Helvetica, serifenlos;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontent ul{margin -left:0px}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage