zoukankan      html  css  js  c++  java
  • 鼠标移动图片颜色变动评分

    跟着鼠标走动的图片评分

     <!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></title>
        <style type="text/css">
            body { background: #dfdfdf;  }
           #star { background: url("dang.jpg") no-repeat -140px 0; width: 140px; height: 26px; }
         </style>
         <script src="http://www.cnblogs.com/jquery-1.7.1.js" type="text/javascript"></script>
         <script type="text/javascript">
             $(document).ready(function () {
                 $('#star').mousemove(function (e) {
                    var el = $(this);
                    var x = e.clientX;
                     var left = el.offset().left;
                     var w = x - left;
                     w = -140 + w;
                     if (w < 0) w = -1 * w;
                     w = parseInt(w / 28) * 28;
                     el.css('background-position', '-' + w + 'px 0');
                     var s = '';
                 }).mouseleave(function (e) {
                    var el = $(this);
                     el.css('background-position', '-140px 0');
                 });
             });
         </script>
     </head>
     <body>
         <div id="star">
         </div>
     </body>
     </html>

  • 相关阅读:
    PHP 安装配置
    网络,进程 相关指令
    大数据之路:阿里巴巴大数据实践PDF下载
    计算机系统概论PDF下载
    计算机组成与体系结构性能设计PDF下载
    简明python教程PDF下载
    软件工程-实践者的研究方法PDF下载
    软件测试PDF下载
    设计模式解析PDF下载
    设计原本pdf下载
  • 原文地址:https://www.cnblogs.com/caiyun/p/3035956.html
Copyright © 2011-2022 走看看