jQuery鼠标移到小图显示大图效果
首先需要引入jQuery
1.官网jquery压缩版引用地址:
3.1.1版本:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
2.百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
3.微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
亲测都可用,谷歌的不太好用,便不再加进去.
.show_tooltip li {
list-style:none;
display:inline;
padding:5px 5px 5px 5px;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:3px 3px 3px 3px;
color:#333;
display:none;
}
用到的JavaScript:
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
调用实例:
<ul class="show_tooltip">
<li><a href="image/slide1.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide1.png" width="150" alt="化无语 战场原黑仪"></a></li>
<li><a href="image/slide2.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide2.png" alt="化无语 战场原黑仪" width="150"></a>
</li>
<li><a href="image/slide3.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide3.png" width="150" alt="化无语 战场原黑仪"></a></li>
</ul>
效果图:
微信扫描下方的二维码阅读本文
阅读剩余
版权声明:
标题:jQuery鼠标移到小图显示大图效果
作者:admin
链接:https://www.kmtky.com/21.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
标题:jQuery鼠标移到小图显示大图效果
作者:admin
链接:https://www.kmtky.com/21.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
THE END