jQuery实现网站图片放大效果
实现效果:当鼠标指向商品图片时,图片会自动放大。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字放大</title> <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
} /* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(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>";
$("body").append(tooltip); $("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
})
.show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
});
</script>
</head>
<body>
<h2>图片放大</h2>
<ul>
<li>
<p><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果iPod"><img src="data:images/apple_1.jpg" alt="苹果iPod"></a></p>
</li>
<li>
<p><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果iPod nano"><img src="data:images/apple_2.jpg" alt="苹果iPod nano"></a></p>
</li>
<li>
<p><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果iPhone"><img src="data:images/apple_3.jpg" alt="苹果iPhone"></a></p>
</li>
<li>
<p><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"></a></p>
</li>
</ul>
</body>
</html>
jQuery实现网站图片放大效果的更多相关文章
- magento中如何实现产品图片放大效果
Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 为BlueLake主题增加图片放大效果
fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...
- js图片放大效果
实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- ASP.NET中使用jQuery插件实现图片幻灯效果
参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- jQuery点击图片放大拖动查看效果
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
随机推荐
- Ubuntu14.04安装配置Open vSwitch
最近在研究学习Open vSwitch,准备在本地Ubuntu14.04机器上安装一下,并基于其创建一些KVM虚拟机,下面就简要记录下在Ubuntu14.04系统上安装Open vSwitch的过程. ...
- Linux主机硬盘的主要规划
系统对于硬盘的需求跟刚刚提到的主机开放的服务有关,那么除了这点之外,还有没有其他的注意事项?当然有,那就是数据的分类与数据安全性的考虑,即当主机系统的硬件出现问题时,你的档案数据能否安全的保存. 前篇 ...
- 240. Search a 2D Matrix II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- 使用Spring Aop验证方法参数是否合法
先定义两个注解类ValidateGroup 和 ValidateFiled ValidateGroup .java package com.zf.ann; import java.lang.annot ...
- eBay_Relist(退换刊登费)
如果物品首次刊登结束时没有人中标,或是买家并没有付款完成交易,那么卖家以通过重新刊登的方法来再次销售.如果该物品在第二次刊登时成功售出,且满足eBay的重新刊登退费条件,那么eBay便会退还重新刊登的 ...
- 最大连续子序列和问题(Maximum Consecutive Subsequence Sum)
该算法的定义是:给出一个int序列,元素有正有负,找出其中的最大连续子序列的和. 例如:-2,11,-4,13,-5-2,:最大和为20(11,-4, 13). 怎么考虑这个问题呢? 要充分利用,连续 ...
- 去除包裹的a标签
<div id="test"> <a href="http://www.cnblogs.com">Link 1</a> ...
- hdu3416 最短路+最大流
题意:有 n 点 m 边,有出发点 A 到达点 B ,只允许走原图中的最短路,但每条边只允许被走一次,问最多能找出多少条边不重复的最短路 一开始做到的时候瞎做了一发最短路,WA了之后也知道显然不对,就 ...
- liunx之:rpm包安装
使用rpm命令查询软件包: 1.查询系统中安装的所有RPM包 $ rpm -qa 查询当前linux系统中已经安装的软件包. 例:$ rpm -qa | grep -i x11 | head -3 察 ...
- 论文笔记之:Fully Convolutional Attention Localization Networks: Efficient Attention Localization for Fine-Grained Recognition
Fully Convolutional Attention Localization Networks: Efficient Attention Localization for Fine-Grain ...