这是html:
Home > Web Front-end > JS Tutorial > body text

JS CSS implements a bubble prompt box_javascript skills

WBOY
Release: 2016-05-16 17:25:17
Original
1559 people have browsed it

Share a bubble prompt box. The techniques practiced are: (1) JS responds to mouse events; (2) Pure CSS makes triangles.

The effect is like this:
JS CSS implements a bubble prompt box_javascript skills
This is the html:

Copy the code The code is as follows :





< title>Bubble dialog



Bubble dialog

When the mouse is placed here, a bubble dialog box will pop up.

[Click to edit. ]

 


This is the JavaScript code:


< ;/P>

function showToolTip(e,text){ <br>if(document.all)e = event; <br>var obj = document.getElementById ('bubble_tooltip'); <br>var obj2 = document.getElementById('bubble_tooltip_content'); <br>obj2.innerHTML = text; <br>var st = Math.max(document.body.scrollTop,document.documentElement. scrollTop); <br>if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; <br>var leftPos = e.clientX 20; //clientX event attribute returns when the event The horizontal coordinate of the mouse pointer relative to the browser page (or client area) when triggered <br>if(leftPos<0)leftPos = 0; <BR>obj.style.left = leftPos 'px'; <BR>obj. style.top = e.clientY st 'px'; <BR>obj.style.display = 'block'; <BR>fadeIn(obj,5,100); <BR>} <br><br>function hideToolTip() <BR>{ <BR>var obj = document.getElementById('bubble_tooltip'); <BR>//obj.style.display = 'none'; <BR>fadeOut(obj,5,0); <BR>} <br><br>//Set element transparency, the transparency value is calculated according to IE rules, that is, 0~100 <BR>function SetOpacity(ev, v){ <BR>ev.filters ? ev.style.filter = 'alpha(opacity =' v ')' : ev.style.opacity = v / 100; <BR>} <br><br>//Fade in effect (including fade in to specified transparency) <BR>function fadeIn(elem, speed, opacity) { <BR>/* <BR>* Parameter description<BR>* elem==> Elements that need to be faded in <br>* speed==>gt; Fade-in speed, positive integer (optional) <br>* opacity== >Fade to the specified transparency, 0~100 (optional) <br>*/ <br>speed = speed || 20; <br>opacity = opacity || 100; <br>//Display the element and The element value is 0 transparency (invisible) <br>elem.style.display = 'block'; <br>SetOpacity(elem, 0); <br>//Initialization transparency change value is 0 <br>var val = 0 ; <br>//Loop to increment the transparency value by 2, that is, the fade-in effect <br>(function(){ <br>SetOpacity(elem, val); <br>val = 5; <br>if (val < = opacity) { <BR>setTimeout(arguments.callee, speed) <BR>} <BR>})(); <BR>} <br><br>//Fade out effect (including fade out to specified transparency) <BR>function fadeOut(elem, speed, opacity){ <BR>/* <BR>* Parameter description<BR>* elem==>Elements that need to be faded in<br>* speed==>Fade in speed, positive integer ( Optional) <br>* opacity==> Fade to the specified transparency, 0~100 (optional) <br>*/ <br>speed = speed || 20; <br>opacity = opacity || 0; <br>//Initialize the transparency change value to 0 <br>var val = 100; <br>//Loop to decrease the transparency value by 5, that is, the fade-out effect <br>(function(){ <br>SetOpacity(elem, val); <br>val -= 5; <br>if (val >= opacity) { <br>setTimeout(arguments.callee, speed); <br>}else if (val < 0) { <br>//Hide the element after the element transparency is 0 <br>elem.style.display = 'none'; <br>} <br>})(); <br>}





 
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