教程集 > 脚本编程 > javascript > 正文漂亮的tip效果

漂亮的tip效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供漂亮的tip效果等资源，欢迎您收藏本站，我们将为您提供最新的漂亮的tip效果资源

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>漂亮的tip效果</title>  <style type="text/css" media="screen">    </style>  <script language="JavaScript" type="text/JavaScript">  //////////////////////////////////////////////////////////////////  // qTip - CSS Tool Tips - by Craig Erskine  // http://qrayg.com | http://solardreamstudios.com  //  // Inspired by code from Travis Beckham  // http://www.squidfingers.com | http://www.podlob.com  //////////////////////////////////////////////////////////////////  var qTipTag = "a"; //Which tag do you want to qTip-ize? Keep it lowercase!//  var qTipX = -30; //This is qTip's X offset//  var qTipY = 25; //This is qTip's Y offset//  //There's No need to edit anything below this line//  tooltip = {    name : "qTip",    offsetX : qTipX,    offsetY : qTipY,    tip : null  }  tooltip.init = function () {  	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";  	if(!tipContainerID){ var tipContainerID = "qTip";}  	var tipContainer = document.getElementById(tipContainerID);  	if(!tipContainer) {  	  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");  		tipContainer.setAttribute("id", tipContainerID);  	  document.getElementsByTagName("body").item(0).appendChild(tipContainer);  	}  	if (!document.getElementById) return;  	this.tip = document.getElementById (this.name);  	if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};  	var a, sTitle;  	var anchors = document.getElementsByTagName (qTipTag);  	for (var i = 0; i < anchors.length; i   ) {  		a = anchors[i];  		sTitle = a.getAttribute("title");  		if(sTitle) {  			a.setAttribute("tiptitle", sTitle);  			a.removeAttribute("title");  			a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};  			a.onmouseout = function() {tooltip.hide()};  		}  	}  }  tooltip.move = function (evt) {  	var x=0, y=0;  	if (document.all) {//IE  		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;  		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;  		x  = window.event.clientX;  		y  = window.event.clientY;  		  	} else {//Good Browsers  		x = evt.pageX;  		y = evt.pageY;  	}  	this.tip.style.left = (x   this.offsetX)   "px";  	this.tip.style.top = (y   this.offsetY)   "px";  }  tooltip.show = function (text) {  	if (!this.tip) return;  	this.tip.innerHTML = text;  	this.tip.style.display = "block";  }  tooltip.hide = function () {  	if (!this.tip) return;  	this.tip.innerHTML = "";  	this.tip.style.display = "none";  }  window.onload = function () {  	tooltip.init ();  }  </script>  </head>  <body>  <h1>qTip - CSS Tooltips</h1>  <hr />  <p>Hover over the link text to see a tooltip  appear and follow the mouse.</p>  <p>qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!</p>  <hr />  <p>» View the CSS<br />  » View the JavaScript</p>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Illustrator设计逼真漂亮的烛光效果制作教程
 photoshop制作出漂亮花朵教程
 Illustrator结合photoshop制作网页中的超漂亮的3D立体文字教程详解
 Illustrator仿照photoshop蒙版绘制漂亮透明变化的月亮效果教程
 漂亮的仿国外网站图片展示效果
 jQuery圆角插件 jQuery Corners
photoshop制作漂亮的星光笔刷效果教程
 photoshop制作一个漂亮的光盘封面效果图教程
 photoshop制作漂亮心形云彩教程
 jQuery信息提示插件 Dynamic tooltip

上一篇：简单js弹出菜单下一篇：文字上下滚动代码

[关闭]

漂亮的tip效果

最近更新

浏览排行