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

小灰灰 2022-08-04 00:55 99阅读 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 条评论，99人围观）

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

相关阅读

相关用jquery实现图片轮播

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

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

相关 jQuery+ajax实现简单的上传图片功能

在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：[https://www.jianshu.com/p/383e1f2f4276

太过爱你忘了你带给我的痛/ 2022年12月18日 15:49/ 0 赞/ 194 阅读

相关 jQuery+ajax实现简单的上传图片功能

在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：https://www.jianshu.com/p/383e1f2f4276，

Bertha 。/ 2022年11月22日 05:11/ 0 赞/ 189 阅读

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

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

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

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

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

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

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

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

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

相关用jquery实现图片轮播

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

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

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

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

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

相关使用 resizableImageWithCapInsets 方法实现可伸缩图片

之前介绍过通过 stretchableImageWithLeftCapWidth:topCapHeight: 方法来实现可伸缩图片；可看这篇随笔：[使用 stretchab

客官°小女子只卖身不卖艺/ 2022年04月10日 09:54/ 0 赞/ 152 阅读

相关 Jquery动画图片轮播

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

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