创建图片映射
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>
一张图片和两行文字 设置文字行line-height等于行高就是可以得到一行和图片上面对齐，一行和下面对齐
ALT定位引用位置
让图片大小和大小一样大设置height100% width100%
b
function showdiv(id)
{
for (var i=0;i<6;i++)
{
document.getElementById("div"+i).style.display="none";
}
document.getElementById("div"+id).style.display="";
}
点击隐藏 ，再点击显示
<html>
<body>
<!-- -_-|| 偷懒就写个body -->
<div onClick="javascript: func()">消失</div>
<span id="kkkw">哇哈哈哇哈哈哇哈哈</span>
<script language="javascript">
var kkkw = document.getElementById("kkkw");
/* kkkw.style.display = "block";*/
function func() {
var kkkw = document.getElementById("kkkw");
if(kkkw.style.display == "block")
kkkw.style.display = "none";
else
kkkw.style.display = "block";
}
</script>
</body>
</html>
console.log查询内容
判断是否是移动端 改变移动端的样式
$(document).ready(function () {
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
var tag = false;
//判断当前浏览器，然后跳转到mobile首页，或者微信首页
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
tag = true;
} else {
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
//console.log(browser.versions);
if (browser.versions.mobile || browser.versions.ios || browser.versions.android ||
browser.versions.iPhone || browser.versions.iPad) {
tag = true;
}
else
tag = false;
}
if (tag) {
$(".childs").toggleClass("childssj");
$(".daohang").toggleClass("daohangsj");
$("#zyjj").toggleClass("zyjj");
$(".zyjjmain").toggleClass("zyjjmainsj");
$(".detail").toggleClass("detailsj");
$(".shiyi2 ").toggleClass("shiyi2sj ");
$("#shiyip").toggleClass("shiyip");
//移动端适配
$("#xx1").css("width","800px");
}
});
点击事件点上去显示样式
function tabid(id) {
$("#title1").removeClass("on");
$("#title2").removeClass("on");
$("#title3").removeClass("on");
$("#title4").removeClass("on");
$("#title5").removeClass("on");
$("#title6").removeClass("on");
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide()
$("#title" + id).addClass("on");
$("#div" + id).show();
}
<div id="title1" class="childs on" href="#header" >镇远简介</a></div>
增加渐显效果
this.classname="北京"
.beijing {
background: red;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
transition-duration: 3s;
-ms-transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
渐渐消失 渐渐出现
function ZZShow(divid) {
var divobj = $("#" + divid);
divobj.fadeIn(1000);
}
function ZZHide(divid) {
var divobj = $("#" + divid);
divobj.fadeOut(1000);
}
onmouseover="ZZShow('div1');
<a href="javascript:void(0);" onclick="window.open('http://service.weibo.com/share/share.php?url='+encodeURIComponent(document.location.href));return false;">
<div class="child">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ZhenYuan/img/wb.png" alt="分享至微博空间" border="0" />
</div>
</a>
<a class="jiathis_button_weixin">
<div class="child" id="footChildCode">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ZhenYuan/img/weixin.png" title="微信" />
</div>
</a>
<a class="jiathis_button_weixin">
<div class="child" id="pyq"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ZhenYuan/img/wxquan.png" border="0" title="微信朋友圈" /></div>
</a>
<a href=”javascript:void(0);” onclick="window.open('http://connect.qq.com/widget/shareqq/index.html?url='+ encodeURIComponent(document.location.href));return false;" title=”QQ登录”>
<div class="child">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ZhenYuan/img/QQ.png" border="0" title="QQ" />
</div>
</a>
<a href="javascript:void(0);" onclick="window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href));return false;">
<div class="child">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ZhenYuan/img/qqkj.png" alt="分享至QQ空间" border="0" />
</div>
</a>
</div>
获取当前地址window.location.href
如果唯空就显示选择屏幕，不为空执行下一页
if (pingjieId == "") {
mui.toast("请选择屏幕");
} else
viewApi.go('#feedback');
});
获得当前时间
mui.plusReady(function() {
if(!checkLoginFlag()) {
toLogin("login.html");
}
nowTime(document.getElementById("starttime"),24)
})
function nowTime(ev, type) {
/*
* ev:显示时间的元素
* type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
*/
//年月日时分秒
var Y, M, D, W, H, I;
//月日时分秒为单位时前面补零
function fillZero(v) {
if(v < 10) {
v = '0' + v;
}
return v;
}
(function() {
var d = new Date();
Y = d.getFullYear();
M = fillZero(d.getMonth() + 1);
D = fillZero(d.getDate());
H = fillZero(d.getHours());
I = fillZero(d.getMinutes());
/* S=fillZero(d.getSeconds());*/
ev.value = Y + '/' + M + '/' + D + '/ ' + H + ':' + I;
//每秒更新时间
/*setTimeout(arguments.callee, 1000);*/
})();
}
共同学习，写下你的评论
评论加载中...
作者其他优质文章
