用jQuery实现具有伸缩功能的动画图片

小灰灰 2022-08-04 00:55 139阅读 0赞

<!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>
        <title>chainning code</title>
    <script language="javascript" src="jquery-1.4.min.js"></script>
    <script type="text/javascript"> $(document).ready(function(){ $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=0'},5000); $("div").animate({left:'-=0'},1000); $("div").hide("slow"); } runIt(); }); </script>
      <style> div { margin:3px; width:1000px; height:500px; position:absolute; left:0px; top:0px; background:green; display:none; } div.newcolor { background:blue; } span { color:red; } </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <div id="show" class="panel"><img name="" src="b.jpg" width="1000" height="500" alt="美女" /></div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关用jquery实现图片轮播

用jquery简单实现图片轮播效果，代码如下： <!DOCTYPE html> <html lang="en"> <head> <me

╰+攻爆jí腚メ/ 2023年10月09日 11:01/ 0 赞/ 103 阅读

相关 jquery图片放大缩小旋转功能实现

下载地址：[https://download.csdn.net/download/qq\_43037478/12076630][https_download.csdn.net_

偏执的太偏执、/ 2023年06月27日 03:50/ 0 赞/ 38 阅读

相关 Ubuntu下实现Tengine+Lua+GraphicsMagick图片自动伸缩功能

\\注意：安装路径和配置文件中的引用路径自行修改；CentOS依赖不同，安装Tengine时修改libluajit连接动态库和环境变量，其余操作一致，以下操作本人测试全部通过

今天药忘吃喽~/ 2023年06月23日 11:58/ 0 赞/ 27 阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 35 阅读

相关用jQuery实现的菜单下划线动画效果

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来. 自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,

清疚/ 2022年09月19日 04:17/ 0 赞/ 255 阅读

相关用jquery动画实现的简单的图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

向右看齐/ 2022年08月09日 00:50/ 0 赞/ 192 阅读

相关用jQuery实现具有伸缩功能的动画图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

小灰灰/ 2022年08月04日 00:55/ 0 赞/ 140 阅读

相关用jquery实现图片轮播

{ margin: 0; padding: 0; } ul{ list-style:

谁践踏了优雅/ 2022年06月02日 12:21/ 0 赞/ 287 阅读

相关 js、jquery图片动画，图片动态切换

<style type="text/css"> banner { padding: 5px;

本是古典何须时尚/ 2022年05月09日 10:18/ 0 赞/ 290 阅读

相关 Jquery动画图片轮播

Jquery动画图片轮播补充：JQ是基于JS开发的库，所以代码跟JS相差不多，不多说，直接看代码吧！要求：单击左上角箭头图标来控制图片滚动 1.

以你之姓@/ 2021年09月16日 23:16/ 0 赞/ 466 阅读