黑马程序员技术交流社区

标题: 谁能给我讲下js图片切换的原理？ [打印本页]
作者: 付茂炯    时间: 2012-2-27 13:43
标题: 谁能给我讲下js图片切换的原理？
本帖最后由 付茂炯 于 2012-3-4 17:25 编辑

最好能跟一个小实例。O(∩_∩)O谢谢！
作者: 安超    时间: 2012-2-27 17:33
  1. $(function () {
  2.         $("#pics img").css("cursor", "crosshair").hover(function (e) {
  3.             this.mytitle = (this.alt == "undefined" ? "请刷新网页以加载说明文字……" : this.alt);
  4.             this.alt = "";
  5.             $("body").append("<div id='randonpic'><img width='226' src='" + this.src + "' /><br />" + this.mytitle + "</div>");
  6.             $("#randonpic").css({ "left": e.pageX + 10 + "px", "top": e.pageY + 20 + "px" }).show("fast");
  7.         }, function () {
  8.             this.alt = this.mytitle;
  9.             $("#randonpic").remove();
  10.         }).mousemove(function (e) {
  11.             $("#randonpic").css({ "left": e.pageX + 10 + "px", "top": e.pageY + 20 + "px" });
  12.         });
  13.     });
复制代码
这里的hover就是运用了鼠标移到指定图片上和鼠标移开时的图片切换效果，慢慢研究吧。
作者: 赵国梁    时间: 2012-2-27 20:43
本帖最后由 赵国梁 于 2012-2-27 20:43 编辑
  1. <html>
  2. <head>
  3.         <script type="text/javascript">
  4.                 function ChangePic()
  5.                 {
  6.                         document.getElementById('pic').src="2.jpg";
  7.                 }
  8.         </script>
  9. </head>
  10. <body>
  11. <img id="pic" src="1.jpg"/>
  12. <a href="javascript:ChangePic()">切换图片</a>
  13. </body>
  14. </html>
复制代码
把上边代码放到txt文件中，改后缀名为html，在文件同目录放两张图片，分别命名为1.jpg和2.jpg，打开html页面，点击“切换图片”，便从1.jgp切换到2.jpg。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2