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 使用手册(四)
Sep 23 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
javascript 闭包详解
Feb 15 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
浅谈js中的bind
Mar 18 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
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小偷相关截取函数备忘
2010/11/28 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
对python多线程与global变量详解
2018/11/09 Python
如何通过python画loss曲线的方法
2019/06/26 Python
用Python配平化学方程式的方法
2019/07/20 Python
python SocketServer源码深入解读
2019/09/17 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
增大python字体的方法步骤
2020/07/05 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
校园奶茶店创业计划书
2014/01/23 职场文书
给实习单位的感谢信
2014/02/01 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
出国导师推荐信
2015/03/25 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
文艺节目主持词
2015/07/06 职场文书