jQuery实现类似淘宝网图片放大效果的方法


Posted in Javascript onJuly 08, 2015

本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>类似淘宝网的图片放大代码</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<style type="text/css">
#tip {position:absolute;color:#333;display:none;}
#tip s {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}
.tip {width:82px;height:82px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
$(function(){
  $('.tip').mouseover(function(){
   var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
   $('body').append($tip);
   $('#tip').show('fast');
  }).mouseout(function(){
   $('#tip').remove();
  }).mousemove(function(e){
   $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"})
  })
})
</script>
<p> </p>
<a href="/"><img class="tip" src="/jscss/demoimg/201012/1.jpg" /></a>
<a href="#"><img class="tip" src="/jscss/demoimg/201012/2.jpg" /></a>
<a href="#" ><img class="tip" src="/jscss/demoimg/201012/3.jpg" /></a>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
javascript拖拽应用实例
Mar 25 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 #Javascript
详细分析JavaScript变量类型
Jul 08 #Javascript
js实现图片点击左右轮播
Jul 08 #Javascript
javascript获取重复次数最多的字符
Jul 08 #Javascript
javascript连续赋值问题
Jul 08 #Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 #Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 #Javascript
You might like
php配合jquery实现增删操作具体实例
2013/12/12 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
详解tween.js 中文使用指南
2018/01/05 Javascript
python妙用之编码的转换详解
2017/04/21 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
以下的初始化有什么区别
2013/12/16 面试题
市三好学生主要事迹
2014/01/28 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
自我鉴定总结
2014/03/24 职场文书
销售经理竞聘书
2014/03/31 职场文书
出售房屋协议书范本
2014/10/06 职场文书
考研英语复习计划
2015/01/19 职场文书
交通事故调解协议书
2015/05/20 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Python之matplotlib绘制饼图
2022/04/13 Python
Windows server 2016服务器基本设置
2022/08/14 Servers