JS模仿腾讯图片站的图片翻页按钮效果完整实例
本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>模仿腾讯图片翻页</title> <style type="text/css"> *{ margin:none; padding:none; } body{ background:#000000; } #tip{ position:absolute; width:564px; height:362px; top:-362px; background:url(../img/TencentImg/tipLayer.png); } #left{ position:absolute; width:101px; height:95px; background:url(../img/TencentImg/left.png); border:1px solid #f2f2f2; display:none; cursor:hand; } #right{ position:absolute; width:101px; height:95px; background:url(../img/TencentImg/right.png); border:1px solid #f2f2f2; display:none; cursor:hand; } #mouseXPosition{ width:30px; height:20px; color:#ffffff; display:inline; } #mouseYPosition{ width:30px; height:20px; color:#ffffff; display:inline; } #divTop{ width:30px; height:20px; color:#ffffff; display:inline; } </style> <script type="text/javascript"> function init(){ var ml = document.body.clientWidth/2 - 40; document.getElementById("left").style.pixelTop = 300; document.getElementById("right").style.pixelTop = 300; document.getElementById("left").style.pixelLeft = ml - 101*4; document.getElementById("right").style.pixelLeft = ml + 101*4; var tip = document.getElementById("tip"); var initH = (document.body.clientWidth - tip.offsetWidth)/2; document.getElementById("tip").style.left = initH; document.getElementById("tip").style.pixelTop = -362; } function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; function mouseMove(e){ e = e || window.event; var mousePos = mousePosition(e); var mid = document.body.clientWidth/2; document.getElementById('mouseXPosition').innerHTML = mousePos.x; document.getElementById('mouseYPosition').innerHTML = mousePos.y; if(mousePos.x < mid){ document.getElementById("left").style.display = "block"; document.getElementById("right").style.display = "none"; }else if(mousePos.x > mid){ document.getElementById("right").style.display = "block"; document.getElementById("left").style.display = "none"; } } function show(){ if(document.getElementById("tip").style.pixelTop < 80){ document.getElementById("tip").style.pixelTop += 20; document.getElementById("divTop").innerHTML = document.getElementById("tip").style.pixelTop; setTimeout("show()",10) } } function hide(){ if(document.getElementById("tip").style.pixelTop > -362){ document.getElementById("tip").style.pixelTop -= 20; document.getElementById("divTop").innerHTML = document.getElementById("tip").style.pixelTop; setTimeout("hide()",10) } } </script> </head> <body onload="init()"> <div id = "left" onclick="hide()"></div> <div id = "right" onclick="show()"></div> <span style = "color:#ffffff;">鼠标 X 轴:</span> <div id="mouseXPosition">0</div><br/> <span style = "color:#ffffff">鼠标 Y 轴:</span> <div id="mouseYPosition">0</div><br/> <span style = "color:#ffffff;font-size:13px;">图片上边距:</span> <div id = "divTop">0</div> <div id = "tip">0</div> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript高级程序设计 读书笔记之九 本地对象Array
本地对象Array,数组等操作函数2012-02-02详解如何在JavaScript中无缝地集成和使用Python代码
这篇文章主要目标是帮助诸位理解如何在JavaScript中无缝地集成和使用Python代码,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2023-06-06解决option标签selected="selected"属性失效的问题
下面小编就为大家带来一篇解决option标签selected="selected"属性失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望对大家有所帮助2017-11-11JavaScript中的console.assert()函数介绍
这篇文章主要介绍了JavaScript中的console.assert()函数介绍,assert()函数是一个调试中经常使用的断言工具函数,需要的朋友可以参考下2014-12-12
最新评论