JS点击链接后慢慢展开隐藏着图片的方法

本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<title>JS点击链接后，慢慢展开隐藏着的图片</title>
<body>
<script language="JavaScript">
var b=0;
var c=true;
function fade(){
if(document.all);
if(c == true){b+=3}
if(b>294){c=false}
u.width=394
u.height=b; //运行后图片的大小
setTimeout("fade()",1)}//根据实际情况选择延时
</script>
<p align="center"><a href="javascript:"><img src="/images/3.jpg" name="u" width="0" height="0" border="0"  onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a>
<p align="center"><a href="javascript:" onClick="fade()">点击展开图片</a>
</body>
</html>

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

赞 (0)

相关推荐

  • jquery特效 点击展示与隐藏全文

    jquery特效 点击展示与隐藏全文

    本文实例讲述了jquery点击展示与隐藏全文特效,这里使用jquery实现展开.隐藏特效,点击查看全文后内容展开,点击收起全文其内容收缩,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 一.来看一下主体框架程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击查看全文</title> <link type=&

  • toggle一个div显示或隐藏且可扩展成自定义下拉框

    复制代码 代码如下: $(function(){ //toggle div $("#gga").click(function(event){ event.stopPropagation(); //阻止冒泡事件 $(".toggleoption").slideToggle("fast"); }); //slideup div $(document).click(function(event) { var eo = $(event.target);

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

  • 右键显示(隐藏)扩展名的bat代码

    "显示/隐藏 系统文件"需右键单击任意文件夹或文件才能显示菜单 "显示/隐藏 扩展名"需右键单击任意文件夹里的空白处才能显示菜单 右键显示(隐藏)扩展名及系统文件.bat 复制代码 代码如下: @echo off reg delete "HKCR\CLSID\{00000000-0000-0000-0000-000000000012}" /f >nul 2>nul reg delete "HKLM\SOFTWARE\Clas

  • jquery点击展示与隐藏更多内容

    jquery点击展示与隐藏更多内容

    先上效果图 点击前 点击后展开 html代码 <div id="tips" class="center-block"> <h5 class="tips_head"> <u>遇到问题?</u> </h5> <div class="tips_content"> <ol> <li>Ctrl+F5刷新本页面</li> <l

  • jQuery焦点控制图层展示延迟隐藏的方法

    本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <b id="button"

  • 用javascript 控制表格行的展开和隐藏的代码

    无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

  • jquery控制页面的展开和隐藏实现方法(推荐)

    [jquery代码]  <script> require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); }); $(".up").click(function(){ $(this).parent().parent().paren

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

随机推荐