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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一

  • jQuery插件zoom实现图片全屏放大弹出层特效

    jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

  • jquery图片滚动放大代码分享（2）

    jquery图片滚动放大代码分享（2）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

  • 基于jquery实现图片放大功能

    本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下 图片放大功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图.如果自己写这些代码,会很痛苦.官方网站上提供了一个类库--jquery.jqzoom.js:只需要引入次类库,引用此类库,添加一些css代码即可实现此功能: HTML框架如下: <div class="jqzoom"> <img src="images/pro_img/blue_one

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • 基于jQuery仿淘宝产品图片放大镜代码分享

    基于jQuery仿淘宝产品图片放大镜代码分享

    这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • JQuery控制图片由中心点逐渐放大效果

    JQuery控制图片由中心点逐渐放大效果

    有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的.如下图: 从中心点进行缩放 实现代码如下: <meta charset="utf-8"> <style type="text/css"> #div1{ width:600px; height:400px; margin:50px auto; position:rel

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

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

    本文实例讲述了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="

  • JavaScript实现淘宝网图片的局部放大功能

    JavaScript实现淘宝网图片的局部放大功能

    本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下 要实现的效果如下: <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>demo1</title>     <style type="text/css">         *{            

  • jquery实现类似淘宝星星评分功能实例

    本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>

  • jquery+CSS3实现淘宝移动网页菜单效果

    jquery+CSS3实现淘宝移动网页菜单效果

    本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移.难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错.相信肯定有更好的解决方法. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-c

  • React实现类似淘宝tab居中切换效果的示例代码

    React实现类似淘宝tab居中切换效果的示例代码

    效果 DOM布局 const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2, text: "本地求购" }, { value: 3, text: "精准收车" }, { value: 4, text: &q

  • 原生js仿淘宝网商品放大镜效果

    原生js仿淘宝网商品放大镜效果

    效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:

  • jQuery实现类似淘宝购物车全选状态示例

    jQuery实现类似淘宝购物车全选状态示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery实现类似淘宝星星评分功能有截图

    jquery实现类似淘宝星星评分功能有截图

    html <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id="p"></p> <p id="sco

  • Vue实现类似Spring官网图片滑动效果方法

    先来看一下Spring官网首页的一个图片滑动显示效果 可以看到, 随着鼠标的滑动,绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示. 显示这样的效果其实很简单,利用固定定位保证两张图片在同一位置下, 我们可以将灰色图片当做背景层图片,然后根据获取到的实时X轴坐标, 动态改变绿色图片的宽度, 隐藏超出X轴坐标的部分, 就可以达到这样的效果, 简单来说, 这效果就是动态改变上层图片的宽度. 实现效果: 我这边选择了两张同样大小的KDA卡莎的图片, 将金色图作为背景图,暗黑图作为左侧图, 用了Vue的

  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

随机推荐