m.lom599.com_手机版乐白家网址_乐百家手机首页登录

jQuery轻松实现表格的隔行变色和点击行变色的实

作者: 手机版乐白家网址  发布:2019-07-10

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进。
ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap——panel使用了绝对定位,就将translate平移改为了left。改动后,各个浏览器运行的效果不错。

jQuery轻松实现表格的隔行变色和点击行变色的实例代码

本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下

具体代码如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");

 //点击变色 
 $("tr").toggle(
 function(){

  $(this).addClass("selected");

 },function (){

  $(this).removeClass("selected");

 }
 );

 //滑动变色
 $("tr").mouseover(function (){

 $(this).addClass("se"); 

 }).mouseout(function (){

 $(this).removeClass("se");

 });





});
</script>
</head>

<body>
<table width="500" border="1" align="center">
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>


</body>
</html>

图片放大功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码,会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js;只需要引入次类库,引用此类库,添加一些css代码即可实现此功能;
HTML框架如下:

html代码(没写注释)

以上这篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

<div class="jqzoom">
  <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="图片 1" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>
<div class="container"> 
    <h1>Parallax Slider</h1> 
    <div class="wrap"> 
      <div class="bg-img"> 
        <div id="bg_1" class="bg bg-1" style="left: 0px;"></div> 
        <div id="bg_2" class="bg bg-2" style="left: 0px;"></div> 
        <div id="bg_3" class="bg bg-3" style="left: 0px;"></div> 
      </div> 
      <div id="wrap_panel" class="wrap-panel" style="left: 0px;"> 
        <div class="panel panel-1"> 
          <img id="img_1" src="images/1.jpg"> 
        </div> 
        <div class="panel panel-2"> 
          <img src="images/2.jpg"> 
        </div> 
        <div class="panel panel-3"> 
          <img src="images/3.jpg"> 
        </div> 
        <div class="panel panel-4"> 
          <img src="images/4.jpg"> 
        </div> 
        <div class="panel panel-5"> 
          <img src="images/5.jpg"> 
        </div> 
        <div class="panel panel-6"> 
          <img src="images/6.jpg"> 
        </div> 
      </div> 
      <div class="navigation-button"> 


      </div> 
      <div id="show_small" class="show-small"> 
        <ul> 
          <li><img src="images/thumbs/1.jpg"></li> 
          <li><img src="images/thumbs/2.jpg"></li> 
          <li><img src="images/thumbs/3.jpg"></li> 
          <li><img src="images/thumbs/4.jpg"></li> 
          <li><img src="images/thumbs/5.jpg"></li> 
          <li><img src="images/thumbs/6.jpg"></li> 
        </ul> 
      </div> 
    </div> 
  </div> 

您可能感兴趣的文章:

  • jquery实现效果比较好的table选中行颜色
  • jquery入门—选择器实现隔行变色实例代码
  • jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
  • 基于jQuey实现鼠标滑过变色(整行变色)
  • JS与jQuery实现隔行变色的方法
  • jQuery实现选中行变色效果(实例讲解)

注意,img中必须有jqimg属性,这个属性放的是大图的地址;

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:jQuery轻松实现表格的隔行变色和点击行变色的实

关键词: m.lom599.com 乐百家lbj818

上一篇:js插件安装图文教程,实现代码
下一篇:没有了