您的位置:首页 - 教程 - 网页特效 - 正文
JS鼠标悬浮图片左右箭头点击访问上下页
最近HoverTreeTop项目增加了图片浏览功能,每个页面显示一张图片,提供上下页链接,同时为了方便操作,也增加了点击图片访问上下页功能,使用javascript实现,当鼠标在图片上移动时,如果在图片的右半边,就显示向右箭头,点击访问下一页,如果是在图片的左半边,则显示向左箭头,点击访问上一页。支持Chrome,火狐,Edeg,IE等浏览器。

体验效果:
http://hovertree.com/top/htimg/vhonho/4c42166934eacc92.htm

点击进去后,把光标在图片上移动,就会出现向左或者向右的箭头。

效果图如下:


代码如下:
<div id="hewenqiArticle">
<h2>好后悔,上学时怎么没追她呢</h2>
<img id='hovertreePicture' src='http://hovertree.com/top/htpic/vhonho/4c42166934eacc92.jpg'/>
<div id="htprenext">
<ul class="pager">
<li class="previous"><a href='http://hovertree.com/top/htimg/vhonho/6fbe78611c103afb.htm' id='htPre'>&larr; 上一页</a></li>
<li class="next"><a href='http://hovertree.com/top/htimg/vhonho/5431d20f23a2aec4.htm' id='htNext'>下一页 &rarr;</a></li>
</ul>
</div>
</div>
<script>
var h_nextLink = document.getElementById("htNext"), h_preLink = document.getElementById("htPre");
var h_nexturl = "", h_preurl = "";
if (h_nextLink != null) {
h_nexturl = h_nextLink.getAttribute("href");
}
if (h_preLink != null) {
h_preurl = h_preLink.getAttribute("href");
}
var h_hwqImg=document.getElementById("hovertreePicture");
function hovertreePreNext(hwqImg,preUrl,nextUrl) {
h_hwqImg.addEventListener("mousemove", function (event) {
if (event.offsetX * 2 > this.width) {
if (nextUrl != "") { this.style.cursor = 'url(http://hovertree.com/top/themes/img/arr_right.cur),auto'; }
else { this.style.cursor = 'auto'; }
}
else {
if (preUrl != "") { this.style.cursor = 'url(http://hovertree.com/top/themes/img/arr_left.cur),auto'; }
else { this.style.cursor = 'auto'; }
}
})
h_hwqImg.addEventListener("click", function (event) {
if (event.offsetX * 2 > this.width) {
if (h_nexturl != "") {
location = nextUrl;
}
}
else {
if (preUrl != "") {
location = preUrl;
}
}
})
}
hovertreePreNext(h_hwqImg, h_preurl, h_nexturl);
</script>


蓦然回首情已远
身不由已在天边
才明白爱恨情仇
最伤最痛是后悔

评论: