不知道博友们有没有这么一种需求,或是一个隐性需求--“可预判的超链接打开方式”
--------------------------------------
建议iteye也整个这样的功能吧,因为我用的时候总想使用_blank方式,另起页面,但始终手动右键打开方式的,总这样还是很烦啊!!!
--------------------------------------
问题描述:
所谓“可预判的超链接打开方式”:当我们要点击页面链接的时候,有时我们想以刷新本页面方式打开超链接;有时我们想以新打开一个标签的方式打开超链接。但是,我们当前这个超链接到底是这其中的哪一种,我们并不知道。那么我们可不可以给用户在任意的超链接上提供一个可选的打开方式呢?当然我想是可以的。
问题解决方式:
我们使用一个js脚本,当用户鼠标滑到超链接上方时,将所有的超链接都给一个可选的打开方式。如下图,红色即为脚本效果。
核心代码
//这个就是提示框
var div = document.createElement("div");
div.style.cssText = "text-align:center;padding:3px;" + "height:20px;" + "background:url('imgs/tb-bg.gif');" + "border: 1px solid;" + "border-color: #99BBE8;" + "border-top-color: #99BBE8;" + "border-right-color: #99BBE8;" + "border-bottom-color: #99BBE8 ;" + "border-left-color: #99BBE8;";
//刷新自己链接
var self = newLink();
div.appendChild(self);
//分割符
var separation = newSeparation();
div.appendChild(separation);
//新页面
var blank = newLink();
div.appendChild(blank);
//分割符
var separation = newSeparation();
div.appendChild(separation);
//关于
var about = document.createElement("label");
var aboutLink = newLink();
aboutLink.href = "http://www.seehope.net";
aboutLink.innerHTML = "首页";
about.appendChild(aboutLink);
div.appendChild(about);
//页面加载完,初始化超链接工具
window.onload = initSmartLink;
function initSmartLink() {
var links = document.getElementsByTagName("a");
var len = links.length;
//为每个超链接绑定一个链接工具
for (var i = 0; i < len; i++) {
var link = links[i];
link.onmouseover = goX;
}
//点击body清除链接工具
document.body.onclick = function () {
this.removeChild(div);
};
//鼠标离开链接工具,释放该工具
/**/
div.onclick = function () {
document.body.removeChild(this);
};
}
//打开方式
function goX() {
var o = this;
var left = o.offsetLeft;
var top = o.offsetTop;
var p = o.offsetParent;
while (p !== null) {
left += p.offsetLeft;
top += p.offsetTop;
p = p.offsetParent;
}
var width = o.offsetWidth;
var height = o.offsetHeight;
//刷新自己
self.href = o.href;
self.innerHTML = "\u5f53\u524d\u9875\u9762\u52a0\u8f7d";
//新页面
blank.href = o.href;
blank.innerHTML = "\u65b0\u9875\u9762\u52a0\u8f7d";
blank.target = "_blank";
div.style.position = "absolute";
div.style.top = top + height;
div.style.left = left;
document.body.appendChild(div);
//alert("top=" + top + ",left=" + left + ",width=" + width + ",height=" + height+"-"+o.href);
}
function newLink() {
var myLink = document.createElement("a");
myLink.style.cssText = "color:black;line-height:20px;" + "text-decoration: none;" + "font: normal 11px arial,tahoma,verdana,helvetica;";
myLink.onmouseover = function () {
this.style.cssText = "text-decoration: underline;" + "color:black;line-height:20px;" + "font: normal 11px arial,tahoma,verdana,helvetica;";
};
myLink.onmouseout = function () {
this.style.cssText = "text-decoration: none;" + "color:black;line-height:20px;" + "font: normal 11px arial,tahoma,verdana,helvetica;";
};
return myLink;
}
function newSeparation() {
var separation = document.createElement("label");
//用于判断是否为ie
var t = -[1, ];
if (-[1, ]) {//非IE
separation.style.cssText = "font-size:16px;color:#ffffff;line-height:20px;width:6px";
} else {//ie
separation.style.cssText = "font-weight: bold;font-size:18px;color:#ffffff;line-height:20px;width:6px";
}
separation.innerHTML = "|";
return separation;
}
写得不好的地方,请各位博友见谅。当然,如果各位博友有其他更好的想法,希望多多交流。谢谢!
我把测试代码放到了这个网站http://www.seehope.net/,大家可以滑动鼠标到任意一个超链接进行测试,希望大家指正。
- 大小: 40.9 KB
分享到:
相关推荐
致礼2022_成熟的数据合规年——监管动态总结与趋势预判.pdf 致礼2022_成熟的数据合规年——监管动态总结与趋势预判.pdf 致礼2022_成熟的数据合规年——监管动态总结与趋势预判.pdf 致礼2022_成熟的数据合规年——...
2021年全国楼市年报暨宏观经济及市场趋势预判.pdf 2021年全国楼市年报暨宏观经济及市场趋势预判.pdf 2021年全国楼市年报暨宏观经济及市场趋势预判.pdf 2021年全国楼市年报暨宏观经济及市场趋势预判.pdf 2021年全国...
2019中国私域流量现状剖析及发展前景预判分析报告.pdf
通信行业专题报告:共建共享方式预判及影响测算
通信行业专题报告:共建共享方式预判及影响测算.pdf
2019中国AIoT行业前沿应用及前景预判分析报告
本插件可以实现预判用户输入单词下拉列表,类似于百度搜索的下拉词。 2.插件说明: 首先建立一个HTML和Javascript代码。这个代码根据用户已经输入的字母,提供一个以这个字母开头的单词或短语选择列表。...
基于机器学习算法的LTE高投诉小区预判方法.pdf
通信行业专题报告:共建共享方式预判及影响测算-0827-财通证券-13页.pdf
2019中国高考志愿填报行业用户需求及市场潜力预判.pdf
机械设备行业深度专题:如何预判通用自动化设备行业复苏?.pdf
2020年杭州市房地产市场研究分析暨后市预判报告.pdf
2019中国汽车金融行业现状剖析及发展前景预判分析报告.pdf
2020年宁波市房地产市场深度研究分析暨后市预判报告.pdf
2-美联储研究系列之(二):加息博弈,如何预判窗口和建立预期?
一种基于服务时间预判的异构网络呼叫接入控制算法,王希栋,,802.16e TDD OFDMA MAN (城域网)是一项3G标准,802.16e系统可以提供广阔覆盖和高速数据速率。同时,作为一种城域网技术,802.16e对于实时业�
人工智能的历史辩争、风险审视与未来预判——以对教育发展的影响为重点.pdf
《半导体研究》系列之一:半导体的第二次跨越:复盘与预判.pdf
《半导体研究》:半导体的第二次跨越:复盘与预判(2021)(73页).pdf
中国移动互联网行业2020年度大报告(上篇):关键词总结、趋势预判、年度榜单.pdf