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>

  • 相关阅读:
    Flowplayer-Subtitle
    Flowplayer-playlist
    Flowplayer-Embedding
    Flowplayer-Skin
    Flowplayer-Setup
    Flowplayer-JavaScript API
    任务监控程序设计与实现总结
    Spark RDD整理
    oracle连接和执行流程总结
    阅读《Oracle内核技术揭秘》的读书笔记
  • 原文地址:https://www.cnblogs.com/caiyun/p/3035956.html
Copyright © 2011-2022 走看看