分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="zxx_out_box">
<div class="zxx_in_box">
<h3 class="zxx_title">
jQuery-单击文字或图片内容放大显示且含圆角投影效果</h3>
<div class="zxx_main_con fix mb20">
<div class="zxx_zoom_left">
<h4>
图片的放大</h4>
<div class="small_pic">
<a href="#pic_one">
<img src="data:images/mm1.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_two">
<img src="data:images/mm2.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_three">
<img src="data:images/mm3.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_four">
<img src="data:images/mm4.jpg" />
</a>
</div>
</div>
<div class="zxx_zoom_right">
<h4>
文字内容的放大</h4>
<p class="zxx_zoom_word">
这里文字内容放大的层的宽度是需要给定值进行控制的,因为图片的高度和宽度可以获取到,而内容不确定的DIV层的高宽是获取不到了,给定高宽值,然后文字内容就会在这块区域内显示。比如说,<a
href="#zoom_word_one" id="zoom_word_1">400像素的放大弹出层</a>。<br />
如果你觉得这个宽度不够,你可以设置宽度值更大些,例如,<a href="#zoom_word_two" id="zoom_word_2">800像素的宽度</a>。</p>
<h4>
视频或flash的放大</h4>
<p class="zxx_zoom_word">
这里还可以以浮动层的形式显示flash动画或者是视频。例如,<a href="#zoom_flash_one" id="zoom_flash">简约时钟(swf)</a>
</p>
</div>
</div>
</div>
</div>
<!-- 要放大显示的div -->
<div id="pic_one" style="display: none;">
<img src="data:images/z1.jpg" /></div>
<div id="pic_two" style="display: none;">
<img src="data:images/z2.jpg" /></div>
<div id="pic_three" style="display: none;">
<img src="data:images/z3.jpg" /></div>
<div id="pic_four" style="display: none;">
<img src="data:images/z4.jpg" /></div>
<div id="zoom_word_one" style="display: none;">
400像素宽度层示例:这里文字内容放大的层的宽度是需要给定值进行控制的,因为图片的高度和宽度可以获取到,而内容不确定的DIV层的高宽是获取不到了,给定高宽值,然后文字内容就会在这块区域内显示。</div>
<div id="zoom_word_two" style="width: 800px; display: none;">
800像素宽度层示例:这里文字内容放大的层的宽度是需要给定值进行控制的,因为图片的高度和宽度可以获取到,而内容不确定的DIV层的高宽是获取不到了,给定高宽值,然后文字内容就会在这块区域内显示。</div>
<div id="zoom_flash_one" style="display: none;">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550"
height="400">
<param name="movie" value="flash/as3_clock_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/as3_clock_2.swf" width="550"
height="400">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

via:http://www.w2bc.com/Article/41521

基于jQuery弹出层图片动画查看代码的更多相关文章

  1. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  2. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  6. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  7. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  8. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  9. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

随机推荐

  1. 解决安装Egit时Egit Mylyn和org.eclipse.team.core报错

    为了让Aptana支持GitHub,需要安装Egit,但在的时候碰到两个错误,一个是关于缺少EGit Mylyn另一个是缺少org.eclipse.egit.import.feature.group. ...

  2. 【struts2】名为chain的ResultType

    1)基本使用 名称为“chain”的ResultType,在struts-default.xml里的配置如下: <result-type name="chain" class ...

  3. 【struts2】Action的生命周期

    Struts2的Action的生命周期是:Struts2为每个请求都重新初始化一个Action的实例.可以稍微改造一下代码来验证一下. 给HelloWorldAction加上一个public无参的构造 ...

  4. 【Linux】数据流重导向(后篇)

    1)/dev/null 垃圾桶黑洞装置与特殊写法 想象一下,如果我知道错误信息会发生,所以要将错误信息忽略掉而不显示或储存呢? 这个时候黑洞装置 /dev/null 就很重要了!这个 /dev/nul ...

  5. perl进程管理一例

    #!/usr/bin/perl -w use strict; use warnings; use DBI; #### # 这里进行服务器任务管理 ## #字符串映射函数 our %actions = ...

  6. Eclipse SQLExplorer插件的安装和使用

    from: http://blog.csdn.net/flashlm/archive/2007/06/30/1672836.aspx 插件名称: SQLExplorer 插件分类: SQL Edito ...

  7. Ubuntu局域网下利用client联网

    Ubuntu是一个非常好的Linux操作系统,可是对于刚刚安装使用它的新手来说如何用Ubuntu连入网络却是一大难关.如今就记录一下自己在Ubuntu下上网的过程. ★client 将client解压 ...

  8. Android Logcat信息级别解读

    Android Logcat信息级别解读 Logcat信息分为好几个级别,分别是:Assert(断言).Debug(调试).Error(错误).Info(信息).Verbose(详细).Warning ...

  9. MySQL 两个死锁样例

    [引子] 从事MySQL-DBA这一行也有些年头了,想对新人说,在分析死锁问题时应该还要考虑到有一个叫请求队列的“概念”.之所以 在这里提这个不是因为新手不知道,而是有时候会自然而然的想不到. 不信的 ...

  10. jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候,右上角关闭按钮显示不出图标的解决办法

    I had this problem and was able to resolve it with the declaration below. $.fn.bootstrapBtn = $.fn.b ...