实现效果:当鼠标指向商品图片时,图片会自动放大。

      

 <!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实现网站图片放大效果的更多相关文章

  1. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  2. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  4. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  5. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  6. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  7. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  8. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  9. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

随机推荐

  1. Firemonkey 移动平台 Form 显示使用 ShowModal 范例

    procedure TForm1.Button1Click(Sender: TObject); begin Form2 := TForm2.Create(Self); Form2.ShowModal( ...

  2. 常见linux命令释义(第五天)——shell变量学习

    由于时间有限,我写这篇博客的时间上限为30分钟.仅作为学习笔记而用,内容会尽量的讲清楚.如果讲的不清楚,你来打我啊! 玩笑开过,正式开始今天的学习. linux系统的中一些命令是在/bin下,这个是一 ...

  3. 说说jsonp

    什么是jsonp jsonp充其量只能说是一种"方法".它可以让页面从其他域中获取资料.   首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同 ...

  4. 烂泥:【解决】Ubuntu下使用SSH连接centos系统很慢

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天在Ubuntu下使用SSH连接centos系统,发现连接很慢.建议一个连接大约需要30s.很是坑爹,如下: 后来查询相关资料,发现这个是Ubunt ...

  5. Unity3D ShaderLab立方体图的法线渲染

    Unity3D ShaderLab立方体图的法线渲染 某些情况下,我们希望立方体图的材质球上产生法线效果,来更多的表现细节,比如菱形花纹的玻璃,冰块的表面. 在帧数的协调下,我们可以通过input结构 ...

  6. Codeforces Round #326 (Div. 2) C. Duff and Weight Lifting 水题

    C. Duff and Weight Lifting Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest ...

  7. Solr 安装与集成IK中文分词器

    创建wangchuanfu core 1.  在example目录下创建wangchuanfu-solr文件夹: 2.  将./solr下的solr.xml拷贝到wangchuanfu-solr目录下 ...

  8. Codeforces Round #346 (Div. 2) C Tanya and Toys

    C. Tanya and Toys 题目链接http://codeforces.com/contest/659/problem/C Description In Berland recently a ...

  9. iOS 内存泄漏

      我一直以为现在都是自动内存管理了,还哪有什么内存泄漏啊.一检测才知道,不是我太相信Xcode了,就是我太单纯了.iOS开发中遇到的内存泄漏主要有几下几种: (1)对象不能释放.使用Core Fou ...

  10. mysql-5.7.12安装

    CentOS 7的yum源中貌似没有正常安装mysql时的mysql-sever文件,需要去官网上下载   # wget http://dev.mysql.com/get/mysql-communit ...