版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、jQuery仿京东选项卡放大镜效果分类： jQuery2012-03-19 22:212人阅读评论(0)收藏编辑删除default.aspx:<% Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "">
2、<html xmlns="">< head runat="server"> <title></title> <style type="text/css"> ul, li list-style-type: none; margin: 0px; padding: 0px; #menu li text-align:center; float: left; padding: 5px; margin-right: 2px; width: 100px; cursor: pointer;
3、#menu li.tabfocus width: 100px; font-weight: bold; background-color: #eee; border-bottom:0; z-index:100; border: solid 1px #666; position:relative; #content width:700px; height:80; padding:10px; background-color:#eee; border:solie 1px #6; border-bottom:0; position:relative; top:-1px; clear:left; #co
4、ntent li display: none; #content li.confocus display: block; a:hover img border:5px solid red; </style> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></scri
5、pt><script type="text/javascript"> $(function () $('#F').show(); $('#menu li').each(function (index) $(this).mousemove(function () $('#menu li.tabfocus').removeClass('tabfocus'); $(this).addClass('tabfocus'); $('#content li:eq(' + in
6、dex + ')').show().siblings().hide(); ) ) ) </script>< /head>< body> <form id="form1" > <ul id="menu"> <li class="tabfocus">疯狂抢购</li> <li>热卖产品</li> <li>热评商品</li> <li>新品上架</li> <li>
7、;猜您喜欢</li> </ul> <%-<a href="zoom/big1.jpg" class='cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40"> <img src="zoom/small1.jpg" /> </a>-%> <ul id="content"> <li class="conclass" id=&qu
8、ot;F"> <a href="Default2.aspx?address=smallFushiXiangji.jpg"><img src="images/smallFushiXiangji.jpg" /></a> <a href="Default2.aspx?address=smallGuntong.jpg"><img src="images/smallGuntong.jpg" /></a> <a href="
9、Default2.aspx?address=smallGuo.jpg"><img src="images/smallGuo.jpg" /></a> <a href="Default2.aspx?address=smallHaixin.jpg"><img src="images/smallHaixin.jpg" /></a> <a href="Default2.aspx?address=smallJiaNengXiangji.jpg"&
10、gt;<img src="images/smallJiaNengXiangji.jpg" /></a> </li> <li> <a href="#"><img src="images/5b48b712-d567-4f30-ae1c-2d692acbbacc.jpg" /></a> <a href="#"><img src="images/e3660342-9d5d-4930-8cd9-38965ce37b
11、57.jpg" /></a> <a href="#"><img src="images/8a1191f8-27c0-4949-aea8-82093fe8e5fb.jpg" /></a> <a href="#"><img src="images/c9d5e68c-ce47-4764-b7ef-33c6008f4268.jpg" /></a> <a href="#"><img src
12、="images/dbe27de8-d0f3-4e65-8427-f646a54851d8.jpg" /></a> </li> <li> <a href="#"><img src="images/smallChangpian.jpg" /></a> <a href="#"><img src="images/smallChuliqi.jpg" /></a> <a href=&qu
13、ot;#"><img src="images/smallFamo.jpg" /></a> <a href="#"><img src="images/smallKongtiao.jpg" /></a> <a href="#"><img src="images/smallJiatingyingyuan.jpg" /></a> </li> <li> <a hre
14、f="#"><img src="images/smallNiKang.jpg" /></a> <a href="#"><img src="images/smallMaotai.jpg" /></a> <a href="#"><img src="images/smallMyWorkDay.jpg" /></a> <a href="#"><i
15、mg src="images/smallLianyiqun.jpg" /></a> </li> <li> <a href="#"><img src="images/smallQianBao.jpg" /></a> <a href="#"><img src="images/smallXiuxianku.jpg" /></a> <a href="#">&l
16、t;img src="images/smallQiupai.jpg" /></a> <a href="#"><img src="images/smallShuiyaxian.jpg" /></a> <a href="#"><img src="images/smallXie.jpg" /></a> </li> </ul> </form>< /body></
17、html>default2aspx:后台：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls; protected void Page_Load(object sender, EventArgs e) string str = Request"address".ToString(); this.zoom1.HRef = "bigimages/big
18、"+str; this.img1.Src = "images/" + str; 前台：<html xmlns="">< head runat="server"> <title></title> <link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" /> <script src="js/Jquery1.7.js&quo
19、t; type="text/javascript"></script> <script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script> <script type="text/javascript"></script>< /head>< body> <form id="form1" runat="server"
20、;> <div id="content"> <a class = 'cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40" runat="server"> <img id="img1" alt='' title="预览大图" style=" width:250px; height:350px" runat="server"
21、/> </a> </div> </form>< /body>< /html>jQuery仿京东选项卡放大镜效果分类： jQuery2012-03-19 22:212人阅读评论(0)收藏编辑删除default.aspx:<% Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html
22、PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns="">< head runat="server"> <title></title> <style type="text/css"> ul, li list-style-type: none; margin: 0px; padding: 0px; #menu li text-align:center; float:
23、 left; padding: 5px; margin-right: 2px; width: 100px; cursor: pointer; #menu li.tabfocus width: 100px; font-weight: bold; background-color: #eee; border-bottom:0; z-index:100; border: solid 1px #666; position:relative; #content width:700px; height:80; padding:10px; background-color:#eee; border:soli
24、e 1px #6; border-bottom:0; position:relative; top:-1px; clear:left; #content li display: none; #content li.confocus display: block; a:hover img border:5px solid red; </style> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script src="js/
25、cloud-zoom.1.0.2.js" type="text/javascript"></script><script type="text/javascript"> $(function () $('#F').show(); $('#menu li').each(function (index) $(this).mousemove(function () $('#menu li.tabfocus').removeClass('tabfocus');
26、 $(this).addClass('tabfocus'); $('#content li:eq(' + index + ')').show().siblings().hide(); ) ) ) </script>< /head>< body> <form id="form1" > <ul id="menu"> <li class="tabfocus">疯狂抢购</li> <li>热卖产品&l
27、t;/li> <li>热评商品</li> <li>新品上架</li> <li>猜您喜欢</li> </ul> <%-<a href="zoom/big1.jpg" class='cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40"> <img src="zoom/small1.jpg" /> </a>-%> <
28、;ul id="content"> <li class="conclass" id="F"> <a href="Default2.aspx?address=smallFushiXiangji.jpg"><img src="images/smallFushiXiangji.jpg" /></a> <a href="Default2.aspx?address=smallGuntong.jpg"><img sr
29、c="images/smallGuntong.jpg" /></a> <a href="Default2.aspx?address=smallGuo.jpg"><img src="images/smallGuo.jpg" /></a> <a href="Default2.aspx?address=smallHaixin.jpg"><img src="images/smallHaixin.jpg" /></a>
30、; <a href="Default2.aspx?address=smallJiaNengXiangji.jpg"><img src="images/smallJiaNengXiangji.jpg" /></a> </li> <li> <a href="#"><img src="images/5b48b712-d567-4f30-ae1c-2d692acbbacc.jpg" /></a> <a href="
31、;#"><img src="images/e3660342-9d5d-4930-8cd9-38965ce37b57.jpg" /></a> <a href="#"><img src="images/8a1191f8-27c0-4949-aea8-82093fe8e5fb.jpg" /></a> <a href="#"><img src="images/c9d5e68c-ce47-4764-b7ef-33c6008
32、f4268.jpg" /></a> <a href="#"><img src="images/dbe27de8-d0f3-4e65-8427-f646a54851d8.jpg" /></a> </li> <li> <a href="#"><img src="images/smallChangpian.jpg" /></a> <a href="#"><img
33、 src="images/smallChuliqi.jpg" /></a> <a href="#"><img src="images/smallFamo.jpg" /></a> <a href="#"><img src="images/smallKongtiao.jpg" /></a> <a href="#"><img src="images/smallJia
34、tingyingyuan.jpg" /></a> </li> <li> <a href="#"><img src="images/smallNiKang.jpg" /></a> <a href="#"><img src="images/smallMaotai.jpg" /></a> <a href="#"><img src="images/sma
35、llMyWorkDay.jpg" /></a> <a href="#"><img src="images/smallLianyiqun.jpg" /></a> </li> <li> <a href="#"><img src="images/smallQianBao.jpg" /></a> <a href="#"><img src="images/
36、smallXiuxianku.jpg" /></a> <a href="#"><img src="images/smallQiupai.jpg" /></a> <a href="#"><img src="images/smallShuiyaxian.jpg" /></a> <a href="#"><img src="images/smallXie.jpg" /
37、></a> </li> </ul> </form>< /body></html>default2aspx:后台：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls; protected void Page_Load(object sender, EventArgs e) string str = Reque
38、st"address".ToString(); this.zoom1.HRef = "bigimages/big"+str; this.img1.Src = "images/" + str; 前台：<html xmlns="">< head runat="server"> <title></title> <link href="css/cloud-zoom.css" rel="stylesheet" t
39、ype="text/css" /> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script> <script type="text/javascript"></script>< /head
40、>< body> <form id="form1" runat="server"> <div id="content"> <a class = 'cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40" runat="server"> <img id="img1" alt='' title="预览大图"
41、; style=" width:250px; height:350px" runat="server"/> </a> </div> </form>< /body>< /html>jQuery仿京东选项卡放大镜效果分类： jQuery2012-03-19 22:212人阅读评论(0)收藏编辑删除default.aspx:<% Page Language="C#" AutoEventWireup="true" CodeFile="Defa
42、ult.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns="">< head runat="server"> <title></title> <style type="text/css"> ul, li list-style-ty
43、pe: none; margin: 0px; padding: 0px; #menu li text-align:center; float: left; padding: 5px; margin-right: 2px; width: 100px; cursor: pointer; #menu li.tabfocus width: 100px; font-weight: bold; background-color: #eee; border-bottom:0; z-index:100; border: solid 1px #666; position:relative; #content w
44、idth:700px; height:80; padding:10px; background-color:#eee; border:solie 1px #6; border-bottom:0; position:relative; top:-1px; clear:left; #content li display: none; #content li.confocus display: block; a:hover img border:5px solid red; </style> <script src="js/Jquery1.7.js" type=
45、"text/javascript"></script> <script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script><script type="text/javascript"> $(function () $('#F').show(); $('#menu li').each(function (index) $(this).mousemove(func
46、tion () $('#menu li.tabfocus').removeClass('tabfocus'); $(this).addClass('tabfocus'); $('#content li:eq(' + index + ')').show().siblings().hide(); ) ) ) </script>< /head>< body> <form id="form1" > <ul id="menu">
47、; <li class="tabfocus">疯狂抢购</li> <li>热卖产品</li> <li>热评商品</li> <li>新品上架</li> <li>猜您喜欢</li> </ul> <%-<a href="zoom/big1.jpg" class='cloud-zoom' id='zoom1' rel="adjustX: -10, adjustY:40"
48、> <img src="zoom/small1.jpg" /> </a>-%> <ul id="content"> <li class="conclass" id="F"> <a href="Default2.aspx?address=smallFushiXiangji.jpg"><img src="images/smallFushiXiangji.jpg" /></a> <
49、a href="Default2.aspx?address=smallGuntong.jpg"><img src="images/smallGuntong.jpg" /></a> <a href="Default2.aspx?address=smallGuo.jpg"><img src="images/smallGuo.jpg" /></a> <a href="Default2.aspx?address=smallHaixin.jpg
50、"><img src="images/smallHaixin.jpg" /></a> <a href="Default2.aspx?address=smallJiaNengXiangji.jpg"><img src="images/smallJiaNengXiangji.jpg" /></a> </li> <li> <a href="#"><img src="images/5b48b712
51、-d567-4f30-ae1c-2d692acbbacc.jpg" /></a> <a href="#"><img src="images/e3660342-9d5d-4930-8cd9-38965ce37b57.jpg" /></a> <a href="#"><img src="images/8a1191f8-27c0-4949-aea8-82093fe8e5fb.jpg" /></a> <a href=&q
52、uot;#"><img src="images/c9d5e68c-ce47-4764-b7ef-33c6008f4268.jpg" /></a> <a href="#"><img src="images/dbe27de8-d0f3-4e65-8427-f646a54851d8.jpg" /></a> </li> <li> <a href="#"><img src="images/small
53、Changpian.jpg" /></a> <a href="#"><img src="images/smallChuliqi.jpg" /></a> <a href="#"><img src="images/smallFamo.jpg" /></a> <a href="#"><img src="images/smallKongtiao.jpg" />&
54、lt;/a> <a href="#"><img src="images/smallJiatingyingyuan.jpg" /></a> </li> <li> <a href="#"><img src="images/smallNiKang.jpg" /></a> <a href="#"><img src="images/smallMaotai.jpg" /></a> <a href="#"><img src="images/smallMyWorkDay.jpg" /></a> <a href="#"><img src="images/smallLianyiqun.jpg" />
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 智能电网工程设计考核试卷
- 涂料行业新技术展望考核试卷
- 办公室财务报表编制与分析考核试卷
- 笔的笔身材料创新考核试卷
- 珠海市高一上学期期末考试数学试题
- 四川华新现代职业学院《建筑构造与制图》2023-2024学年第二学期期末试卷
- 西安汽车职业大学《临床技能综合训练（Ⅲ）》2023-2024学年第一学期期末试卷
- 潞安职业技术学院《剑桥商务英语（1）》2023-2024学年第一学期期末试卷
- 江西省赣州市南康区唐西片区达标名校2025年初三模拟物理试题含解析
- 石家庄理工职业学院《健美操主项实践教学》2023-2024学年第二学期期末试卷
- 人教版小学五年级语文下册2024-2025学年度第二学期第五单元质量检测试卷含参考答案
- 2025年演出经纪人《思想政治与法律基础》考前点题卷一
- 2024年煤矿安全规程(修订)
- 工业机器人现场编程与仿真 6.1 创建动态夹具Smart组件
- 温泉养老、养生及医疗保健项目可行性研究报告
- 信息安全与数据备份
- 城市居住区规划设计规范2018版全文
- 情感信息传播模型-深度研究
- 外卖骑手交通安全培训
- JC-T 1099-2023 硫铝酸钙改性硅酸盐水泥
- 《TAVR的临床应用》课件
评论
0/150
提交评论