Home > Web Front-end > JS Tutorial > Move the mouse over the picture to enlarge the display instead of the magnifying glass effect_javascript skills

Move the mouse over the picture to enlarge the display instead of the magnifying glass effect_javascript skills

WBOY
Release: 2016-05-16 16:44:30
Original
1494 people have browsed it

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;
}

/**
* Gets the real scroll top
*/
function getScrollTop() {
if (self.pageYOffset) // all except Explorer
{
return self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
return document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
return document.body.scrollTop;
}
}
function getScrollLeft() {
if (self.pageXOffset) // all except Explorer
{
return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
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);
}
*/
//--Initialize variables--
var rT=true;//Allow image transition
var bT=true;//Allow image fade in and out
var tw=150 ;//Prompt box width
var endaction=false;//End animation
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document .all;
offsetX = 10;
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);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
try {
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//-Image transition, fade-out processing--
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();
if (bT) 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 = "#eeeeee";
var content =
''
'
' msg
'

if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible" ;
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if (ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
//--Image transition, fade-in processing--
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0;
if (rT) 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();
if (bT) document.all("msg1" ).filters[2].Play();
//----------------------
}
}
} catch(e) {}
}
function moveToMouseLoc(e)
{
var scrollTop = getScrollTop();
var scrollLeft = getScrollLeft();
if(ns4|| ns6)
{
x = e.pageX scrollLeft;
y = e.pageY - scrollTop;
}
else
{
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();

Main page:
Introduce index.css
Copy code The code is as follows:


















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





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

/*首页*/
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
body{ font:12px/22px "宋体"; word-break:break-all; text-align:left; background:#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; width:150px; padding:10px; margin: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, sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontent ul{margin-left:0px}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template